一、CSS3简介
- CSS，层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
- CSS3是CSS的最新版本。
- 基本语法：
selector {property:value}
selector:选择器，CSS3可以通过某种选择器选中想要改变样式的标签。
property：希望改变的该标签的属性。
value：该属性的属性值。
也有一种说法，上面的语法可以用三个W来理解，即
selector:Who，修改谁。
property：What，修改该标签的什么属性。
value：How，怎么修改。
简单例子：
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS简单示例</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p>我想放假</p>
<p class="cap">我想放假</p>
<p class="txtcr">我想放假</p>
<p class="space">我想放假</p>
<p class="back">我想放假</p>
</body>
</html>
CSS代码：
p{
text-align: center; /*文本居中*/
}
.cap {
text-transform: capitalize; /*每个单词首字母大写*/
line-height: 30px; /*设置行高为30像素*/
color: cornflowerblue; /*设置文本的颜色*/
font-weight: 500; /*设置文本的粗细*/
cursor: move; /*设置鼠标放置文字上时光标的形状*/
}
.space {
letter-spacing: 10px; /*设置文字间距*/
color: darkmagenta; /*设置文本的颜色*/
text-decoration: underline; /*为文字添加下划线*/
}
.txtcr {
color: black; /*设置文本的颜色*/
font-weight: bold; /*设置文本为粗体*/
}
.back {
font-size: 60px; /*设置文字字体大小*/
background-color: darkgreen; /*设置文字背景颜色*/
cursor: help; /*设置鼠标放置文字上时光标的形状*/
text-indent: 30px; /*设置文本缩进*/
}
最终效果：
注意：最后需要将CSS链接到HTML文件上，即
<link rel="stylesheet" href="style.css" type="text/css">
此行代码最好写在<head>标签中，来保证页面内容加载出来时就显示样式。type和rel的属性值一般不更改
二、CSS选择器
1、基础选择器
（1）元素选择器
最常见，最基本的语法即可
p {color: red;}
a {color: black;}
选择器通常是某个元素
（2）类选择器
通过元素的class属性选择指定元素。
.classname{}
表示选中class属性的属性值为classname的所有标签。
“.”不可省略
比如上面的这段代码：
.cap {
text-transform: capitalize; /*每个单词首字母大写*/
line-height: 30px; /*设置行高为30像素*/
color: cornflowerblue; /*设置文本的颜色*/
font-weight: 500; /*设置文本的粗细*/
cursor: move; /*设置鼠标放置文字上时光标的形状*/
}
（3）ID选择器
基本语法：
#intro{color: red;}
ID选择器根据ID属性选择唯一的元素，所以要求页面上的ID属性值不可重复。
（4）属性选择器
可以根据元素的属性及属性值来选择元素。
2、其他选择器
（1）后代选择器
又称包含选择器，可以选择作为某元素后代的元素。简单来说就是在一定范围内起作用，只在定义范围的元素起作用，其他的不影响。
比如下面的css代码：
h1 em{color: red;}
此段代码表示，只有h1标签下的em子元素被设置成了红色，其他文本不会受影响。
（2）子代选择器
个人理解就是只有一代的后代选择器，只能选择后代的第一代，也就是子代，其他的后代不受影响。
基本语法：
h1>ss{color: red;}
此行代码表示只把h1的叫做ss的孩子元素变成红色，其他叫ss的后代不受影响。
（3）相邻兄弟元素选择器
可选择紧接在元素后的另一个元素，两个元素有相同父元素，比如可以把标题h1后边出现的段落变为红色：
h1+p{color: red;}
（4）通用兄弟元素选择器
指定位于同一个父元素之中的某个元素之后的所有某个种类的兄弟元素使用的样式。
比如想把h1后的所有<p>元素都变成黄色：
h1~p{color: yellow;}
3、伪类和伪元素选择器
（1）伪类选择器
是CSS3中已经定义好的选择器，不可随意命名。
常用：
:link：元素被定义了超链接但并未被访问过
:visited：元素被定义了超链接并已被访问过
:hover：鼠标悬停的元素应用样式
:active：用户正在单击的元素应用样式
a:hover 必须被置于 a:link 和 a:visited 之后；a:active 必须被置于 a:hover 之后。所以，a 标签的这四种伪类选择器的顺序为：a:link ，a:visited，a:hover ，a:active。必须严格按照此规则来设置属性，否则无效。
（2）伪元素选择器
用来改变文档中特定部分的效果样式。
可用于设置元素的首字母、首行的样式；在元素的内容之前或之后插入内容
常用：
| 选择器 | 说明 |
|---|---|
| :first-letter | 该选择器对应的css样式对指定对象内的第一个字符起作用 |
| :first-line | 该选择器对应的css样式对指定对象内的第一行内容起作用 |
| :before | 该选择器与内容相关属性结合使用，在指定对象前插入内容 |
| :after | 该选择器与内容相关属性结合使用，在指定对象后插入内容 |
注：:before和:after使用时需与content属性添加内容，无该属性无法添加内容，也无法设置样式。
三、CSS常用属性
1、文本相关属性
（1）文字相关属性
①设置字体属性 font-family
基本语法：font-family:name1,[name2],[name3]
font-family:name1,[name2],[name3]
name:字体名称，加上[]代表替换，即若第一个字体在电脑里不存在，则用第二个字体代替。
比如：
.xx {
font-family:"宋体","楷体","黑体";
}
②设置字号属性font-size
基本语法：
font-size:length
length：字体的尺寸，由数字和长度单位组成。
如果没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。
注：这里的单位可以是绝对单位也可以是相对单位，绝对单位不会随显示器尺寸变化而变化。
常见绝对单位：
| 绝对单位 | 说明 |
|---|---|
| in | inch，英寸 |
| cm | centimeter，厘米 |
| mm | millimeter，毫米 |
| pt | point，印刷的点数，一般1pt≈1/72in |
| pc | pica，1pc=12pt |
常见相对单位：
- em：em是相对字体长度单位，它的单位长度是根据父元素的文本文字水平宽度来决定的。
- ex：em是相对字体长度单位，它的单位长度是根据父元素的文本文字垂直高度来决定的。
- px：px表示当前浏览器上一个像素的大小。
③设置文字颜色属性color
基本语法：
color: red
其中，red只是一种示例，这里的值可以是任何一种颜色，可以是英文，十六进制，RGB，HSL。
④设置文字水平对齐方式属性font-align
之前在html学习的时候，align属性设置的时候，老会被删除线删除（我用的webstorm），当时只觉得应该是不常用，学到这里，所以应该是用CSS设置文字对齐更常用一些。
基本语法：
font-align:left|center|right|justify
left:左对齐
center:居中对齐
right:右对齐
justify:两端对齐
⑤设置段首缩进属性text-indent
基本语法：
text-indent:length
length:由百分比数值或浮点数和单位标识符组成的长度值，允许为负。
所以有两种缩进方式，一个就是通过百分比设置，另一个就是直接定义缩进长度，也就是通过浮点数和单位标识符直接设置。
（2）文本相关属性
①文本自动换行word-break
浏览器有默认换行的规则，若要改变，可以用word-break，基本语法：
word-break:keep-all | break-all | normal
keep-all:表示在半角空格或连字符处换行
break-all:允许在单词内换行
normal:使用浏览器默认的换行的规则
②长单词和URL地址换行word-wrap
基本语法：
word-wrap:normal|break-word
normal:浏览器保持默认处理规则，即只在半角空格或连字符处换行
break-word:可在长单词或URL内部换行
2、背景相关属性
（1）背景常规属性
①添加背景颜色background-color
基本语法：
background-color: color | transparent
color:背景颜色。
transparent:背景颜色透明。
②添加背景图片background-image
基本语法：
background-image:url()
同样的，这里的图像地址可以是绝对地址，也可以是相对地址。
③设置图像的平铺方式background-repeat
基本语法：
background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y
属性值的含义：
| 属性值 | 说明 |
|---|---|
| inherit | 从父标签继承该属性 |
| no-repeat | 背景图像不重复，只出现一次 |
| repeat | 在水平和垂直方向上重复背景图像 |
| repeat-x | 在水平方向上重复背景图像 |
| repeat-y | 在垂直方向上重复背景图像 |
④设置背景图像是否随页面内容滚动background-attachment
基本语法：
background-attachment: scroll | fixed
scroll:页面滚动时，背景图跟随滚动
fixed:背景图固定在可见区域，不随页面滚动
⑤设定背景图像在页面的位置background-position
基本语法：
background-position: length | percentage | top | center | bottom | left | right
共有七个属性值：
| 属性值 | 说明 |
|---|---|
| length | 设置背景图与页边距水平和垂直方向的距离，单位可以为cm、mm、px等 |
| percentage | 根据页面标签框的宽度和高度的百分比放置背景图像 |
| top | 顶部居中 |
| center | 居中 |
| bottom | 底部居中 |
| left | 左部居中 |
| right | 右部居中 |
注：当需要为背景设置多个属性时，可以如下格式设置：
.xx-ima{
background: url() left center no-repeat;
}
（2）CSS3新增背景属性
①指定背景的显示范围background-clip
基本语法：
background-clip:border-box | padding-box | content-box | text
| 属性值 | 说明 |
|---|---|
| border-box | 从border区域（不含）开始向外剪裁背景 |
| padding-box | 从padding区域（不含）开始向外剪裁背景 |
| content-box | 从content区域开始向外剪裁背景 |
②设置背景图像的起点background-origin
基本语法：
background-origin:border-box | padding-box | content-box
| 属性值 | 说明 |
|---|---|
| border-box | 从border区域（含）开始显示背景 |
| padding-box | 从padding区域（含）开始显示背景 |
| content-box | 从content区域开始显示背景 |
③设置背景图像的尺寸background-size
基本语法：
background-size: [ <length> | <percentage> | auto ]| cover | contain
| 属性值 | 说明 |
|---|---|
| <length> | 由浮点数和单位标识符组成的长度值，不可为负。设置一个值为宽度，两个值分别为宽度和高度。一个值时图像将等比例缩放。 |
| <percentage> | 不可为负值，百分比形式，设置一个值为宽度百分比，等比例缩放；设置两个值分别为宽度百分比和高度百分比。 |
| auto | 背景图像的原始尺寸 |
| cover | 将背景图像等比缩放到完全覆盖容器，可能超出容器 |
| contain | 将背景图像等比缩放到容器大小，适应容器尺寸，始终在容器内 |
3、列表相关属性
| 属性 | 说明 |
|---|---|
| list-style | 简写属性，和上文背景一样，可以将列表的所有属性写在一行 |
| list-style-image | 将图像设置为列表项标志 |
| list-style-position | 设置列表项标志的位置 |
| list-style-type | 设置列表项标志的类型 |
4、框模型
（1）概述
框模型 (Box Model，也可叫做盒模型) 规定了元素框处理元素内容、内边距、边框 和外边距的方式。
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
（2）元素element
设置元素大小可以通过width（宽度）和height（高度）设置，属性值可以是长度+单位，也可以是百分比。
比如说给一个<div>元素设置这两个属性：
div {
width: 200px;
height: 100px;
}
如果没有设置这两个元素，那么值就是auto关键字，其会根据元素类型自动调整大小。如设置<div>元素的宽高为auto时，其宽度将跨所有可用空间，高度为能容纳所有内容的最小高度。
（3）外边距margin
外边距是对象和对象间的距离，主要由4部分组成，分别是上（margin-top）、下（margin-bottom）、左（margin-left）、右（margin-right）外边距。四部分既可以单独设置其中一个属性，也可以同时设置四个属性。
①单独设置某一个外边距：
margin-top:<length>| auto | ;
auto：默认外边距
length：使用长度数值+单位或百分比表示外边距
②同时设置四个外边距的值
可通过margin简写，有四种写法：
margin: 5px;
margin: 5px 10px;
margin: 5px 10px 15px;
margin: 5px 10px 15px 20px;
margin: 5px表示上下左右外边距的值都为5像素；
margin: 5px 10px表示上下外边距为5像素，左右外边距为10px；
margin: 5px 10px 15px表示上外边距为5px，下外边距为10px，左右外边距为15px；
margin: 5px 10px 15px 20px表示从顶端开始，按照上右下左的顺序依次赋值。
（4）内边距padding
内边距是对象的内容和对象边框间的距离，主要由4部分组成，分别是上（padding-top）、下（padding-bottom）、左（padding-left）、右（padding-right）内边距。四部分既可以单独设置其中一个属性，也可以同时设置四个属性。
设置方法与含义同上，不赘述。
注：auto属性值对padding不起作用，且padding无法设置负值，margin可以
（5）边框border
边框的属性主要包括颜色（color）、样式（style）、宽度（width）。
①边框颜色border-color
可将四条边设置成相同的颜色，也可设置成不同颜色。
相同颜色
border-color: color;
此处的color为颜色名称或表示颜色的RGB值（更推荐）。
不同颜色
与设置外边距类似，四个值时依旧是上右下左的顺序。
②边框样式border-style
③边框宽度border-width
语法：
border-width:medium|thin|thick|length
medium:默认边框宽度
thin：比默认宽度窄
thick：比默认宽度宽
length：指定宽度
注：border-color只有在设置了border-style且其属性值不为none，而且border-width属性值不为0时，边框才有效，否则不显示。
也可以用border同时设置三个属性。
5、定位相关属性
（1）设置元素位置position
①设置定位方式
position:static | absolute | fixed | relative;
static:无特殊定位，对象遵循HTML定位规则，使用该属性值时，top等属性无效。
absolute:绝对定位，使用top、right、bottom、left等属性指定绝对位置。可使对象漂浮在页面之上。
fixed:固定定位，且对象位置固定，不随滚动条移动改变位置。
relative:相对定位，遵循HTML定位规则，并由top等属性指定。
②设置元素位置
设置定位方式后可以设置元素位置。
top：设置元素的上外边距边界与其包含块上边界之间的偏移。
left：设置元素的左外边距边界与其包含块上边界之间的偏移。
bottom：设置元素的下外边距边界与其包含块上边界之间的偏移。
right：设置元素的右外边距边界与其包含块上边界之间的偏移。
（2）设置元素的浮动
float用于设置标签对象的浮动布局。
浮动居左靠左（float:left）
浮动居右靠右（float:right）
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
