CSS基础必备知识点01
2024-05-15 02:27:24
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标签中使用
- 基本语法格式：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>外链式</title><!--将单独的css文件链接到当前的HTML文件中--><link rel="stylesheet" href="CSS文件的地址"> <!--rel是关系的意思，指的是我们引用的文件与该文件是什么关系，样式表的关系--> </head> <body></body> </html>如下为一个css文件的书写方式
/* 在这个index.css文件中书写css代码 在这个文件里面，只能书写css格式的代码，不写style标签，直接按如下格式书写： 选择器{属性：值；} */ body{background-color:rgb(66, 235, 221); }呈现的效果就是，运行HTML文件，背景会变为浅蓝色
使用这种方法，一定要确保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="h1"> 需要注意的是：在一个页面中ID选择器的值必须是唯一的，就类似于人的身份证号码，只能使用一次，不能重复。ID选择器与类选择器的最大不同在于使用次数的不同。四大名著是中国文学史中的经典作品，是世界宝贵的文化遗产 [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>
CSS基础必备知识点01相关推荐
- CSS基础必备知识点05
CSS3 1. css3与css2之间的区别 css3 = css2 + 新语法 + 新属性,就是对css2的扩充.删减和优化. 2. 结构伪类 选择器 功能 E:first-child 匹配第一个孩 ...
- CSS基础必备知识点03
1.标准文档流 什么是标准文档流? 制作HTML网页和PS画图软件画图有本质上的区别:HTML网页在制作的时候都遵循一个"流"的规则:从左到右.从上到下:使用PS软件画图时,我们想 ...
- CSS基础必备知识点04
1.display属性 display,显示,用来进行行内元素与块级元素之间的相互转换.将隐藏的元素显示或者将显示的元素进行隐藏. display这个属性取值有:inline(行内).block(块级 ...
- CSS基础必备盒模型及清除浮动
盒模型 盒模型是有两种标准的,一个是标准模型,一个是IE模型. css如何设置两种模型 这里用到了CSS3 的属性 box-sizing /* 标准模型 */ box-sizing:content-b ...
- Python学习基础必备知识点：字典dict详解
取键值 1.Python 字典 setdefault() 方法和 get() 方法类似,返回指定键的值,如果键不在字典中,将会添加键并将值设置为一个指定值,默认为None. get() 和 setde ...
- html语言熟记,html基础必备知识点
超文本标记语言,主要是通过HTML标签对网页中的文本,图片,声音等内容的描述. (1) 双标签 内容 标签名> (2) 单标签 ,也称为空标签,指的是一个标签号即可完整描述某个功能 单标签数量很 ...
- 前端基础：html基础(css基础和JavaScript基础)/01/B/S网络结构，html文件结构，html标签格式，lt;bodygt;中的一些常用标记
前端基础:html基础(css基础和JavaScript基础)/01/B/S网络结构,html文件结构,html标签格式,<body>中的一些常用标记 html:超文本标记语言(非编程语言 ...
- 前端css基础知识点之PC端项目-规范
前端css基础知识点之PC端项目-规范 1 文件管理 文件名用英文命名 css文件夹 reset.css(常用的浏览器样式) public.css(公共的样式.比如页面的头部尾部.重复使用字体.字号等 ...
- 前端css基础知识点之opacity——透明度
前端css基础知识点之opacity--透明度 opacity opacity:num /*num 0到1*/ 兼容性 ie9及以上和标准浏览器都支持 特点 设置opacity的元素的所有后代会一起具 ...
最新文章
- 用 MySQL 实现分布式锁，你听过吗？
- java获取jsp页面参数_jsp页面中获取servlet请求中的参数方法总结
- Linux调试技术介绍
- 国际青年日，神策数据召唤优（有）质（志）青年
- python简单可视化聊天界面_如何用Python制作可视化输入界面
- 一段JAVA签名算法的PHP改写
- mysql读写分离 存储过程_基于maxscale的读写分离部署笔记
- hive安装需要安装mysql区别_HIVE安装系列之一：在Linux中安装mysql，为其作为hive的metastore做准备...
- java发送消息_通过java给qq邮箱发送信息
- 【elasticsearch】bulk api奇特的json格式的原因
- 安全合规/法案--33--《APP违法违规收集使用个人信息自评估指南》原文及解读
- 漏洞扫描工具之nessus
- PS 渐变工具使用
- 一朵梨花压海棠的出处
- Floyd算法实现实际问题——18个城市间最优路线规划
- 将3D坐标转成2D坐标的方法
- 《MYSQL是怎样运行的》笔记|配置文件|系统变量|字符集|InnoDB存储结构|数据页结构|索引结构与使用|数据目录|表空间|连表原理|查询优化|BufferPool|事务|redo与undo|锁
- 51单片机：静态数码管详细教程
- 清除目录下的SVN信息
- 决策树及集成模型 python实现