清除系统默认样式,文本样式,高级选择器(权重),边界圆角,a标签的四大伪类,背景图片
清除系统默认样式
大多系统预定义标签,有默认样式,不满足实际开发需求,反倒影响布局
通常清除系统样式,利于开发
body,h1-h6,p,table {
margin:;
} ul {
margin:;
padding:;
list-style:none; #清除列表样式
} a {
text-decoration:none; #清除a标签下划线
color:black; # 设置a标签字体颜色
}
文本样式
简写: font: 字重 字体大小/行高 字族
font: normal 30px/200px "STSong"
<style> color:red; 字体颜色 字体大小:相关属性都是从父级继承
font-size:inherit; 继承
font-size:12px; 字体最小为12px font-weight:100-900 | bold粗线 | 字重
font-family:"微软雅黑" , "STSong" 华文宋 字族
line-height:100px; 行高
text-align:center | left | right 字体水平居中 text-indent:2em 文本缩进2个字,跟父级的字体有关
2rem 只和html的字体有关 text-decoration:none 清除划线
line_through 下划线
underline 中划线
overline 上划线 简写:font:字重 字体大小/行高 字族
font:normal 30px/200px "STSong"
</style>
高级选择器
群组选择器: 逗号 ,
<style>
.div1,.p1 {
width: 100px;
}
</style>
后代选择器:空格表示 div a
子代选择器:大于号表示 >
控制关系层次控制目标选择器
.sup > .sub { width: 100px; } 父子关系
.sup .sub { width: 100px; } 后代关系
兄弟选择器: + 相邻
~ 兄弟
通过关系层次控制一个目标选择器
.li2 ~ .li3 { width: 100px; } # 兄弟
.li2 + .li3 { width: 100px; } # 相邻
伪类选择器:
ul li:nth-child(3) { } 表示ul下的第三个li标签
ul:nth-child(3) > li:nth-child(6) { } 表示第 三 个ul下的第 六 个li
li:nth-child(3n-1) { } 表示偶数个 li:not(:last-child) {} 取反
多类选择器
.div.div1#dd {
width:50px;
} <div class="div div1" id="dd"> </div>
高级选择器优先级
选择器优先级和个数有关
基础选择器占主导 id > class > 标签 > 通配
选择器优先级相同时,跟顺序有关
高级选择器类型不会影响优先级
伪类选择器相当于class
边界圆角
左上角为第一个角,顺时针走, 先横后纵
div {
border-radius:50%; 圆形
border-radius:50%; 30px 60px 先横后纵
border-radius:50%; 30px/60px
}
a标签的四大伪类
未访问过状态
a:link {
} 鼠标悬浮状态
a:hover {
cursor:pointer; 手掌
} 鼠标点击时状态
a:active { } 鼠标离开时状态
a:visited { }
背景图片
background:图片地址 图片平铺 x轴 y轴
background:图片地址 图片平铺 x轴 y轴
background-image:url("01.png") no-repeat 20px 20px; background-repeat:no-repeat 不平铺
repeat 平铺
repeat-x
repeat-y background-position: 水平位置,垂直位置
center center; 居中
20px,50px; background-position-x:20px; x轴位移20px
background-position-y:20px; y轴位移20px
清除系统默认样式,文本样式,高级选择器(权重),边界圆角,a标签的四大伪类,背景图片的更多相关文章
- 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图
盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...
- 四大伪类,css鼠标样式设置,reset操作,静止对文本操作
07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态(鼠标点击后 ...
- css字体样式+文本样式
font-family属性值:具体字体名或者字体集 如果是中文或者有单词之间有空格,需要加双引号 字体集: Serif (有装饰线) Sans-serif (无装饰线) Monospace Cursi ...
- jQuery过滤选择器:first和:first-child的区别,CSS伪类:first-child
最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...
- 去除android或者iOS系统默认的一些样式总结
ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉 iOS用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置-webkit-tap-highlight-color的alpha值为0, ...
- from提交数据,高级选择器,伪类选择器,前端样式等
1. form提交数据 get: 不安全的提交数据,高效 post: 安全的提交数据,低效 前台都可以给后台提交数据,后台一定会给前台一个反馈结果 2. 高级选择器 <!DOCTYPE html ...
- day48 前端高级选择器优先级
复习 1. 基础选择器 标签选择器(div) | 类选择器(.div1) | id选择器(#div2) <div class="div1" id="div2&quo ...
- python 46 边界圆角 、a_img_list标签 、伪类选择器
一:边界圆角 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- 前端(六)—— 伪类选择器:a标签的伪类、内容伪类、索引伪类、取反伪类
a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...
随机推荐
- Python爬虫之Beautiful Soup库的基本使用
- the security settings could not be applied to the database(mysql安装error)【简记】
在安装mysql时,出现“The security settings could not be applied to the database because the connection has f ...
- MongoDB的常用命令和增查改删
数据库操作 Mongodb MySQL 查询库 show databases | show dbs show databases 选中库 use databaseName use databaseNa ...
- 戏说春秋_i春秋 writeup
<戏说春秋>第一关 图穷匕见 题目: 解:用winhex打开,拉到最后可发现一段编码 放到解密网站上解码. <戏说春秋>第二关 纸上谈兵 解:文中没有明确指出问题,也没有给出线 ...
- Java程序设计与数据结构导论--读后感
与我前面所读的<Java7基础教程>相比,此书不适合自学,更适合作为教材使用. 虽然此书完整覆盖了Java的知识点和数据结构的基础问题,并且对每个部分都做了基本说明.但是因为没有深入展开, ...
- Django contenttypes 组件
contenttypes组件 介绍 Django包含一个contenttypes应用程序(app),可以跟踪Django项目中安装的所有模型(Model),提供用于处理模型的高级通用接口. Conte ...
- Django 【认证系统】auth
本篇内容 介绍Django框架提供的auth 认证系统 方法: 方法名 备注 create_user 创建用户 authenticate 登录验证 login 记录登录状态 logout 退出用户登录 ...
- python3 time模块
import time '''查看系统时间拿到的是一个数字(时间戳)从1970-01-01 00:00:00开始计算,以秒为单位'''print(time.time()) 执行结果:155650817 ...
- easyui-tab标签
一. 加载方式 //class 加载方式<div id="box" class="easyui-tabs" style="width:500px ...
- Git入门—创建项目
Git入门—创建项目 注:win10系统下 打开Git Bash,进入存放仓库的目录 创建 初始化git init,该命令执行完后会在当前目录生成一个 .git 目录. 所有 Git 需要的数据和资源 ...