CSS （Cascading style sheets） 层叠样式表
1、CSS三大特性
- 层叠性 样式冲突,遵循就近原则
- 继承性 一般都会继承 text/font
- 优先性 id>伪>类>标签 !important>内套>id
权重叠加 (0,0,0,0) 继承权重为0
2、结构样式分离
<head>
<style>
</style>
</head>
3、字体样式属性
综合样式 font:italic bold 14px "微黑"
- font-size 字体大小
- font-family 样式
- cssunicode 字体
- font-weight 字体粗细
- font-style 网格
4、选择器
同一类型统一 <div>
- 类选择器 可以多次使用
.类名 {属性 }
调用 class = "类型"
名: .c-orange class = "c-orange"
不要纯文字和数字- ID选择器 身份证 唯一调用
{#类名{ 属性}
调用 id = "类名"}- 通配选择器
*{属性} 代表所有选择器- 连接伪类选择器 (针对a)
:类名{属性} :hover
a:link{}- 结构伪类选择器
- 目标伪类选择器
:target {}
::after
5、属性
- 行间距 line-height : 20px
- 水平对齐 text-align : center
- 首行缩进 text-indent : 2em (2个汉字)
- 字间距 letter-spacing : 2px
- 单词间距 word-spacing : 10px
- 自动换行 word-break
- 颜色半透明 color:rgba(0,0,0,0.5)
- 文字阴影 text-shadow : 1px 2px 3px rgba(0,0,0,0.5)
6、引入CSS样式表
- 内部样式表
- 行内 <div style = "color : red">
- 外部 <link rel = "stylesheet" href = ".css">
7、标签显示样式
相互转换 display inline / block
- 块级元素 div
- 行内元素 span
- 行内块元素 img input 可以设置高宽
8、CSS复合选择器
- 交集 p.red{ }
- 并集 div,p,span { }
- 后代 div p { }
- 子元素 .nav>li
9、背景
background - color
- 图片 - image:url()
- 拼接 - repeat:no-repeat
- 位置 - position:right top
- 滚动 - attachment :fixed
- 字体 -size:
- 背景透明 : rgba()
10、凹凸文字
text-shadow 凸(上亮下黑) 凹(相反)
11、下划线
-decoration: none 连接下划线
12、盒子模型
boder - width / style / color / collapse(合并) / radius(圆角 10px / 50%) / top 单边
13、内边距
padding - left:20px(表示上下) , 30px(表示左右)
外边距
margin:30 auto 上下30 左右居中
margin:(0,0,0,0) 上右下左
清除内外边距
*{margin : 0
padding : 0
}
14、CSS盒模型
box-sizing{
content-box 以前
border-box 现在 (不撑开盒子,包在里面)
}
15、盒子阴影
box-shadow 水平 垂直 blur 大小 颜色 内外
16、版心(可视区)
常见:960 / 980 / 1000 / 1200
17、消除浮动(浮动造成的影响)
浮动元素不占高度,父类高度为0的问题
- 额外标签法
<div style = "clear":both> </div>尾部加空盒子- 父级增加overflow 属性
overflow:hidden 触发BFC- after伪元素
.clearFix:after{
}- 双伪元素 before after
18、定位:定到某个位置
定位模式 position
口语:子绝父相
- static 自动 relative 相对
- absolute 绝对(不占位置) fixed 固定
19、取消列表自带小点
list-style:none
