目录
一、基础概念
层叠样式表（英文名称：Cascading Style Sheets）
*层叠：多个样式可以作用到同一个html元素上，同时生效；
是一种用来表现html或xml(标准通用标记语言的一个子集)等文件样式的计算机语言。
- 样式定义如何显示html元素
- 样式通常储存在样式表中
- 把样式添加到html4.0中是为了解决内容与表现分离的问题
- 外部样式表可以极大的提高工作效率
- 外部样式表通常存储在CSS文件中
- 多个样式定义可以层叠为一个
CSS很像化妆，通过不同的CSS将 同样的html内容打造为不同的呈现结果。
CSS优势
- 功能强大
- 将内容展示与样式控制分离
- 降低耦合度，解耦
- 让分工协作更容易
- 提高开发效率
二、CSS使用
根据定义CSS位置不同，分为行内样式、内部样式和外部样式。
1、行内样式
内联样式：直接在标签中编写样式，通过使用标签标签内部属性style。
<html标签 style="样式1:值1;样式2:值2;"></html标签>
<div style="color:red;">hello my class</div>
弊端：只能对当前标签生效，没有做到内容与样式分离，耦合度太高。
2、内部样式
定义在head标签内，通过style标签，该标签内容就是Css代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部样式</title>
<style>
div{
color:red;
}
</style>
</head>
<body>
<div>hello my class</div>
</body>
</html>
3、外部样式
- 提前定义的CSS资源文件
- 在head标签内，定义link标签引入外部样式文件。
lina.css文件内容：
div{ color:red; }html页面中引入：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<link rel="stylesheet" href="css/lina.css" />
</head>
<body>
<div>hello my class</div>
</body>
</html>
作用域范围：
外部样式表>内部样式表>行内样式表
优先级：
外部样式表<内部样式表<行内出样式表
相同的样式作用在同一个标签上：就近原则；不同的样式作用在同一个标签上：叠加。
加载外部样式表或者内部样式表时候，需要注意加载顺序：加载html文件是从上向下加载的，也就是后面加载的样式会覆盖前面的样式。
4、CSS语法
选择器{
属性1：值1;
属性2：值2;
......
}
选择器：筛选具有相似特征的元素
属性与属性值之间用冒号分开；不同属性之间使用分号隔开。
例如：
h1{
color:red;
font-size:12px;
}
5、CSS注释
css注释以/*开始，*/结束。
/*这是CSS的注释*/
h1{
color:red; /*这是颜色的注释*/
font-size:12px;
}
三、基本选择器
1、id选择器
选择具有相同id属性值的元素，建议html页面中的id值唯一。
id选择器可以为标有特定id的html元素指定特定的样式。
html元素以id属性来设置id选择器，CSS中的id选择器以“#”来定义。
PS：id属性值不要以数字开头，数字开头的id在Firefox/Mozilia中不起作用。
虽然多个元素可以使用同一个id选择器设置样式，但是不推荐；如果需要同样的样式对多个标签起作用可以使用类选择器。
<head>
<meta charset="UTF-8">
<title></title>
<style>
#myDiv{
color: red;
font-style: italic;
}
</style>
</head>
<body>
<div id="myDiv">你好世界</div>
</body>
2、class选择器
选择具有相同class属性值元素。
class选择器用于描述一组元素样式，class选择器有别于id选择器，可以在多个元素中使用。
class选择器在html中以class表示，在css中以一个点"."表示。
PS：class属性值不要以数字开头，数字开头的id在Firefox/Mozilia中不起作用。
<head>
<meta charset="UTF-8">
<title></title>
<style>
.myClass{
color: red;
}
</style>
</head>
<body>
<div class="myClass">hello world</div>
</body>
3、元素选择器/标签选择器
选择具有相同标签名称的元素。
定义选择器语法：标签名称{}
ps:标签名称必须是html提供好的标签。
使用标签选择器：自动使用在所有同名的标签上。
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
color: blue;
}
</style>
</head>
<body>
<p>第一段</p>
<p>第二段</p>
</body>
4、选择器优先级
ID选择器>class选择器>标签选择器
当多个选择器作用在同一个标签上时，如果属性冲突看优先级，如果不冲突样式叠加生效。
5、样式表的优先级
行内样式表>内部样式表>外部样式表
三个样式表中都有同样的内容作用在同一个标签上时，如果属性冲突看优先级，如果不冲突样式叠加。
四、CSS常用样式
1、color：字体颜色
三种颜色值：
- 颜色的单词 red blue......
- rgb(红，绿，蓝)三色取值范围：0-255
rgba(红，绿，蓝，透明度)透明度取值：0-1，0全透明，1不透明，0.5半透明。
- #值1值2值3：值的范式：00-FF 对应关系： #FF0000->rgb(255,0,0)
2、width height：宽高
PS：只有块状元素可以设置宽高，行级元素设置宽高不生效。
取值方式两种：
- 数值 绝对值 单位px
- 百分比 占据父元素比例
3、背景样式
<head>
<meta charset="UTF-8">
<title></title>
<style>
.bg{
/*背景色*/
background-color: cornflowerblue;
/*背景图片：背景图片小于标签的宽高时，默认平铺*/
background-image: url(../img/1.jpg);
/* 背景平铺方式：不设置时候默认xy轴同时平铺
repeat-x:横轴平铺
repeat-y:纵轴平铺
repeat:xy同时平铺
no-repeat:不平铺
* */
background-repeat: no-repeat;
/*背景位置：第一个单数：x轴上偏移距离，整数向右移动，负数向左移动
第二个单数：y轴上的偏移距离，整数向下移动，负数向上移动*/
background-position: 10% 20px;
}
.bg2{
/*将以上所有跟背景相关样式缩写
缩写顺序：背景色、背景图片、背景图片平铺方式、背景的X轴偏移、背景的y轴偏移
多属性之间使用空格隔开
* */
background: blanchedalmond url(../img/1.jpg) no-repeat 20px 30px;
}
</style>
</head>
<body class="bg2">
</body>
4、文本样式
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
/*块状元素都有宽高属性；行级元素没有宽高*/
width: 90%;
height: 400px;
/*背景样式*/
background: tan url(../img/1.jpg) no-repeat 10px 10px;
/*字体*/
font-size: 18px;
font-family: "微软雅黑";
font-weight: bold;
/*字体缩写：粗细 大小 样式*/
font: bold 24px "微软雅黑";
/*文本样式*/
/*划线位置：line-through 中划线 underline 下划线 none 没有划线*/
text-decoration: underline;
/*文本的水平对齐方式：left right center*/
text-align: center;
/*文本的垂直对齐方式：没有单个属性可以设置垂直对齐;
一般单行的时候使用高度等于行高设置垂直居中；
多行使用盒子模型*/
line-height: 400px;
/*文字之间的间隙*/
letter-spacing: 10px;
}
</style>
</head>
<body>
<div>
我有一个梦想，i have a dream
</div>
</body>
5、列表样式
<style>
li{
background-color: lemonchiffon;
/*列表样式：常用取值：none-无样式 square-正方形 circle-空心圆 decimal-数字*/
list-style-type: circle;
/*列表样式为自定义图片*/
list-style-image: url(../img/2.jpg);
/*列表样式的放置位置*/
list-style-position: inside;
/*列表样式缩写*/
list-style: square url(../img/2.jpg) inside;
/*常用的列表样式*/
list-style: none;
}
</style>
6、边框样式
<style>
.border{
/*边框宽度*/
border-width: 2px;
/*边框颜色*/
border-color: red;
/*边框样式：solid 实线 dotted 点线 dashed 虚线*/
border-style: dashed;
/*边框样式缩写：样式 颜色 宽度*/
border:solid green 5px;
/*边框可以为4个方向分别设置*/
border-top: dashed black 4px;
border-right: dashed #FF00FF 4px;
border-bottom: dotted darkblue 4px;
border-left: solid fuchsia 5px;
/*没有边框*/
border: none;
/*常用的细边框样式*/
border: solid 1px #ccc;
}
</style>
6、HTML&&CSS调试器
谷歌浏览器为例：快捷键F12或者开发者工具调出调试器
五、盒子模型
所有的html元素可以看做是盒子，在css中，"box model"是用来设计和布局时使用。
CSS盒子模型本质是一个盒子，封装周围的html元素，它包括：边框、边距、填充、实际内容。
盒子模型允许我们在其他元素和周围元素边框之间的空间放置元素。
- margin：外边距，清除边框外区域，外边距是透明的。
- border：边框，围绕在内边距和内容外的边框。
- padding：内边距，清除内容周围区域内边距是透明的。
- content：内容，显示文字和图像。
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* border:边框，分4个方向，同理margin、padding也分为四个方向
* margin:元素与元素之间对的距离
* padding:内容与边框之间的距离
* 设置的时候顺序：上 右 下 左
*/
.div{
border: solid red 10px;
/*四个方向上的元素与元素之间的距离都是50px*/
margin: 50px;
/*两个值的时候：第一个参数表示上下距离都是50px,第二个参数表示左右距离都是100px*/
margin: 50px 100px;
padding: 50px;
/*
一个元素真正的宽度=width+左右padding值+左右的border值
一个元素的真正高度=height+上下的padding值+上下的border值
* */
}
</style>
</head>
<body>
<div class="div">111111111112222222222223333333333333333</div>
</body>
1、盒子的宽高
元素的实际宽度和高度：
计算一个元素在实际在页面占据的总宽度=元素宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素实际在页面占据的总高度=元素高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
2、设置宽度=元素实际宽度，box-sizing属性。
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* box-sizing:确认元素的大小
content-box: 实际宽度=width+左右的psdding值+上下的border值
实际高度=height+上下的padding值+上下的border值
border-box:实际宽度=width;实际高度=height
padding和border不会影响元素的实际宽高
* */
.box{
width: 100px;
height: 200px;
border: 5px solid;
padding: 5px;
box-sizing: content-box;
}
</style>
</head>
<body>
<div class="box">你好中国</div>
</body>
六、更多常用样式
1、float
CSS的float会使得元素向左或者向右移动，其周围的元素也会重新排列。
float往往应用于图像，但它在布局时候一样有用。
1.1 元素怎样浮动
元素的左右方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或者向右移动，直到它的外边缘碰到包含框或者另一个浮动框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
1.2 彼此相邻的浮动元素
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相连。
1.3 清除浮动
元素浮动之后，周围元素将重新排列，为了避免这种情况，使用clear属性清除浮动。
clear属性指定元素两侧不能出现浮动。
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 400px;
height: 200px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<!--
没有浮动属性的元素都属于常规文档流，从上往下从左往右依次显示
浮动的元素都脱离了常规文档流；
为了好理解：大家可以认为浮动元素属于一层，非浮动元素属于一层
如果想要费浮动元素不受浮动元素影响，需要使用clear属性。
-->
<div style="background: rgba(255,0,0,0.5);float: left;">
div1-左浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动
</div>
<div style="background: lawngreen;width: 600px;height: 350px;">
div2-未浮动，常规文档流，<br/>
PS:此时div1在div2的上方显示，因为div1和div2是不同文档流中的元素，显示互不影响。
如果不想让div2被浮动元素影响，需要添加clear属性。
添加clear：left;之后div2就会忽略div1浮动的影响，在div1后面显示，不会重叠
</div>
<div style="background: lightblue;float: right;width: 1800px;">
div3-右浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动
</div>
<div style="background: lightcoral;width: 600px;height: 350px;">
div4-未浮动，常规文档流，<br/>
PS:此时div3在div4的上方显示，因为div3和div4是不同文档流中的元素，显示互不影响
如果不想让div4被浮动影响，需要添加clear属性。
添加clear:right;之后div4就会忽略div3浮动影响，在div3后面显示，不会重叠了。
clear属性有三个取值：left、right、both;分别是去除左浮动、右浮动和所有浮动影响。
</div>
<div style="background: lavender;">
div5-未浮动，常规文档流。
</div>
</body>
2、Overflow
控制内容溢出元素框时显示方式。
overflow属性有如下值：
| 值 | 描述 |
| visible | 默认值。值不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其他内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余内容。 |
| inherit | 规定应该从父元素继承overflow属性值 |
注意：overflow属性只作用于规定高度的块元素上。
在Mac系统中，滚动条默认是隐藏的，使用的时候才显示。
3、Display和Visibility
3.1 两者之间的区别
display设置一个元素应该如何显示，visibility设置一个元素可见还是隐藏。
隐藏一个元素可以通过把display设置为“none”或者visibility设置为“hidden”。但是这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素任然占用与未影藏之前一样的空间。该元素虽然被隐藏了但任然影响布局。
display：none也会隐藏某个元素，且隐藏的元素不会占用任何空间。该元素不仅被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
3.2 display样式：
display:block；显示为块元素
display:inline；显示为内联元素
display:inline-block 显示为内联块元素，表现为同行显示并且可以修改宽高内外边距等属性。
七、复合选择器
由两个或多个基础选择器，通过不同方式组合而成。
可以更准确更细致的选择目标元素标签。
1、全局选择器
*{} 一般去掉标签的一些默认效果时候使用，或者整站通用效果时使用。但是不推荐使用。
2、并集选择器
并集选择器是各选择器通过连接形成的，通常用于集体声明。
语法：选择器1,选择器2,...,选择器n{}
任何形式选择器都可以作为并集选择器的一部分(标签选择器、class选择器、id选择器)。
<head>
<meta charset="UTF-8">
<title></title>
<style>
div,p,ul,li,ol,dl,dd,dt{
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div>111111111</div>
<p>22222222</p>
<ul><li>333333333</li></ul>
</body>
3、交集选择器
条件：交集选择器又两个选择器构成，找到的标签必须满足，既有标签一的特点，也有标签二的特点。
语法：h3.class{color:red}
其中第一个选择器为标签选择器，第二个为类选择器。两个选择器之间不能有空格。
交集选择器是并且的意思，即...又...的意思。
4、后代选择器
概念：后代选择器又称为包含选择器。
作用：用来选择元素或者元素组的子孙后代。
将外层元素写在外面，内层元素写在后面，中间用空格分开。爷爷，父亲，儿子，孙子...
格式：父亲 儿子{属性:属性值;属性:属性值} 例如：.class h3{color:red;font-size:16px}
当标签发生嵌套时，内层标签就成为外层标签的后代。
5、子元素选择器
作用：子元素选择器只能选择作为某个元素子元素(亲儿子)的元素。
写法：父元素写在前面，子元素写在后面，中间用>连接。
例如：.class>h3{color:red;font-size:16px}
6、代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复合选择器</title>
<style>
/*全局选择器：一般去表标签的一些默认效果时候使用，或者整站通用效果时候使用。但是不推荐这么设置。
*/
*{
color: #333;
}
/*并集选择器：通常用户集体声明
* 替换全局选择器
*/
div,p,dl,dt,dd{
margin: 0px;
padding: 0px;
color: #333;
}
/*交集选择器*/
li.myli{
color: green;
}
/*后代选择器*/
ul li{
font-size: 28px;
}
.myUL li{
font-family: "微软雅黑";
}
.myUL li a{
text-decoration: line-through;
}
/*子元素选择器*/
.demo>h3{
color: blue;
}
</style>
</head>
<body>
<ul>
<li>1111111111111111111</li>
<li class="myli">2222222222222222222</li>
<li>3333333333333333333</li>
<li>4444444444444444444<a href="#">click me</a></li>
<li class="myUL">
<ul>
<li>li1111111111111111</li>
<li class="myli">li2222222222222222</li>
<li>li3333333333333333</li>
<li>li4444444444444444<a href="#">click me</a></li>
</ul>
</li>
</ul>
<ol>
<li>111111111111111111</li>
<li>222222222222222222</li>
<li>333333333333333333</li>
<li>444444444444444444</li>
</ol>
<div class="demo">
<h3>静夜思</h3>
<ul>
<li><h3>床前明月光</h3></li>
</ul>
</div>
</body>
</html>
7、伪类选择器
和类选择器相比，类选择器使用.class{}，伪类选择器使用:link{}
作用：用于向某些选择器天长假特殊效果。比如向链接添加特殊效果。
伪类选择器很多：链接伪类、结构伪类等。
链接伪类：
- a:link /*未访问的链接*/
- a:visited /*已访问的链接*/
- a:hover /*鼠标移动到链接上*/
- a:active /*选定的链接*/
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*伪类选择器*/
a:link{
color: red;/*默认样式*/
}
a:visited{
color: blue;/*访问过的样式*/
}
a:hover{
color: green;/*鼠标悬浮的样式*/
font-size: 28px;
}
a:active{
color: gold;/*按下鼠标不放手样式*/
font-family: "微软雅黑";
}
</style>
</head>
<body>
<a href="1.html" target="_blank">1.html</a>
<a href="2.html" target="_blank">3.html</a>
<a href="3.html" target="_blank">3.html</a>
</body>
注意：
- 链接伪类写的时候顺序不要颠倒，按照lvha顺序，否则可能引起错误。
- 因为是链接伪类，所以都是使用交集选择器a:link a:hover
- 因为a链接浏览器有默认样式，所以实际工作中需要给a链接单独指定样式。
- 实际开发中很少四个属性都用到，常用写法如下：
<style>
/* a是标签选择器 所有的连接*/
a{
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover{
/* :hover是链接伪类选择器，鼠标经过*/
color: red;
}
</style>
8、复合选择器比对
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号和用法 |
| 后代选择器 | 用来选择后代元素 | 是选择所有的子孙后代 | 较多 | 空格 p .p1 |
| 子代选择器 | 选择最近一级元素 | 只选择亲儿子 | 较少 | > p>.p1 |
| 交集选择器 | 选择两个标签交集部分 | 即是...又是 | 较少 | 没有符号 p.p1 |
| 并集选择器 | 选择某些样式相同选择器 | 可以用于集体声明 | 较多 | , p,h1,div |
| 链接伪类选择器 | 给链接更改状态 | 较多 | : :hover |
标签：样式,标签,元素,color,样式表,选择器,CSS 来源： https://blog.csdn.net/lj15559275886/article/details/116353756
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。