css选择器及css规则
一、思维脑图(css)
二、选择器
1、核心选择器
- 标签选择器
例如: div {} //选中所有<div>,为他们应用一些规则
- id选择器
例如: .second {} //选中class为second的元素
- 逗号选择器
例如: div,#one {} //选中div和one的元素
- 组合选择器
例如: div#one {} //选中所有div中id为one的元素
- 普遍选择器
例如: * //不单独使用,效率会降低;用于配合其他选择器使用
2、层次选择器
- 子元素选择器
例如: .nav > ul > li {} //.nav下的直接子元素ul下的直接子元素li中加入规则
- 后代选择器
例如 : .nav li {} //nav下面的所有li
- 下一个兄弟选择器
例如: .products > li.ios + *{} //代表li.ios之后的下一个
- 之后所有兄弟选择
例如: .products > li.ios ~ *{} //代表li.ios之后的所有
3、属性选择器/过滤器
一般用于表单元素,格式为:selector[]
input[placeholder] //选中所有input
input[type=text] //选中所有单行文本框
input[type^=t] //选中所有t开头的
input[type$=t] //选中所有t结尾的
input[type*=t] //选中所有包含t的
4、伪类选择器/过滤器
与状态相关
:link //a标签还未被访问
:hover //光标悬浮到元素上才会被选中
:active //a标签激活
:visited //a标签访问过
与状态相关
:first-child //判断li是不是第一个孩子
:last-child //判断li是不是最后一个孩子
:nth-child(v) //判断li是第几个
注:v 为数字,公式,关键字(如:3、even偶数、odd奇数、2n+1):first-of-type //这一种类型里的第一个
:last-of-type //这一种类型里的最后一个
:nth-of-type //这一种类型里的第几个
5、伪元素选择器
-
::after
例如:.nav > ul::after{} //在.nav下的直接子元素ul里面的最后面插入一个节点
-
::before
例如: .nav > ul::before{} // 在.nav下的直接子元素ul里面的最前面插入一个节点
副作用:在dom节点中产生一个新节点 -
需要了解
::first-letter 句首 ::first-line 首行 ::selection 选中的
三、思维脑图(css规则)
四、规则
1、 字体样式
- 字体样式在css中可以被继承
font-family:"微软雅黑","Microsoft YaHei","宋体",serif;
font-size:12px; //字体大小
注:浏览器默认字体为16px
font-weight:bold; //字体粗细(normal、bolder、100~900
)
font-style:normal; //是否开启斜体(italic)
line-height:2em; //行高【文本垂直居中】
font:style weight size/line-height family;
例如:italic bold 12px/2em ‘Microsoft YaHei’,serif
网络字体
- 它主要用于字体图标库(在这里推荐iconfont/fontawesome)
使用步骤:
1) 在iconfont网站中选择图标,加入项目,产生代码
2) 将产生的代码在html中通过link引用如http://at.alicdn.com/t/font_1328534_f3dyyeuoew.css
3) 再应用css中定义好的类,来使用对应的图标
2、文本样式
-
文本样式与字体样式一样可以被继承。
color:#333; //字体颜色
text-align:center //【文本水平居中】
text-decoration-line //underline 、line-through 、overline 、none
text-decoration-style //solid 、dotted 、double 、dashed 、wavy 、...
text-decoration-color //颜色
text-decoration:none; //字体装饰
text-indent:2em; //文本缩进
text-shadow: > 例如:text-shadow:12px 2px 3px #ccc;
3、列表样式
list-style-type //circle 、square 、...
list-style-image //url('')
list-style-position //outside 、inside
list-style:none;
4、盒子样式(盒子,块元素)
width
height
margin-top
margin-right
margin-bottom
margin-left
margin
margin:10px; 上右下左
margin:0 10px; 上下为0,左右10px
margin:0 5px 10px; 上0,左右5px,下10px
margin:0 5px 10px 15px; 上右下左
border-top
border-top-style 边框线类型
border-top-width 边框宽度
border-top-color 边框线颜色
border-right
border-right-style 边框线类型
border-right-width 边框宽度
border-right-color 边框线颜色
border-bottom
border-bottom-style 边框线类型
border-bottom-width 边框宽度
border-bottom-color 边框线颜色
border-left
border-left-style 边框线类型
border-left-width 边框宽度
border-left-color 边框线颜色
border: 1px solid #ededed; 【*】
border-color
border-style
border-width
padding
padding-top
padding-right
padding-bottom
padding-left
---------- box-shadow: 5px 5px 10px #ccc;
---------- box-shadow: inset 0 0 3px lightblue;
border-radius //圆角半径
background-origin 背景铺设的起点
border-box 边框下
padding-box 内边距下
content-box 内容下
background-image //背景图片
url
background-repeat //背景重复方式
repeat-x
repeat-y
no-repeat
background-color //背景颜色
颜色
background-position //背景位置
center
top left
10px 20px
background-clip //背景裁切方式
border-box 边框下
padding-box 内边距下
content-box 内容下
background //速写
background:url('') no-repeat center;
background-size:cover;
=>
background:center/cover padding-box url('') no-repeat ;
一个盒子的组成:
外边距 --------------- margin
边框 -------------------border
内边距 --------------- padding
内容 -------------------存放子元素或者内容的区域
盒子所占面积?
盒子存放内容的区域为多大?
盒子计算方式:
box-sizing:content-box;内容盒子(传统盒子)
-----------width = 内容宽
---------- height = 内容高
-----------所占的宽 = border + padding + width
-----------所占的高 = border + padding + height
box-sizing:border-box;边框盒子(怪异盒子)
-----------width = 边框以内所有的和
-----------width = border + padding + 内容宽
5、单位
颜色
#333333 => #333
#ededed
rgb(0,0,0) =>#000000
rgba(0,0,0,0.3)
渐变
长度
-----绝对单位
`px`
-----相对单位
em 当前元素上的font-size的值
font-size:12px ;
1em = 12px;
2em = 24px;
rem
html{font-size:14px}
1rem = 14px;
%
width 相对于父元素
border-radius 相对于当前元素的width
...
-----关键
center
border-box
content-box
-----函数
url()
rgb()
rgba()
6. 选择器优先级
7. 布局
1.浮动布局
2.定位布局