link
style
color:#000;颜色
background-color:#000; 背景颜色
background:rgba(0,0,0,0.3); 背景透明度设alpha(0~1)
opacity: 0.3;元素透明度;
background-image:url(); 背景图片
background-repeat:; 背景图平铺原则
background-attachment:;设置背景图像是随对象内容滚动还是固定的
background-position:;背景图位置,可方位名词和%
font-size:px;文字大小
font-family:“宋体”; 字体
font-weight: normal正常 400;(bold粗700,lighter细) 字体粗细
font-style: normal正常(italic斜体); 字体风格
【字体连写:选择器{font: font-style font-weight font-size / line-height font-family;}顺序不可逆,没有参数可省略,下划线标注参数不可省略。h1{font: 25px “宋体”;}】
【背景连写:选择器{background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;}无序,例background:{#000 url() no-repeat fixed center top}】
texe-align:L R C; 水平对齐方式
line-height:px; 行高(垂直方向移动对齐)
text-indent:2em; 首行缩进
text-decoration: none取消装饰(underline下划线,line-through删除线); 取消装饰
display:inline; 把块级元素转换为行内元素
display:block; 把行内元素转换为块级元素
display: inline-block; 把行内元素转换为行内块元素
border:0; 去掉所有边框
border-width: 1px; 边框粗细
border-color: red; 边框颜色
border-style: solid 实线 (dashed 虚线dotted 点线); 边框样式
【边框简写:选择器{border: 1px solid red;}】
border-top(bottom left right): 1px solid red; 单边框(做分隔用)
border-collapse: collapse; 合并相邻边框线(1+1=1)。
padding:px; 内边距,适合做与文字内容长度相同有边距的盒子(padding-top(B L R):;单侧边距)
margin:px; 外边距
cursor: pointer; 鼠标变小手
border-radius: 6px(50%); 小手矩形,正方形50%变圆形,可以分别设置四角。
list-style: none; 取消无序列表小点
margin:0 auto; auto自动(自动充满),让盒子水平居中对齐
flaot:left; 浮动
clear:both(L R); 清除浮动,作用于浮动元素父元素在无法添加高度且需要占位时使用此方法,达到占位的效果。
overflow:hidden; 溢出隐藏,(auto需要时显示滚动条)(scroll总显示滚动条)
position: static; 定位模式(static自动(静态)定位relative相对定位 absolute 绝对定位 fixed 固定定位),边偏移参数(top left right bottom)。
z-index:1; 叠放次序,只有定位的盒子才有用,默认值0,无单位。
CSS选择器
基本选择器 | ||
类选择器 | .nav{} | 可多次重复使用(最常用) |
ID选择器 | #nav{} | 只能用一次 |
标签选择器 | div{} | 作用于所有此标签元素 |
伪类选择器 | :link | link未访问visited已访问hover鼠标悬浮时active点击 |
通配符选择器 | *{} | 作用于整个页面的所有元素(较少) |
复合选择器 | ||
后代选择器 | div ui li{} | 用空格分隔,作用于后代所有重名选择器 |
子代选择器 | div>ui>li{} | 用>分隔,仅作用于后代子代所有重名选择器 |
交集选择器 | div.(#)nav{} | 选择器按序混用,仅作用于最后一级 |
并集选择器 | div,p,span{} | 用逗号隔开,集体声明,相同的样式 |