文章目录
一、 CSS二、 注释三、 语法四、 选择器分类优先级1. id选择器2. class选择器3. 元素选择器五、 样式表style优先级1. 行内样式2. 内部样式3. 外部样式六、 CSS常用样式1. 颜色color取值方式2. 宽高width height3. 背景background全部属性3.1 背景颜色color3.2 背景图像image3.3 图像重复repeat3.4 图像附着attachment3.5 图像位置position简写形式4. 边框border全部属性4.1 样式style4.2 宽度width4.3 颜色color简写形式5. 文本样式6. 列表样式简写形式设置列表的颜色样式七、 盒子模型概念盒子的宽度和高度元素的宽度和高度外边距margin简写属性外边距合并内边距Padding简写属性轮廓(区别于边框)轮廓样式轮廓宽度轮廓颜色简写属性轮廓偏移一、 CSS
CSS，Cascading Style Sheets的缩写
CSS 指的是层叠样式表，是一种描述HTML文档样式的语言
CSS描述如何在屏幕、纸张或其他媒体上显示 HTML 元素将内容展示和样式控制分离CSS 节省了大量工作，外部样式表通常保存在外部文件 .css中，可以同时控制多张网页的布局CSS类似于化妆，通过不同的CSS将同样的HTML内容打造为不同的呈现结果
二、 注释
CSS注释以 /* 开始, 以 */ 结束
三、 语法
CSS 规则集由选择器和声明块组成
选择器指向需要设置样式的 HTML 元素
(筛选具有相似特征的元素)
声明块包含一条或多条声明(每条声明包含一个属性名称和一个值)
属性和属性值之间用冒号分割，不同的属性之间用分号隔开
多条 CSS 声明用分号分隔，声明块用花括号括起来
选择器 {属性1:值1;属性2:值2;...}
代码示例：
选择器内容在下文
此以元素选择器为例
p {/*CSS 中的选择器（指向要设置样式的 HTML 元素：<p>）*//*声明： 属性名称:值 */color: red;/*color 是属性，red 是属性值*/text-align: center;/*text-align 是属性，center 是属性值*/}
四、 选择器
选择器，即用于“查找”（或选取）要设置样式的 HTML 元素
分类
1、简单选择器（根据名称、id、类来选取元素）
2、组合器选择器（根据特定关系来选取元素）
3、伪类选择器（根据特定状态选取元素）
4、伪元素选择器（选取元素的一部分并设置其样式）
5、属性选择器（根据属性或属性值来选取元素）
基本选择器有三种：id选择器、class选择器、元素选择器/标签选择器
下文选择器代码均为内部样式
优先级
ID选择器 > 类选择器 > 元素选择器
当多个选择器作用在同一个标签时
属性不同：看优先级
属性不同：叠加生效
1. id选择器
id 选择器使用HTML 元素的 id 属性来选择特定元素、指定特定的样式
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素
要选择具有特定 id 的元素，请写一个井号#，后跟该元素的 id
tips：
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用
语法：
#id属性名称{/*id 选择器以 "#" 来定义*/属性名：属性值}
代码示例：
<!DOCTYPE html><html><head><style>#demo1 {/*id 选择器以 "#" 来定义*/color: red;}</style></head><body><p id="demo1">Hello World!</p></body></html>
页面显示：
2. class选择器
类选择器选择有特定 class 属性的 HTML 元素
tips：
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用
语法：
.class名称{/*类选择器以一个点"."号来定义*/属性名：属性值}
代码示例：
<head><meta charset="UTF-8"><style>#demo1 {/*id选择器，优先级最高*/color: deeppink;}p {/*元素选择器，优先级最低*/color: black;} .demo3 {/*类选择器，优先级中等*/text-align: center;color: darkmagenta;}</style></head><body><h3 class="demo3">使用了类选择器的标题</h3> <p class="demo3" >同时使用元素选择器的段落(class>元素)</p><p class="demo3" id="demo1">同时使用id选择器和元素选择器的段落</p></body>
页面显示：
3. 元素选择器
又称标签选择器，自动使用在所有同名的元素上，元素名称必须是html提供的元素
语法：
元素名称{属性名：属性值}
代码示例：
<head><meta charset="UTF-8"><style>#demo1 {color: deeppink;}p {color: black;} </style></head><body><p>段落1</p><p id="demo1">同时使用id选择器的段落2（就近原则，因此使用元素选择器）</p><p>段落3</p></body>
页面显示：
五、 样式表style
CSS的使用有三种样式，分为行内样式、内部样式、外部样式
作用域的范围
外部样式表>内部样式表>行内样式表
优先级
行内样式 > 内部样式 >外部样式
同样的样式作用于同一个标签：看优先级（就近原则）
不同样式作用于同一个标签：叠加生效
1. 行内样式
又称内联样式
通过使用标签内部的style属性直接在标签中编写样式
一般在测试的时候使用
<html标签 style="样式1：值1;样式2：值2;....样式N：值N;">hello</html标签>
<div style="color: red;">hello my css</div>
tips：
只能对当前的标签生效，没有做到内容和样式相分离，耦合度太高
2. 内部样式
通过style标签用CSS代码定义在head标签内
<!DOCTYPE html><html><head> <!--定义在head标签内--><meta charset="UTF-8"><title>内部样式</title><style>/*使用style标签，内部通过css代码实现*/div{color: red;}</style></head><body><div>hello my css</div></body></html>
3. 外部样式
步骤1、创建css资源文件
2、在head标签内，link标签引入外部样式文件
创建demo.css文件，放在与html页面同级的css文件夹中：
div {color: red;}
引入.css文件：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>外部样式</title><!--html页面中的引入--><link rel="stylesheet" href="css/demo.css" /></head><body><div>hello</div></body></html>
六、 CSS常用样式
1. 颜色color
取值方式
①单词
red blue…
②rgb三色取值
rgb（红，绿，蓝），三色的取值范围是0-255
例：rgb(255,0,0)表示红
③rgba取值
rgba（红，绿，蓝，透明度）透明度取值:0~1,0为全透明
例：rgba(255,0,0,1)表示红
④#值1值2值3
rgb的另一种十六进制写法，值的范式是00-FF
例：#FF0000表示红
2. 宽高width height
tips:
只有块状元素可以设置宽高，行级元素设置不生效
取值方式
1：数值 绝对数字 单位是像素PX
2：百分比：占据父元素的比例
3. 背景background
全部属性
3.1 背景颜色color
background-color 属性指定元素的背景色
不透明度
opacity（0~1）
代码示例：
<head><meta charset="UTF-8"><title>背景颜色</title><style>body {background-color: lightblue;}div {background-color: pink;}p {background-color: yellow;}</style></head><body><div>这是 div 元素内的文本<p>div中插入一段文字，这段为自己的颜色</p>仍然在 div 元素中</div></body>
页面显示：
3.2 背景图像image
background-image 属性指定用作元素背景的图像
默认情况下，图像会重复、覆盖整个元素
代码示例：
<head><meta charset="UTF-8"><title>背景图像</title><style>body {background-image: url(../../img/小奶猫1.JPG);}</style></head><body><p style="color: white; ">喵~</p></body>
页面显示：
3.3 图像重复repeat
默认情况下，background-image 属性在水平和垂直方向上都重复图像
repeat-x:横轴平铺
repeat-y:纵轴平铺
repeat:同时平铺
no-repeat:不平铺
3.4 图像附着attachment
background-attachment 属性指定背景图像是否应该随页面滚动
背景固定
body {background-image: url("cat.png");background-attachment: fixed;}
背景滚动
body {background-image: url("cat.png");background-attachment: scroll;}
3.5 图像位置position
background-position 属性用于指定背景图像的位置
后面可加位置（left、fight…）
也可加坐标（第一个参数表示x轴上偏移距离，第二个参数表示y轴上偏移距离）
代码示例：
<style>body {background-image: url(../../img/小奶猫1.JPG);background-repeat: no-repeat;background-position: left top;}</style>
页面显示：
简写形式
在使用简写属性时，属性值的顺序为：
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
完整写法：
body {background-color: #ffffff;background-image: url("cat.png");background-repeat: no-repeat;background-position: right top;}
简写写法：
body {background: #ffffff url("tree.png") no-repeat right top;}
4. 边框border
border 属性允许指定元素边框的样式、宽度和颜色
均可以设置1~4个值（用于上边框、右边框、下边框和左边框）
全部属性
4.1 样式style
border-style 属性指定要显示的边框类型
tips：
除非设置了 border-style 属性，否则其他 CSS 边框属性不会有作用
代码示例1：
/* 四个值 */p {border-style: dotted solid double dashed; }/* 三个值 */p {border-style: dotted solid double; }/* 两个值 */p {border-style: dotted solid; }/* 一个值 */p {border-style: dotted; }
代码示例2：
<head><style>p.dotted {border-style: dotted;}p.dashed {border-style: dashed;}p.solid {border-style: solid;}p.double {border-style: double;}p.groove {border-style: groove;}p.ridge {border-style: ridge;}p.inset {border-style: inset;}p.outset {border-style: outset;}p.none {border-style: none;}p.hidden {border-style: hidden;}p.mix {border-style: dotted dashed solid double;}</style></head><body><p class="dotted">点状边框。</p><p class="dashed">虚线边框。</p><p class="solid">实线边框。</p><p class="double">双线边框。</p><p class="groove">凹槽边框。</p><p class="ridge">垄状边框。</p><p class="inset">3D inset 边框。</p><p class="outset">3D outset 边框。</p><p class="none">无边框。</p><p class="hidden">隐藏边框。</p><p class="mix">混合边框。</p></body>
页面显示2：
4.2 宽度width
指定大小： px、pt、cm、em
4.3 颜色color
border-color 属性用于设置四个边框的颜色
如果未设置 border-color，则将继承元素的颜色
代码示例：
p.one {border-style: solid;border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */}
简写形式
为了缩减代码，也可以在一个属性中指定所有单独的边框属性
border属性是以下各个边框属性的简写属性：
border-width
border-style（必需）
border-color
代码示例：
p.b1 {border: 5px solid red;}/*左边框*/p.b2 {border-left: 6px solid red;background-color: lightgrey;}/*下边框*/p.b3 {border-bottom: 6px solid red;background-color: lightgrey;}/*圆角边框*/p.normal {border: 2px solid red;}p.round1 {border: 2px solid red;border-radius: 5px;}p.round2 {border: 2px solid red;border-radius: 8px;}p.round3 {border: 2px solid red;border-radius: 12px;}
5. 文本样式
代码示例：
<style>div {background-color: lightgrey;/*文本背景色*/color: blue;/*文本色*//*设置文本的水平对齐方式;文本可以左对齐、右对齐、居中对齐* * 当 text-align 属性为 "justify" ，将拉伸每一行使每一行具有相等的宽度* （就像在杂志和报纸中）*/text-align: center;/*direction 和 unicode-bidi 属性可用于更改元素的文本方向*/direction: rtl;unicode-bidi: bidi-override;/*vertical-align设置元素的垂直对齐方式*/vertical-align: top;/*text-decoration 属性用于设置或删除文本装饰* text-decoration: none; 通常用于从链接上删除下划线：* 其他 text-decoration 值用于装饰文本*/text-decoration: underline;/*text-transform用于指定文本中的大写和小写字母* 将所有内容转换为大写或小写字母，或将每个单词的首字母大写*/text-transform: uppercase;/*text-indent 属性用于指定文本第一行的缩进*/text-indent: 50px;/*letter-spacing 属性用于指定文本中字符之间的间距* 可以增加或减少字符之间的间距*/letter-spacing: 3px;/*line-height 属性用于指定行之间的间距*/line-height: 0.8;/*word-spacing用于指定文本中单词之间的间距*/word-spacing: 10px;/*white-space指定元素内部空白的处理方式*下例禁用元素内的文本换行*/white-space: nowrap;/*text-shadow 属性为文本添加阴影。* 最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）* 向阴影添加颜色（红色）：text-shadow: 2px 2px red;* 向阴影添加模糊效果（5px）：text-shadow: 2px 2px 5px red;*/text-shadow: 2px 2px;}</style>
6. 列表样式
在 HTML 中，列表主要有两种类型：无序列表（<ul>），列表项用的是项目符号标记
有序列表（<ol>）， 列表项用的是数字或字母标记CSS 列表属性作用：
①为有序列表设置不同的列表项标记
②为无序列表设置不同的列表项标记
③将图像设置为列表项标记
④为列表和列表项添加背景色
常用属性代码示例：
<style>li{/*list-style-type 指定列表项标记的类型* none 无样式* （none也可以用于删除标记/项目符号）* （列表拥有默认的外边距和内边距，删除内容在 <ul> 或 <ol> 中添加 margin:0 和 padding:0）* * circle 空心圆* square 正方形* upper-roman* lower-alpha* decimal 数字*/list-style-type: circle;/*list-style-image 将图像指定为列表项标记*/list-style-image: url(../../img/小奶猫1.JPG);/*list-style-position 指定列表项标记（项目符号）的位置* 默认：outside，点将在列表项之外，列表项每行的开头将垂直对齐* inside，点将在列表项内，是列表项的一部分，因此也是文本的一部分，并在开头推开文本*/list-style-position: outside;}</style>
简写形式
使用简写属性时，属性值的顺序为：list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
list-style-position（指定列表项标记应显示在内容流的内部还是外部）
list-style-image（将图像指定为列表项标记）
代码示例：
ul {list-style: square inside url("circle.gif");}
设置列表的颜色样式
添加到 <ol> 或 <ul> 标记的任何样式都会影响整个列表
而添加到 <li> 标记的属性将影响各个列表项
d代码示例：
<!DOCTYPE html><html><head><meta charset="UTF-8"><style>ol {background: #ff9999;padding: 20px;}ul {background: #3399ff;padding: 20px;}ol li {background: #ffe5e5;padding: 5px;margin-left: 35px;}ul li {background: #cce5ff;margin: 5px;}</style></head><body><h1>设置列表的颜色样式：</h1><ol><li>Coffee</li><li>Tea</li><li>Coca Cola</li></ol><ul><li>Coffee</li><li>Tea</li><li>Coca Cola</li></ul></body></html>
页面显示：
七、 盒子模型
概念
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用
CSS盒模型本质上是一个盒子，封装周围的HTML元素：边距、边框，填充、、实际内容
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素
盒子模型说明图：
Margin(外边距)- 清除边框外的区域，外边距是透明的Border(边框)- 围绕在内边距和内容外的边框Padding(内边距)- 清除内容周围的区域，内边距是透明的Content(内容)- 盒子的内容，显示文本和图像
盒子的宽度和高度
元素实际在页面占有的总宽度计算公式：
总元素宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
如果想要设置的宽度直接就是元素的实际宽度，通过box-sizing属性
元素的宽度和高度
height 和 width 属性可设置如下值：auto ： 默认。浏览器计算高度和宽度
length ： 以 px、cm 等定义高度/宽度
% ：以包含块的百分比定义高度/宽度
initial ： 将高度/宽度设置为默认值
inherit ：从其父值继承高度/宽度
外边距margin
margin 定义外边距
可以为元素的每一侧指定外边距的属性：
margin-top
margin-right
margin-bottom
margin-left
所有外边距属性都可以设置以下值：
auto ：浏览器来计算外边距，使元素在其容器中水平居中
length ：以 px、pt、cm 等单位指定外边距
% ：指定以包含元素宽度的百分比计的外边距
inherit：指定应从父元素继承外边距
tips：
允许负值
代码示例：
<style>div {border: 1px solid black;margin-top: 100px;margin-bottom: 100px;margin-right: 150px;margin-left: 80px;background-color: lightblue;}</style>
简写属性
上右下左（顺时针）margin-top、margin-right、margin-bottom、margin-left分别一次对应四个参数
代码示例：
<style>div {border: 1px solid black;margin: 25px 50px 75px 100px;/*上右下左*/background-color: lightblue;}p.p1 {margin: 25px 50px 75px;/*上，左右，下*/}p.p2 {margin: 25px 50px;/*上下，左右*/}p.p3 {margin: 25px;/*上下左右*/}</style>
外边距合并
外边距合并，即当两个垂直外边距相遇时，它们将形成一个外边距
合并后的外边距的高度等于max(高度1，高度2)
内边距Padding
用于在任何定义的边界内的元素内容周围生成空间
元素的每一侧内边距的属性：
padding-top
padding-right
padding-bottom
padding-left所有内边距属性都可以设置以下值：
length ： 以 px、pt、cm 等单位指定内边距
% ： 指定以包含元素宽度的百分比计的内边距
inherit ：指定应从父元素继承内边距tips：
不允许负值
代码示例：
div {padding-top: 50px;padding-right: 30px;padding-bottom: 50px;padding-left: 80px;}
简写属性
上右下左（顺时针）padding-top、padding-right、padding-bottom、padding-left分别一次对应四个参数
代码示例：
<style>div {border: 1px solid black;padding: 25px 50px 75px 100px;/*上右下左*/background-color: lightblue;}p.p1 {padding: 25px 50px 75px;/*上，左右，下*/}p.p2 {padding: 25px 50px;/*上下，左右*/}p.p3 {padding: 25px;/*上下左右*/}</style>
轮廓(区别于边框)
轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素
CSS 拥有如下轮廓属性：
outline-style
outline-color
outline-width
outline-offset
outline
tips：
轮廓与边框不同
轮廓是在元素边框之外绘制的，并且可能与其他内容重叠；轮廓不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响
轮廓样式
outline-style 属性指定轮廓的样式，并可设置如下值：
代码示例：
p.dotted {outline-style: dotted;}p.dashed {outline-style: dashed;}p.solid {outline-style: solid;}p.double {outline-style: double;}p.groove {outline-style: groove;}p.ridge {outline-style: ridge;}p.inset {outline-style: inset;}p.outset {outline-style: outset;}
轮廓宽度
outline-width 属性指定轮廓的宽度
宽度值
thin（通常为 1px）
medium（通常为 3px）
thick （通常为 5px）
特定尺寸（以 px、pt、cm、em 计）
轮廓颜色
outline-color 属性用于设置轮廓的颜色
使用 outline-color: invert可以执行颜色反转
简写属性
简写属性：outline-width
outline-style（必需）
outline-color
值的顺序无关紧要
轮廓偏移
outline-offset 在元素的轮廓与边框之间添加空间
元素及其轮廓之间的空间是透明的
代码示例：
<head><style>p {margin: 30px;border: 1px solid black;outline: 1px solid red;outline-offset: 15px;}</style></head><body><p>此段落边框边缘外 15 像素处有一条轮廓线</p></body>
页面显示：
