CSS
美化网页, 布局页面
CSS规则由两部分组成：选择器以及一条或多条声明
选择器分类
分为基础选择器和复合选择器
基础选择器
标签选择器
用HTML标签名称作为选择器
标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
类选择器
用于差异化选择不同的标签,一个或某几个
.类名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
多类名
一个标签可以指定多个类名
<div class="red head">亚瑟王</div>
id选择器
HTML中用id属性设置id选择器，CSS中id选择器以 “#” 来定义.
#id名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
通配符选择器
使用 “*” 定义，表示选取页面中的所有元素
* {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
复合选择器
可以更准确，更高效地选择目标元素
后代选择器(包含选择器)
写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔
ol li{
color: red;
}
元素1 元素2{
样式说明
}
子代选择器(亲儿子选择器)
只能选择作为某元素的最近一级子元素，就是选择亲儿子元素
元素1>元素2 {
样式说明
}
并集选择器
可以选择多组标签，同时为他们定义相同的样式. 用于集体声明
元素1,元素2 {
样式说明
}
伪类选择器
链接伪类选择器
- 为确保生效，必须安照LVHA的循序声明：link：visited：hover：active。
- 因为a链接在浏览器中具有默认样式，需要给链接单独指定样式
| 属性 | 说明 |
|---|---|
| a：link | 选择所有未被访问的链接 |
| a：visited | 选择所有已被访问的链接 |
| a：hover | 选择鼠标指针位于其上的链接 |
| a：active | 选择活动链接（鼠标按下未弹起的链接） |
focus伪类选择器
用于选取获得焦点的表单元素，用于光标视觉提示
input:focus{
样式说明
}
CSS字体属性
font属性可以定义大小，粗细，和文字样式
font-family（字体）
font-family: “微软雅黑”;
多个字体设置的话，会提高适配性
font-size（大小）
font-size: 24px;
font-weight（字体粗细）
font-weight: bold；
参数
- normal（正常字体）等于400
- bold（粗体）等于700
- bolder（特粗体）
- lighter（细体）
font-style（文字样式）
p {
font-style: normal;
}
字体复合属性
可以把这些文字属性综合来写，节约代码
body{
font: font-style font-weight font-size/line-height font-family;
}
- 必须按上述语法格式中的顺序书写，不能更换顺序，各个属性间用空格隔开。
- 不需要设置的属性可以省略，但必须保留font-size和font-family，否则不起作用
text-align（文本对齐）
用于设置元素内文本内容的水平对齐方式
text-align: center;
| 属性值 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
text-decoration（装饰文本）
text-decoration: underline;
| 属性值 | 描述 |
|---|---|
| none | 默认。无装饰线 |
| underline | 下划线。链接自带下划线，可以设置none去掉下划线 |
| overline | 上划线 |
| line-through | 删除线 |
text-indent（文本缩进）
文本首行缩进
text-indent: 20px;
text-indent: 2em;
em是相对单位，一个em就是当前元素font-size一个文字的大小，如果没有设置大小，则会按照父元素的一个文字大小
line-height（行间距）
行高，控制文字行与行之间的距离
line-height: 20px;
上间距＋文本高度+下间距=行间距
文字行高测量：文字底部到文字底部
CSS引入方式
- 行内样式表(行内式)
- 内部样式表(嵌入式)
- 外部样式表(链接式)
行内样式表(行内式引入)
在元素标签内部的style属性中设置CSS样式，用于修改简单样式
<div style="color: steelblue; font-size: 20px;">雷霆嘎巴,欧青辣少</div>
内部样式表
就是在HTML内部写样式,单独写到style标签内部.
外部样式表
适用于样式比较多的情况，样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用
CSS引入：
<link rel="stylesheet" href="CSS文件路径">
CSS元素显示模式
一般分为块元素和行内元素
块元素
<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>
- 独占一行
- 高度，宽度，外边距以及内边距都可以控制
- 宽度默认是容器的100%
- 一个容器及盒子，里面可以放行内元素或者块级元素
- 文字类标签，里面不能放块级元素
行内元素
<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>
- 相邻的行内元素在一行上，一行可以显示多个
- 高，宽直接直接设置无效
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或者其他行内元素
- 链接里不能再放链接，禁止套娃
行内块元素
<img>,<input>,<td>
- 和相邻元素在一行上，但是之间有空白缝隙，一行可以显示多个
- 默认宽度就是它本身内容的宽度
- 高度，行高，外边距以及内边距都可以控制
元素显示模式转换
display: block; 转换为块级元素
display: inline; 转换为行内元素
display: inline-block; 转换为行内块
单行文字垂直居中（利用行高）
使文字行高等于盒子的高度，就可以让文字在当前盒子中垂直居中
div{
width: 200px;
height: 40px;
background-color: pink;
line-height: 40px;
}
<div>文字居中</div>
CSS背景
背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定
background-color(背景颜色)
默认为transparent（透明）
background-image(背景图片)
便于控制位置，url文件导向
background-repeat(背景平铺)
- repeat
- no-repeat
- repeat-x 沿着x轴平铺
- repeat-y 沿着y轴平铺
background-position(背景图片位置)
background-position: x y ;
可以使用方位名词或者精确单位
参数是方位名词时
- 如果指定的两个值都是方位名词，则这两个值的前后顺序无关
- 如果只有一个方位名词，另一个值省略，则第二个默认居中对齐
参数是精确单位时
- 第一个肯定是x坐标，第二个肯定是y坐标
- 如果只有一个数值，那么这个数值就是x坐标，另一个默认垂直居中
参数如果是混合单位时
- 如果两个值是精确单位和方位名词混用时，则第一个是x坐标，第二个是y坐标
background-attachment(背景图像固定，背景附着)
用于设置背景图像是否固定或者随着页面的其余部分滚动
可以制作视差滚动的效果
参数
- scroll 背景图像随着对象内容滚动
- fixed 背景图像固定
背景属性复合写法
background: black url() no-repeat center top fixed;
背景色半透明（alpha）
background: rgba(0, 0, 0, 0.3);
最后一个参数是alpha透明度，取值范围在0-1之间
如果是一个盒子半透明的话，是盒子背景半透明，盒子里面的内容不受影响
CSS三大特性
- 层叠性
- 继承性
- 优先级
层叠性
相同选择器给设置同样的样式，此时一个样式就会**覆盖（层叠）**另一个冲突的样式。
这个特性主要解决样式冲突的问题，样式冲突，就近原则
继承性
子标签会继承父标签的某些样式，比如文本颜色和字号
子承父业
适当使用继承可以简化代码，降低CSS样式的复杂性
行高的继承
body {
color: pink;
font: 12px/1.5 '微软雅黑';
}
<div>粉红色的回忆</div>
<p>粉红色的回忆</p>
- 行高可以跟单位也可以不跟单位
- 子元素没有设置行高，就会继承父元素的行高
- 子元素的行高会根据自己的文字大小自动调整行高
优先级
当同一个元素指定多个选择器，就会有优先级的产生
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
选择器权重表
| 选择器 | 选择器权重 |
|---|---|
| 继承或者* | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式 style=“ ” | 1，0，0，0 |
| ！ important 重要的 | 无穷大 |
- 权重是有4组数字组成，但不会有进位
- 继承的权重为0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
权重叠加：复合选择器，需要计算权重
- div ul li -----> 0,0,0,3
- .nav ul li -----> 0,0,1,2
- a:hover -----> 0,0,1,1
CSS盒子模型
页面布局三大核心，盒子模型，浮动和定位
盒子模型
- border 边框
- content 内容
- padding 内边框
- margin 外边距
边框（border）
可以设置元素的边框，边框宽度（粗细）,边框样式，边框颜色
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位PX |
| border-style | 边框的样式（solid 实线边框 dashed 虚线边框 dotted 点线边框） |
| border-color | 边框颜色 |
可以设置单独边框的样式
- border-top
- border-bottom
- border-right
- border-left
表格的细线边框（border-collapse）
控制浏览器绘制表格边框的方式，可以控制相邻单元格的边框
border-collapse：collapse 表示相邻边框合并在一起
边框影响盒子实际大小
边框弧额外增加盒子实际大小
所以测量盒子大小时，不量边框
内边距（padding）
用于设置内边距，即边框与内容之间的距离
可以设置单独内边距
- padding-top
- padding-bottom
- padding-right
- padding-left
简写属性
| 值的个数 | 表达意思 |
|---|---|
| padding：5px； | 1个值，代表上下左右都有5px边距 |
| padding：5px 10px； | 2个值，代表上下内边距是5px，左右内边距是10px |
| padding：5px 10px 20px | 3个值，代表上内边距5px，左右内边距10px，下内边距20px |
| padding：5px 10px 20px 30px | 4个值，代表上是5px，右是10px，下是20px，左是30px。顺序为顺时针 |
盒子指定padding后
- 内容和边框有了距离，添加了内边距
- padding影响盒子实际大小，如果盒子本身已经有了宽度和高度，再指定内边框，盒子会变大
- 为了保证盒子和效果图大小保持一致,则让width/height减去多出来的内边距大小即可
盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小
外边距（margin）
用于设置外边距，即控制盒子和盒子之间的距离
- margin-left
- margin-right
- margin-top
- margin-bottom
简化写法和padding一样
典型应用——让块级盒子水平居中
- 盒子必须指定了宽度（width）
- 盒子左右的外边框都设置为auto
.header{
width: 960px; margin: 0 auto;
}
行内元素或者行内块元素水平居中给其父元素添加text-align:center即可
外边距合并
使用margin定义块元素的垂直外边框时，可能会出现外边距的合并
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决方案
- 为父元素定义上边框
- 为父元素定义上内边框
- 为父元素添加overflow：hidden
清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。
* {
margin: 0; 清除内边距
padding: 0; 清除外边距
}
注意：行内元素为了兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但转换为块级和行内块元素就ok了
布局为什么用不同的盒子
标签都有语义，合理的地方用合理的标签。比如标题就用h，大量文字段落就用p
什么时候用margin或padding
大部分情况都可以混用，各有优缺点，但根据实际情况，总有更简单的方法实现