Cascading style sheets
层叠样式表
html 结构
css 展现样式
js 动作
CSS选择器 选择某些元素
id选择器: #one{
}
类选择器: .one{
}
标签选择器: p{
}
普遍选择器:*(所有元素)
子代选择器:
div
p
p
span
sapn
div
空格-->后代 div *
> --> 直接子代 div>p
+ --> 后一个兄弟元素 p+span
~ --> 之后所有的兄弟元素
p.one~*
嵌套选择器:
p.one 选择p标签且class为one的
p .one 选择p标签的后代中class为one的
组合选择器: 选择p标签,span标签
p,span{
}
属性选择器:
[key] 有key属性的元素
[key=value] 有key并且值为value的
[key^=value] 有key,并且值以value开始的
[key$=value] 有key,并且值以value结尾的
[key*=value] 有key,并且值中包含value的
[key~=value] 有key,并且值中有一个值为value的
伪类选择器:
a:link{} /*未访问的样式 默认蓝色*/
a:visited{} /*访问之后的样式 默认紫色*/
a:hover{} /*悬停的样式 默认无*/
a:active{} /*点击的样式 默认红色*/
:first-child 选择作为第1个孩子的元素
:last-child 选择作为最后一个孩子的元素
:only-child 选择作为独生子的元素
:nth-child() 选择作为第几个孩子的元素
参数有以下取值
n 自然数
an+b 3n+2
odd 奇数
even 偶数
:nth-last-child() 选择作为倒数第几个孩子的元素
:first-of-type 每家中的每种类型中的第一个
:last-of-type 每家中的每种类型中的最后一个
:nth-of-type() 每家中的每种类型中的第几个
:nth-last-of-type () 每家中的每种类型中的倒数第几个
表单的伪类选择器
:focus 聚焦时候的状态
:enabled 可用的元素选择
:disabled 禁用的元素被选中
:required 必填的元素被选中
:optional 非必填的元素
:ckecked 选中的元素
:default 默认选中的元素
:valid 通过验证的元素
:invalid 没有通过验证的元素
伪元素选择器:
::before 在之前添加东西
::after 在之后添加东西
::first-line 第一行
::first-letter 第一个字符
::selection 选中的字符
继承
可继承属性
background
color
不可继承属性
border:
inherit 不继承,初始化
initial 继承
unset 不设置
内嵌样式
标签内部的style属性
特性值 1000
内部样式表
<style></style>
外部样式表
<link herf=""/>
.css结尾的文件
@import url();
style属性>style标签/
link标签>@import
css优先级
3个
1. !important 修饰的最优先
2. 特性值(权值,权重)
style属性内 1000
id选择器 100
类选择器,属性选择器,伪类选择器 10
标签选择器,伪元素选择器 1
空格,>,+,~,* 0
3. 就近原则(权值一样)
显示与隐藏
display:
none 消失,不占位置
block 块级显示,可设置宽高
inline 行内元素显示,不可设置宽高
inline-block 行内显示,可设置宽高
visibility:
hidden 消失,占位置
visible 显示
块级与行内转换
块级:独占一行,可设置宽高
行内:与其他元素共享一行,不可设置宽高
超出部分的处理
overflow:
auto 自动
scroll 滚动条
hidden 隐藏
cursor 鼠标样式
text 文本
help 问号
pointer 手
move 移动
wait 等待
corsshair 十字
n-resize s n e w
盒子模型
内容区
padding 内间距
border 边框
margin 外边距
w3c盒子模型
设置的宽高就是内容区的宽高
div
width:100px;
height:100px;
padding:10px;
margin:10px;
内容区宽 100px;
盒子的宽 100+2*padding+2*border=122px;
盒子所占的屏幕空间的宽
100+2*padding+2*border+2*margin
margin/padding
一个值 上下左右
两个值 上下 左右
三个值 上 左右 下
四个值 上 右 下 左
margin-top margin-bottom margin-left margin-right
padding-top padding-bottom padding-left padding-right
IE盒子模型
设置的宽高是盒子的宽高,包括内容区,padding区,border区
div
width:100px;
height:100px;
padding:10px;
margin:10px;
内容区的宽
100-2*padding-2*border=78px
盒子的宽
100px
占据屏幕空间的宽
100+2*margin=120px
box-sizing:
content-box 内容区的宽高 w3c
border-box 盒子的宽高 IE
浮动
float:
none 浮动
left 左浮动
right 右浮动
清除浮动
clear:both;
可以清除浮动元素对其他元素带来的影响
如果子元素都浮动,想让父级有高度,在父级元素上使用overflow:hidden;
如果只是想清除浮动对其他元素的布局的影响的话,在其它元素上使用clear:both;
浮动的特点
如果只有一个元素浮动的话,该元素脱离文档流,其他元素顶上去,
如果多个元素浮动的话,在一行显示,紧跟在第一个浮动元素之后。
如果有父子级关系的话,子级元素都浮动,则父级元素没有高度,
如果想有高度,在父级元素上使用overflow:hidden;
定位
position属性
static 静态的
fixed 固定定位(参考点是浏览器)
脱离文档流,默认位置是原来位置的上方
relative 相对定位(参考点是原来在文档流中的位置)
不脱离文档流,默认位置是原来的位置
absolute 绝对定位
如果没有定位的父元素,参考点是页面的左上点
如果有定位的祖先元素,参考点是离他最近的定位祖先元素
脱离文档流,默认位置是原来位置的上方
定位元素:使用position属性,值为fixed,relative,absolute。
定位元素专用属性
left:
top:
right:
bottom:
布局
默认:
书写顺序就是展示顺序
自定义:
*{
margin:0;
padding:0;
}
display
overflow
visibility
float
定位
盒子模型
品字布局
弹性盒模型布局
容器:父元素
display:flex;
flex-direction:内部项目的方向
row 在一行 【默认】
row-reverse 在一行倒着显示
column 在一列
column-reverse 在一列倒着显示
flex-warp 设置是否换行
nowarp 不换行【默认】
warp 换行
warp-reverse 换行并且倒着显示
flex-flow:row warp;
align-items:垂直对齐方式
stretch 拉伸【默认】
flex-start 上
flex-end 下
center 中
justify-content:水平对齐方式
flex-start 左
flex-end 右
center 中
space-between
项目:子元素
flex:1/2 200px;
动画
animation-name:动画名字
@keyframes myNmae{
0%{
width:...
}
100%{
width:...
}
}
animation-duration:动画持续时间
animation-delay:动画延迟时间
animation-timing-function:动画执行函数
animation-direction:动画执行方向
reversed 从最后一帧到第一帧
alternate 奇数次从第一帧到最后一帧,偶数次从最后一帧到第一帧
alternate-reversed
偶数次从第一帧到最后一帧,奇数次从最后一帧到第一帧
animation-iteration-count:动画播放次数
n
infinite 无限次
变形
transform属性
translateX() X轴偏移
translateY() Y轴偏移
translateZ() Z轴偏移
scale() 放大和缩小
rotateX() X轴旋转
rotateY() Y轴旋转
rotate(deg) Z轴旋转
table
border-collapse 合并单元格线
collapse 合并
caption-side 标题位置