CSS基础必备知识点
CSS（Cascading Style Sheme）， 层叠样式表或级联样式表，简称样式表。它的作用是给HTML网页设置外观或者样式。其中外观或者样式指的是：HTML网页中的文字大小、颜色、字体，网页的背景颜色、背景图片等。
(一) CSS的语法规则
- CSS代码是由选择器和一对花括号组成, 即：选择器：{语句1;语句2;…}
- 花括号里面是一条一条的声明语句组成
- 每一条语句都要使用英文状态下的分号隔开
- 每一条声明语句，是由“属性：值”组成。
- CSS中的属性值一般不加 引号“ ”
- CSS中如果属性值为数值型数据，一般情况下需要加单位，一般是px
- 在CSS中不能出现HTML标签
<html>
<head>
<title></title>
<style type="text/css">
/*在这里书写css代码*/
p{
color: #ff0000; /*给文本设置颜色*/
font-size: 30px; /*设置字体大小*/
}
</style>
</head>
<body>
<p>TensorFlow 是一个开源的、基于 Python 的机器学习框架，它由 Google 开发，并在图形分类、音频处理、推荐系统和自然语言处理等场景下有着丰富的应用，是目前最热门的机器学习框架。</p>
</body>
</html>
(二)CSS代码的书写方式
- 嵌入式：
-
什么是嵌入式？
- 将CSS代码嵌入到HTML文件中，嵌入式是通过HTML中的
<style>标签将css代码嵌入到HTML网页中。 - 语法规则：
<style type="text/css"> /*书写CSS代码*/ 选择器：{属性：值;属性：值} </style>如果我们使用的是HTML5的文档，type属性可以省略不写。
注意：style标签可以放在HTML文件的任何位置，但是一般放在head标签里面。<html> <head> <title></title> <style type="text/css"> /*在这里书写css代码*/ div{ width: 100px; /*设置div盒子的宽度*/ height: 100px; /*设置div盒子的高度*/ background-color: #df6e94c9; /*将div盒子的背景颜色设置为粉色*/ } </style> </head> <body> <!--要使用CSS代码给div设置宽度100像素高度100像素以及背景颜色为红色，把div理解为一个存放东西的盒子。--> <div></div> </body> - 将CSS代码嵌入到HTML文件中，嵌入式是通过HTML中的
-
- 外链式：
- 什么是外链式？
- 外链式是指单独写一个.css为扩展名的文件，然后在head标签中使用
<link />标签，将这个css文件链接到HTML文件中。这个css文件在命名时要使用英文，不能使用中文命名。 - 注意：css文件不能单独的运行，必须依赖于HTML文件
- 外链式是指单独写一个.css为扩展名的文件，然后在head标签中使用
- 基本语法格式：
如下为一个css文件的书写方式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外链式</title> <!--将单独的css文件链接到当前的HTML文件中--> <link rel="stylesheet" href="CSS文件的地址"> <!--rel是关系的意思，指的是我们引用的文件与该文件是什么关系，样式表的关系--> </head> <body> </body> </html>
呈现的效果就是，运行HTML文件，背景会变为浅蓝色/* 在这个index.css文件中书写css代码 在这个文件里面，只能书写css格式的代码，不写style标签，直接按如下格式书写： 选择器{属性：值；} */ body{ background-color:rgb(66, 235, 221); }
使用这种方法，一定要确保css文件已经被正确的成功引入！检测方法为：在当前HTML呈现的网页页面，右键单击检查，点击Network选项卡，然后刷新当前网页，查看network选项卡中的status状态，如果是成功的就表示文件被加载，如果是失败状态就表示文件没有被加载，失败的原因可能是地址写错也可能是文件名写错，注意检查。 - link标签可以有多个，即一个HTML页面可以同时引入多个单独的css文件
- 什么是外链式？
- 行内式：
- 什么是行内式？
- 将css代码书写在HTML标签的style属性中。style属性是一个通用属性，每一个标签里面都拥有这个属性！语法格式为：
例如：<标签名 style="属性1：值1；属性2：值2；"></标签名><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>行内式</title> </head> <body> <!--使用行内式的方式，将div设置为宽度100px 高度 100px 背景颜色是红色--> <div style="width: 100px;height: 100px;background-color: #f00;"></div> </body> </html>
- 将css代码书写在HTML标签的style属性中。style属性是一个通用属性，每一个标签里面都拥有这个属性！语法格式为：
- 小结：
- 使用嵌入式的方式来书写css代码，只能作用于当前的HTML文件
- 使用外链式的方式来书写css代码，可以作用于多个HTML文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>行内式</title> <!--在刚才使用行内式编写的HTML文件中引入index.css这个单独的css文件--> <link rel="stylesheet" href="index.css"> </head> <body> <!--使用行内式的方式，将div设置为宽度100px 高度 100px 背景颜色是红色--> <div style="width: 100px;height: 100px;background-color: #f00;"></div> </body> </html>
- 什么是行内式？
(三)注释
- 注释的格式：/* 注释的内容 */
- sublime中注释的快捷键：Ctrl + shift + /
- 注意：千万不要在css中使用HTML注释，两种注释方式要区分开
(四)选择器
什么是选择器？
- 选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式
- 选择器分为四大类：基本选择器、复合选择器、伪类选择器、属性选择器。
- 基本选择器
| 选择器 | 格式 | 含义 | 举例 |
|---|---|---|---|
| 通用选择器 | *{属性:值;} | 通用选择器将匹配HTML所有标签。不建议使用，IE6不支持，给大型网站增加负担 | *{margin:0px;} |
| 标签选择器 | 标签名{属性:值;} | 标签选择器，匹配对应的HTML标签 | p{font-size:14px;} |
| 类选择器 | .class属性值{属性:值;} | 类选择器，给拥有指定的class属性值的元素设置样式 | .box{width:800px;} |
| Id选择器 | #Id属性值{属性:值;} | Id选择器可以为标有特定Id的HTML元素指定特定的饿样式，只能使用一次，Id选择器以“#”来定义 | #title{font-size:14px;} |
通用选择器举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>通用选择器</title>
<style>
/*使用嵌入式
使用通用选择器来设置样式
格式： *{属性:值;}
作用： 给HTML中的所有标签设置颜色
*/
*{
color: #00f; /*给文本设置颜色*/
}
</style>
</head>
<body>
<h2>请回答出中国的四大名著</h2>
<!--使用 ul>li*4 可以创建一个含有4个li 的无序列表-->
<ul>
<li>西游记</li>
<li>三国演义</li>
<li>水浒传</li>
<li>红楼梦</li>
</ul>
<p>
四大名著是中国文学史中的经典作品，是世界宝贵的文化遗产 [1]
。此四部巨著在中国文学史上的地位是难分高低的，都有着极高的文学水平和艺术成就，细致的刻画和所蕴含的深刻思想都为历代读者所称道，其中的故事、场景、人物已经深深地影响了中国人的思想观念、价值取向。可谓中国文学史上的四座伟大丰碑。
</p>
</body>
</html>
标签选择器举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>标签选择器</title>
<style>
/*使用嵌入式
使用标签选择器来设置样式
格式： 标签名{属性:值;}
作用： 给h2标签设置颜色
*/
h2{
color: #00f;
/*给文本设置颜色*/
}
</style>
</head>
<body>
<h2>请回答出中国的四大名著</h2>
<!--使用 ul>li*4 可以创建一个含有4个li 的无序列表-->
<ul>
<li>西游记</li>
<li>三国演义</li>
<li>水浒传</li>
<li>红楼梦</li>
</ul>
<h2>请对四大名著做出简要陈述</h2>
<p>
四大名著是中国文学史中的经典作品，是世界宝贵的文化遗产 [1]
。此四部巨著在中国文学史上的地位是难分高低的，都有着极高的文学水平和艺术成就，细致的刻画和所蕴含的深刻思想都为历代读者所称道，其中的故事、场景、人物已经深深地影响了中国人的思想观念、价值取向。可谓中国文学史上的四座伟大丰碑。
</p>
</body>
</html>
类选择器举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>类选择器</title>
<style>
/*使用嵌入式
使用类选择器来设置样式
格式： .class属性值{属性:值;}
只要是class属性值为h的标签，不管它是什么标签，都会设置样式
*/
.h{
color: #cf6da6;
}
/*先找到p标签，然后再去找p标签里面有没有class的属性值h1，如果有，就给其设置样式*/
p.h1{
color: #e6a52c;
}
</style>
</head>
<body>
<h2 class="h">请回答出中国的四大名著</h2>
<!--使用 ul>li*4 可以创建一个含有4个li 的无序列表-->
<ul>
<li>西游记</li>
<li>三国演义</li>
<li>水浒传</li>
<li>红楼梦</li>
</ul>
<h3 class="h1">请对四大名著做出简要陈述</h3>
<p class="h1">
四大名著是中国文学史中的经典作品，是世界宝贵的文化遗产 [1]
。此四部巨著在中国文学史上的地位是难分高低的，都有着极高的文学水平和艺术成就，细致的刻画和所蕴含的深刻思想都为历代读者所称道，其中的故事、场景、人物已经深深地影响了中国人的思想观念、价值取向。可谓中国文学史上的四座伟大丰碑。
</p>
</body>
</html>
Id选择器举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>标签选择器</title>
<style>
/*使用嵌入式
使用Id选择器来设置样式
格式： #id的属性值{属性:值;}
作用：给拥有指定的id属性值来设置样式，但是要注意在一个HTML文件中，id的属性值必须是唯一的
*/
#h{
color: #b91e1e;
}
</style>
</head>
<body>
<h2 id="h">请回答出中国的四大名著</h2>
<!--使用 ul>li*4 可以创建一个含有4个li 的无序列表-->
<ul>
<li>西游记</li>
<li>三国演义</li>
<li>水浒传</li>
<li>红楼梦</li>
</ul>
<h2>请对四大名著做出简要陈述</h2>
<p id="h">
四大名著是中国文学史中的经典作品，是世界宝贵的文化遗产 [1]
。此四部巨著在中国文学史上的地位是难分高低的，都有着极高的文学水平和艺术成就，细致的刻画和所蕴含的深刻思想都为历代读者所称道，其中的故事、场景、人物已经深深地影响了中国人的思想观念、价值取向。可谓中国文学史上的四座伟大丰碑。
</p>
</body>
</html>
- 复合元素选择器 (这三种选择器在后面详细展开)
- 伪类选择器
- 属性选择器
(五)尺寸样式属性
| 属性 | 值 | 含义 |
|---|---|---|
| height | auto：自动，浏览器会自动计算高度；length：使用px定义高度；%：基于包含它的块级对象的百分比高度 | 设置元素高度 |
| width | 同上 | 设置元素的宽度 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>尺寸样式属性</title>
<style type="text/css">
/*使用类选择器设置样式*/
.box{
width: 100px;
height: 100px;
background-color: #ff0000;
}
span{
width: 100px;
height: 100px;
background-color: #46bce0;
}
</style>
</head>
<body>
<div class="box"></div>
<span>abcde</span>
</body>
</html>
注意：span标签不可以设置宽度和高度，因为span标签是行内元素，它是不可以设置高度与宽度的，只有块级元素才可以设置高度和宽度！以上虽然设置了span的宽度与高度，但是并没有影响，span的高度与宽度是由它的内容来决定的。
(六)文本与字体属性
1. 文本属性
| 属性名 | 值 | 含义 |
|---|---|---|
| color | #ff000或red或rgb(3,5,8) | 给文本设置颜色 |
| text-align | left(居左)、right(居右)、center(居中) | 设置文本的水平对齐方式 |
| text-decoration | none(去掉文本修饰线) 、underline(下划线)、overline(上划线)、line-through(删除线) | 设置文本修饰线 |
| text-transform | capitalize、uppercase、lowercase | 大小写转换或者首字母大写 |
| line-height | 固定值或百分比 | 设置行高 |
| text-indent | px或em | 设置首行缩进，允许负值 |
| letter-spacing | px | 设置字符间距 |
| word-spacing | px | 设置单词间距 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文本属性</title>
<style type="text/css">
.zhang{
/*color:#f00;*/
color: rgb(255,0,0);
/*十进制表示颜色的方式在浏览器中没有浏览器兼容的问题*/
/*给张小凡添加下划线*/
text-decoration: underline;
}
h2{
text-align: center; /*设置水平居中*/
text-decoration: overline;/*给诛仙青云志添加上划线*/
}
.ywsc{
text-decoration: line-through; /*删除线*/
}
.cap{
text-transform: capitalize; /*设置英文单词首字母大写*/
}
.upper{
text-transform: uppercase; /*将小写全部转换为大写 */
word-spacing: 20px; /*设置单词之间的间距*/
}
.lower{
text-transform: lowercase; /*将大写全部转换为小写*/
letter-spacing: 20px; /*设置字母之前的间距*/
}
p{
text-indent: 2em; /*设置首行缩进，一个em表示一个汉字的位置*/
}
.lh{
/*行高的作用是用来设置文本的垂直方向居中对齐
设置方式：行高的值与高度值一样即可。
*/
height: 40px;
line-height: 40px;
border: 1px solid #f00; /*设置边框 1px 实线 红色*/
}
</style>
</head>
<body>
<h2>诛仙青云志</h2>
<p>
草庙村少年<span class="zhang">张小凡</span>，在经历全村尽灭的惨案后，被青云门收归门下。为报答师门恩情，张小凡勤学苦炼，却因自身驽钝，<span class="ywsc">一无所成</span>。
陷入迷茫与孤独境遇中的他，幸有鬼王之女碧瑶和好友林惊羽从旁安慰陪伴，渡过了人生最彷徨的阶段。
张小凡与林惊羽、陆雪琪、曾书书等善良热血的少年们一道，帮助良善，斩妖除恶。一次次的坎坷磨难中张小凡逐渐成长，而与碧瑶的感情，也在患难与共中日渐深厚。
然而，鬼王为复活兽神并颠覆青云，设下连环阴谋。
张小凡悍然迎敌，就在命悬一刻之即，碧瑶舍身为他挡下致命的一剑，重伤昏迷，小凡带着沉睡的碧瑶流浪世间。
鬼王死心不息，卷土重来，最终，张小凡以强大的勇气和信念，挫败鬼王，消弭了正反两派纠葛千年的过节，完成了少年时与碧瑶、林惊羽一众同伴们的约定。
在少年们的共同努力之下，终换得山河锦绣如画，沃土千里绵延。
</p>
<div class="cap">cascading style sheet</div>
<div class="upper">cascading style sheet</div>
<div class="lower">CASCADING STYLE SHEET</div>
<div class="lh">只是一个序号而已没有具体的含义。</div>
</body>
</html>
2.字体属性
| 属性名 | 值 | 功能 |
|---|---|---|
| font-style | normal(正常) 、italic(斜体) | 设置文本为斜体 |
| font-weight | normal(正常)、 bold | 设置文字粗细 |
| font-size | 12px 14px(记得加单位) | 给文本设置大小 |
| font-family | 微软雅黑、楷体、宋体… | 给文本设置字体 |
| font | 举例:font:italic bold 14px “微软雅黑” | 简写属性，能够同时给文本设置斜体、加粗、大小、字体，每一个值之间需要使用空格，并且一定要有顺序。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>字体属性</title>
<style type="text/css">
.zhang{
font-style: italic; /*将文本设置为斜体*/
font-weight: bold; /*加粗*/
font-size: 36px; /*设置字体大小*/
font-family: '楷体','宋体'; /*设置字体*/
}
.lin{
font: italic bold 24px "楷体"; /*这里一定要注意书写的顺序*/
}
</style>
</head>
<body>
<h3>诛仙青云志</h3>
<p>
草庙村少年<span class="zhang">张小凡</span>，在经历全村尽灭的惨案后，被青云门收归门下。为报答师门恩情，张小凡勤学苦炼，却因自身驽钝，<span class="ywsc">一无所成</span>。
陷入迷茫与孤独境遇中的他，幸有鬼王之女碧瑶和好友<span class="lin">林惊羽</span>从旁安慰陪伴，渡过了人生最彷徨的阶段。
</p>
</body>
</html>
关于字体：一般很特殊的字体，网站上面都是使用图片来表示的，是否能够显示此字体是根据用户电脑里面是否有对应得字体，如果没有该文件就会显示为宋体。
(七)复合元素选择器
| 选择器 | 含义 | 举例 |
|---|---|---|
| 选择器1，选择器2{属性:值;}多元素选择器 | 多元素选择器，同时匹配选择器1和选择器2，多个选择器之间用逗号分隔 | p,h1,h2{margin:0px;} |
| E F{属性:值;}后代元素选择器 | 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格隔开 | #slidebar p{font-color:#990000;} |
| E>F{属性:值;}子元素选择器 | 子元素选择器，匹配所有E元素的子元素F | div>p{color:#990000;} |
| E+F{属性:值;}相邻元素选择器 | 相邻元素选择器，匹配所有紧随E元素之后的同级元素F | div+div{color:#990000;} |
多元素选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>多元素选择器</title>
<style type="text/css">
/*多元素选择器格式： 选择器1，选择器2，选择器n{属性：值；}
作用：给列表中的所有选择器设置样式*/
div,p,h2,li{
color: #990000;
text-decoration: underline;
}
</style>
</head>
<body>
<div>HTML</div>
<p>CSS</p>
<h2>PHP</h2>
<ul>
<li>北京</li>
<li>广州</li>
<li>上海</li>
<li>深圳</li>
</ul>
</body>
</html>
后代元素选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>后代元素选择器</title>
<style type="text/css">
/* 后代元素选择器格式： E F{属性:值;} */
/*作用：匹配.box这个盒子里面的所有的h2后代元素*/
.box h2{
color: #f00;
text-decoration: overline;
}
</style>
</head>
<body>
<!--
class=box这个元素中有3个子元素，
第一个子元素是：<h2>HTML</h2>
第二个子元素是： <div></div>
第三个子元素是：<h2>PHP</h2>
并且第二个子元素中还有一个子元素：<h2>CSS</h2>
-->
<div class="box">
<h2>HTML</h2>
<div>
<h2>CSS</h2>
</div>
<h2>PHP</h2>
</div>
</body>
</html>
子元素选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>子元素选择器</title>
<style type="text/css">
/* 子元素选择器格式： E > F{属性:值;} */
/*作用：匹配.box下面的h2子元素，只匹配一级元素，注意与后代元素选择器的区别*/
.box > h2{
color: #f00;
text-decoration: overline;
}
</style>
</head>
<body>
<div class="box">
<h2>HTML</h2>
<div>
<h2>CSS</h2>
</div>
<h2>PHP</h2>
</div>
</body>
</html>
相邻元素选择器;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>相邻元素选择器</title>
<style type="text/css">
/* 相邻元素选择器格式： E + F{属性:值;} */
/*作用：要满足以下前提才会匹配：
第一点：E元素与F元素必须是兄弟关系，平辈关系
第二点：E元素与F元素必须要紧挨着，中间没有任何元素阻挡
第三点：要求F元素一定是在E元素的下面
匹配.box下面的那个p元素
*/
.box + p {
color: #f00;
text-decoration: overline;
}
</style>
</head>
<body>
<p>我在上面</p>
<div class="box">
<h2>HTML</h2>
<div>
<h2>CSS</h2>
</div>
<h2>PHP</h2>
</div>
<h2>CSS</h2>
<p>我在下面</p>
</body>
</html>
(八)列表样式属性
这里的列表指的是：无序列表和有序列表。整个网页布局中无序列表是使用的最多的。
| 属性 | 值 | 含义 |
|---|---|---|
| list-style-type | none(将列表前面的项目符号去掉),disc(实心圆),square(实心小方块),circle(空心圆) | 设置列表前项目符号的类型 |
| list-style-position | inside(在里面),outside(在外面) | 设置列表项标记的放置位置 |
| list-style-image | url(图像路径) | 将图像设置为列表项标记 |
| list-style | square inside url(arrow.gif) | 在一个声明中设置所有列表属性 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表样式属性</title>
<style type="text/css">
.box ul{
list-style-type: disc;
}
.box ul li{
border: 1px solid #f00;
height: 35px; /*要将文本在一个盒子里面垂直方向居中对齐，要将高度与行高设置为一样大小*/
line-height: 35px;
list-style-position: inside; /*将列表前面的项目符号放在边框的里面*/
/*将列表前面的项目符号改成一张图片：
第一步：将列表前面的项目符号去除 list-style-type: none;
第二步：将列表前面的符号换成一张图片 list-style-image: url(图片的地址);
*/
}
</style>
</head>
<body>
<div class="box">
<h2>请列出中国著名的四大城市</h2>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
</div>
</body>
</html>
list-style:这个属性是一个简写属性，他集成了上面三个属性的功能，可以同时设置上面的三个属性。每一个属性值之间使用空格分隔！它的属性值个数可以有一、二或者三个。其属性值个数不定，位置也不定。
/*使用简写属性*/
list-style: none inside url();
列表样式属性案例分析：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表样式属性案例</title>
<style type="text/css">
/*第一步： 需要给div设置衣蛾边距，并且让这个div在浏览器上面是居中显示的*/
.box{
width: 500px;
border: 1px solid #c72187;
/*外边距概念：HTML中的表格标记属性 cellspacing
单元格与单元格之间的距离
在CSS中盒子与盒子之间的距离也称为外边距 margin*/
margin-left: auto; /*将左外边距设置为自动*/
margin-right: auto; /*将右外边距设置为自动*/
}
/*标题设置字体大小，字体类型，加粗，居中; 列表项前面的符号使用自己的图片表示，列表中的内容调整字体颜色，大小*/
.box h2{
border: 1px solid skyblue;
height: 40px;
line-height: 40px; /*第二行与第三行的操作是实现标题在表格中垂直居中*/
color: #f00;
font-size: 36px;
font-weight: bold; /*标题设置加粗效果*/
text-align: center;
font-family: 'Courier New', Courier, monospace;
}
.box ul li{
border: 1px solid #ff0;
height: 30px;
line-height: 30px;
list-style: none url(images/arr.png);
}
</style>
</head>
<body>
<div class="box">
<h2>频道推荐</h2>
<ul>
<li><a href="#">在中国带3公斤冰毒被抓的日本人自称无辜</a></li>
<li><a href="#">在中国带3公斤冰毒被抓的日本人自称无辜</a></li>
<li><a href="#">在中国带3公斤冰毒被抓的日本人自称无辜</a></li>
<li><a href="#">在中国带3公斤冰毒被抓的日本人自称无辜</a></li>
<li><a href="#">在中国带3公斤冰毒被抓的日本人自称无辜</a></li>
</ul>
</div>
</body>
</html>
(九)伪类选择器
- 什么是伪类选择器？ 伪类选择器是给超级链接(a标签)的不同状态来设置样式。
- 超级链接的不同状态：
- 正常状态：超级链接没有被访问 :link
- 访问过后状态： 超级链接已经被访问 :visited
- 鼠标放上状态：鼠标放在超级链接上面，但是并没有将鼠标的左键按下去 :hover
- 激活状态： 鼠标左键已经按下去了，但是并没有将鼠标的左键弹出 :active
- 注意：伪类选择器都是带有冒号的":"，超级链接的不同状态是有顺序的，也就是说伪类选择器设置是有顺序的。如果不按照伪类选择器的顺序，那么样式将会失效。
- 顺序：要遵守“爱恨准则” ，要先有爱才有恨， Love H ate
| 选择器 | 含义 |
|---|---|
| :link | 向未被访问的链接添加样式 |
| :visited | 向已被访问的链接添加样式 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式 |
| :active | 鼠标放在元素上面时，点击的一瞬间 |
- 超级链接的美化
通常会去掉超级链接的下划线，同时会给超级链接设置一个颜色。
一般情况下，正常状态与访问过后的状态的样式设置为一样。当鼠标放上的时候给其设置另外一个颜色，激活状态一般不会设置，因为激活状态时间太短。
格式：
a:link,a:visited{去掉超级链接的下划线，设置一个颜色}
a:hover{设置另外一个颜色，增加一个下划线}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>超级链接的美化</title>
<style type="text/css">
/*第一步： 需要给div设置衣蛾边距，并且让这个div在浏览器上面是居中显示的*/
.box {
width: 500px;
border: 1px solid #c72187;
margin-left: auto;
margin-right: auto;
}
.box h2 {
border: 1px solid skyblue;
height: 40px;
line-height: 40px;
color: #f00;
font-size: 36px;
font-weight: bold;
text-align: center;
font-family: 'Courier New', Courier, monospace;
}
.box ul li {
border: 1px solid #ff0;
height: 30px;
line-height: 30px;
list-style: none url(images/arr.png);
}
/*对超级链接的美化*/
a:link,a:visited{
/*去除下划线，设置颜色*/
text-decoration: none;
color:#444;
}
a:hover{
color:#f00;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="box">
<h2>频道推荐</h2>
<ul>
<li><a href="#">在中国带3公斤冰毒被抓的日本人自称无辜</a></li>
<li><a href="#">在中国带3公斤冰毒被抓的日本人自称无辜</a></li>
<li><a href="#">在中国带3公斤冰毒被抓的日本人自称无辜</a></li>
<li><a href="#">在中国带3公斤冰毒被抓的日本人自称无辜</a></li>
<li><a href="#">在中国带3公斤冰毒被抓的日本人自称无辜</a></li>
</ul>
</div>
</body>
</html>
(十)属性选择器
- 什么是属性选择器？
- 属性选择器是与标签的属性名和属性值有关
- 通过标签的属性名和属性值来匹配元素。
| 选择器 | 含义 | 举例 |
|---|---|---|
| [attr] | 匹配所有具有attr属性的元素，不考虑他的值 | h1[align]{…} input[type][size]{…} |
| [attr=“val”] | 匹配所有attr属性值等于val的元素 | h1[align=“center”]{…}属性值一般加引号 |
| [attr^=“val”] | 匹配元素中attr属性以指定值开头的所有元素 | font[color^="#ff"] |
| [attr$=“val”] | 匹配元素中attr属性以指定值结尾的所有元素 | font[color$=“00”] |
| [attr*=“val”] | 匹配元素中attr属性中包含指定值的所有元素 | font[color*=“00”] |
attr是英文单词attribute的简写，中文意思是属性 属性名,
val是英文value的简写，属性值
例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>属性选择器</title>
<style type="text/css">
/*通过属性选择器来匹配元素*/
/*第一个：[属性名]{}
*/
p[align]{ /*先匹配p标签，然后再判断p标签里面是否有align这个标签，如果有就能够匹配到，反之，不能。*/
color:#f00;
}
</style>
</head>
<body>
<p align="center"> 黑马程序员1</p> <!--可以匹配到黑马程序员1和黑马程序员3-->
<h2 align="center">黑马程序员2</h2>
<p align="left">黑马程序员3</p>
</body>
</html>
例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>属性选择器</title>
<style type="text/css">
/*通过属性选择器来匹配元素*/
/*第二个：[属性名="值"]{}*/
p[align=center]{
color:#f00;
}
</style>
</head>
<body>
<p align="center"> 黑马程序员1</p> <!--可以匹配到黑马程序员1-->
<h2 align="center">黑马程序员2</h2>
<p align="left">黑马程序员3</p>
</body>
</html>
例3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>属性选择器</title>
<style type="text/css">
/*通过属性选择器来匹配元素*/
/*第三个：[属性名^="值"]{}*/
font[color^="#ff"]{ /*先找到font标签，然后再来匹配color的属性值以#ff开头的元素*/
border: 1px solid #00f;
}
</style>
</head>
<body>
<p align="center"> 黑马程序员1</p> <!--可以匹配到1，2，3，5号颜色-->
<h2 align="center">黑马程序员2</h2>
<p align="left">黑马程序员3</p>
<font color="#ff0000">颜色1</font>
<font color="#ffAA00">颜色2</font>
<font color="#ffaabb">颜色3</font>
<font color="#aacc00">颜色4</font>
<font color="#ffaadd">颜色5</font>
<font color="#ddaabb">颜色6</font>
</body>
</html>
例4：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>属性选择器</title>
<style type="text/css">
/*通过属性选择器来匹配元素*/
/*第四个：[属性名$=值]{}*/
font[color$="00"]{ /*先找到font标签，然后再来匹配color的属性值以00结尾的元素*/
border: 1px solid #00f;
}
</style>
</head>
<body>
<p align="center"> 黑马程序员1</p> <!--可以匹配到1，2，4号颜色-->
<h2 align="center">黑马程序员2</h2>
<p align="left">黑马程序员3</p>
<font color="#ff0000">颜色1</font>
<font color="#ffAA00">颜色2</font>
<font color="#ffaabb">颜色3</font>
<font color="#aacc00">颜色4</font>
<font color="#ffaadd">颜色5</font>
<font color="#ddaabb">颜色6</font>
</body>
</html>
例5：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>属性选择器</title>
<style type="text/css">
/*通过属性选择器来匹配元素*/
/*第五个：[属性名*="值"]{}*/
font[color*="aa"]{ /*先找到font标签，然后再来匹配color的属性值中包含aa的元素，并且不区分大小写*/
border: 1px solid #00f;
}
</style>
</head>
<body>
<p align="center"> 黑马程序员1</p> <!--可以匹配到2，3，4，5号颜色-->
<h2 align="center">黑马程序员2</h2>
<p align="left">黑马程序员3</p>
<font color="#ff0000">颜色</font>
<font color="#ffAA00">颜色</font>
<font color="#ffaabb">颜色</font>
<font color="#aacc00">颜色</font>
<font color="#ffaadd">颜色</font>
<font color="#ddaabb">颜色</font>
</body>
</html>
转载：https://blog.csdn.net/qq_38148024/article/details/101712029
查看评论