CSS
一、CSS选择器
标签选择器
p{
height: 50px;
font-size: 14px;
}
类选择器
类选择器以"."开头,与元素中class属性的值保持一致。
.first{
font-weight: bold;
}
<div class="first">Hello</div>
ID选择器
ID选择器以"#"开头,在一个文档中,ID值不能重复。
#first{
font-weight: bold;
}
<div id="first">Hello</div>
普遍选择器
以"*"表示普遍选择器,表示选择所有元素。
.left-nav>* { width:200px; background-color:#fafafa}
<div>
<dl>
<dt>推荐</dt>
<dd class="current"><i class="icon-music"></i>发现音乐</dd>
</dl>
<dl>
<dt>我的音乐</dt>
<dd><i class="icon-cloud-download"></i>下载的音</dd>
</dl>
</div>
层次选择器
-
后代选择器
使用"  "隔开两个选择器,包括所有后代,直接后代和间接后代。 -
子代选择器
使用">"隔开两个选择器,即选择直接子代元素。 -
相邻同胞选择器
使用"+"隔开两个选择器,表示相邻的下一个兄弟元素。 -
一般同胞选择器
使用"~"隔开两个兄弟元素,表示之后所有的兄弟元素。
属性选择器
- [attr]
选择具有attr属性的元素,无论该属性的值是什么。 - [attr=val]
选择具有attr属性的,并且attr的值为val元素。 - [attr ^= val]
选择具有attr属性的,并且attr的值以val元素开头的。 - [attr $= val]
选择具有attr属性的,并且attr的值为是以val结尾的。 - [attr *= val]
选择具有attr属性的,并且attr的值包含val的元素。 - [attr ~= val]
选择具有attr属性的,并且attr的值之一为val的元素。
伪类选择器
伪类选择器以":"开头,用在选择器之后,指明元素在某种状态下被选中。
子代伪类选择器
- :only-child 选中独生元素
- :first-child 选中元素为第一个孩子的元素
- :last-child 选中元素为最后一个孩子的元素
- :nth-child(n) 选中元素作为第几个孩子元素的元素
- nth-last-child(n) 选中元素作为倒数第几个孩子的元素
- :first-of-type 选中元素作为每种类型中的第一个孩子的元素
- :last-of-type 选中元素作为每种类型中最后一个孩子的元素
- nth-of-type(n) 选中元素作为每种类型中第几个类型的元素
- nth-of-last-type(n) 选中元素作为每种类型中倒数第几个类型的元素
元素状态伪类选择器
- :link 未被访问的状态,a标签
- :visited 已访问过的状态,a标签
- :hover 鼠标悬停的状态,a标签,其他标签也可用
- :active 活动时的状态,a标签,其他标签也可用
- :focus 聚焦的状态
- :checked 用户选中的单选按钮和复选按钮
- :default 默认选中的单选按钮和复选按钮
- :enabled、 :disabled 可用的表单控件、禁用的表单控件
- :valid 、:invalid 通过表单验证的、不通过表单验证的
- :required、:optional 必填的和选填的
- :in-range 、:out-of-range 在范围内的、在范围外的
伪元素选择器
伪元素以"::"开头,用在选择器后,用于选择指定的元素。
- ::after 选中之后的不存在的节点,可配合content属性进行内容填充
- ::before 选中之前的不存在的节点,可配合content属性进行内容填充
- ::first-letter 选中第一个文本字符
- ::first-line 选中第一行文本
- ::selection 选中用户在选择的时候的文本
二、CSS级联
!important声明
在css规则的值末尾添加"!important"能够保证该规则优先其他规则。但是一般建议 不使用"!important"
特性值
- 元素的style属性中,特性值为1000
- ID选择器,特性值为100
- 类选择器,属性选择器,伪类选择器,特性值为10
- 元素选择器,伪元素选择器,特性值为1
代码顺序
如果多个竞争选择器具有相同的重要性和特性值,采取就近原则。
三、CSS继承
CSS有些规则默认会被子元素继承。
继承值:
- inherit 继承父元素样式
- initial 不继承。默认样式
- unset 不设定
可继承属性: font系列属性,文本系列属性,列表系列属性,cursor,visibility。
不可继承属性:margin,padding,border。
四、CSS单位值
CSS颜色单位
- RGB 红色,绿色,蓝色
- RGBA 红色,绿色,蓝色,透明度
- 十六进制 #FFFFFF
- HSL和HLSA
第一个参数为色调,取值0~360,0是红色,120是绿色,240是蓝色。
第二个参数为饱和度,取值0~100%,0为灰色,100%为全彩,色彩会越来越饱和。
第三个参数为亮度,取值0~100%,0为黑色,100%为白色,会越来越亮。
第四个参数为透明度,取值0~1。
CSS长度
- 绝对单位 px
- 相对单位 em和rem,(1em = 16px,根据网页字体大小发生变化)
- 百分比 %
五、CSS文本样式
- color 指定字体颜色
- font-size 指定字体大小
- font-family 指定特殊字体
- font-style 打开和关闭斜体文本
取值:normal,italic,oblique - font-weight 设置字体粗细程度
取值:normal,bold,lighter,bolder,100-900 - text-align 文字排列方式
取值:left,center,right - text-transform 文本变形
取值:none,uppercase,lowercase,capitalize,full-width(类似等宽字体) - text-decoration 文本修饰
取值速写:line style color
text-decoration-line 修饰线的种类
取值:none,underline,overline,line-through
text-decoration-style 修饰线样式
取值:solid,wavy,dashed,dotted,double
text-decoration-color 修饰线颜色 - text-shadow 文本阴影
text-shadow: h-shadow v-shadow blur color
列表样式
list-style 设置列表的样式
速写:list-style: type image position
- list-style:none 无列表样式
- list-style-type 设置标志项的类型
取值:
none 没有标志项
disc 实心原点
square 实心方形
circle 空心圆
decimal 数值
decimal-leading-zero 补零的数值
lower-roman 小写罗马
upper-roman 大写罗马
… - list-style-position 设置标志项的位置
取值:
outside 在主框外
inside 在主框内 - list-style-image 自定义设置标志项的图片
取值:url(" ")
如果type和image都可用,那么用image的,如果image不可用,那么用type的。
默认样式
- ul,ol 元素的margin-top,margin-bottom均为16px(1em) ,padding-left为 40px(2.5em)。
- dl 元素的margin-top,margin-bottom均为16px(1em),但是没有内边距
- dd 元素的margin-left为40px(2.5em)
- p 元素的margin-top,margin-bottom为16px(1em)
- body元素 margin-top, margin-bottom, margin-left, margin-right为8px
其他样式
- cursor 调整光标悬浮到链接上的时候光标的形状
- line-height 设置文本的行高
- outline 调整环绕链接的框,类似border,不占据屏幕空间
outline-width,outline-style,outline-color,outline-offset - display 显示方式 (none 不占据屏幕空间)
取值:inline,block,inline-block,none - visibility 显示与隐藏
取值:
hidden:占据屏幕空间
visible:显示 - opacity 透明度,0-1,隐藏时占据屏幕空间
- overflow 溢出处理
取值:hidden,auto,scroll
盒子模型
box-sizing
取值:content-box,padding-box,border-box
- w3c盒子 box-sizing:content-box
width 属性仅表示内容所占的宽度
height 属性仅表示内容所占的高度 - IE盒子 box-sizing: border-box
width 属性表示盒子的宽度为内容区的宽度加两边padding的宽度加两边边框的宽度
height 表示盒子的宽度为内容区的高度加两边padding的高度的加两边边框的高度
背景
- background-color 背景颜色
- background-image:url(’’) 背景图片
- background-repeat 背景图片重复方式
取值:
repeat-x x方向重复一行
repeat-y y方向重复一列
no-repeat 不重复
repeat 【默认】x方向y方向重复铺满 - background-position 设置背景图片的位置
- background-origin 设置背景图片开始的区域
取值:
padding-box 【默认】从内间距区开始绘制
border-box 从边框区开始绘制
content-box 从内容区开始绘制 - background-clip 背景图片的裁切
取值:
padding-box 从内间距区开始裁剪
border-box 【默认】从边框区开始裁剪
content-box 从内容区开始裁剪 - background-attachment 设置背景图片的固定点
取值
scroll 【默认】背景图片随着滚动条滚动
fixed 背景图片固定,即使内容滚动,背景图片不滚动
边框
速写属性:
border: width style color
border-width: 边框宽度
border-style: 边框样式
border-color: 边框颜色
border-radius 指定圆角边框半径
表格
- border-collapse 指定表格的边框是合并还是分开
取值:separate,collapse - caption-side 指定caption坐落在表格的哪个位置上
取值:top,bottom - background 表格背景颜色
布局
- 浮动布局float
float: left / right / none
将块级元素显示在一行,脱离文档流。浮动在上层。清除浮动时,在兄弟元素上,clear:both;在父子元素上,overflow:hidden。 - 定位布局
position:static / relative / fixed / absolute / sticky
相对定位 relative,相对于原先在文档流中的位置定位,不脱离文档流。
固定定位 fixed,相对于视口区进行定位,固定在某一个位置,页面滚动的时候它不动。脱离文档流。
绝对定位 absolute,如果有定位祖先元素,相对于离它最近的定位祖先元素进行定位。如果没有定位祖先元素,相对于视口区的左上角进行定位。脱离文档流。
黏贴定位 sticky,在滚动时,距离顶部部分距离时,固定在窗口不动。
z-index 设置元素堆叠顺序属性,仅在绝对定位元素上有效,数值越大,越靠上 - 伸缩盒布局
主轴默认x轴,可以通过设置flex-direction去改变
交叉轴 默认y轴
在容器上使用的属性
display:flex;
justify-content:flex-start/flex-end/center/space-between/space-around; 子元素在主轴上的排列方式
align-items:flex-start/flex-end/center/stretch/baseline; 子元素在交叉轴上的排列方式
align-content:flex-start/flex-end/center/stretch/space-between/space-around 多主轴在交叉轴上的排列方式
flex-direction:row/row-reverse/column/column-reverse; 伸缩方向设置
flex-wrap:nowrap/wrap/wrap-reverse; 设置子元素在容器内是否换行
flex-flow:flex-direction flex-wrap; 速写属性
flex-flow:row wrap;
在子元素上使用的属性
flex:1; 子元素占容器空间的几分之一
flex:1 300px;
flex:300px 1; 子元素最小大小为300px,如果容器内有剩余空间,那么再占一份
CSS动画 animation
声明一个动画
@keyframes myani{
from{
....
}
20%{
....
}
50%{
}
to{
...
}
}
使用动画
div{
animation-name:myani; //使用某一个动画
animation-duration:300ms/3s; //设置动画时长
animation-delay:200ms/2s; //动画延迟时间
animation-play-state:paused/running; //动画状态
animation-iteration-count:5/infinite; //动画迭代的次数
animation-direction:normal/reverse/alternate/alternate-reverse; //动画的方向
animation-timing-function:linear; //动画执行的速度曲线
}
CSS变形 transform
声明一个动画
@keyframes myani{
from{
....
}
20%{
....
}
50%{
}
to{
...
}
}
在变形中 旋转 倾斜 缩放 移动
只有旋转据有z轴方向
transform: rotate(deg) z轴方向上转动
transform: rotateZ(deg) z轴方向上转动
transform: rotateX(deg) x轴方向上转动
transform: rotateY(deg) y轴方向上转动
transform: skewX(deg) x轴方向上倾斜
transform: skewY(deg) y轴方向上倾斜
transform: skew(deg,deg) x轴和y轴方向同时倾斜
transform: scaleX(1) x轴方向上缩放 //大于1放大 小于1缩小
transform: scaleY(1) y轴方向上缩放
transform: scale(1,1) x轴和y轴方向同时缩放
transform: translateX(px) x轴方向上移动
transform: translateY(px) y轴方向上移动
transform: translate(px,px) x轴和y轴方向同时缩放
动画和变形需要@keyframes 进行动画声明
CSS过渡 transition
transition: property duration timing-function delay
transition 是 transition-property, transition-duration,transition- timing-function , transition-delay的速写形式,分别表示过渡属性,持续时间,时间曲线,过渡延迟