文章目录
CSS概述
- CSS,(Cascading Style Sheets,层叠样式表)用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
CSS创建方式
-
行内样式表——元素内嵌样式
- 将网页链接到外部样式表
-
<p style="color: red;font-size: 30px;">p标签的样式</p>
-
内部样式表——文档内嵌样式
- 在网页上创建嵌入的样式表
-
<head> <style type="text/css"> p{ color: red; font-size: 30px; } </style> </head> <body> <p>这是一个文档内嵌样式(内部样式)</p> </body>
-
外部样式表——外部引入样式
- 将网页链接到外部样式表
-
<head> <link rel="stylesheet" type="text/css" href="css/style.css"/> </style> <!--解析:href表示.css文件表示路径;type表示文件的类型是样式表文件;rel是指在页面中使用外部的样式表--> </head> <body> <p>这是一个外部引用样式</p> </body>
-
@charset "utf-8"; p{ color: green; font-size: 30px; }
CSS样式表层叠和继承
-
样式表层叠
- 指的是同一个元素通过不同方式设置样式表产生的样式重叠
-
样式表继承
- 指的是某一个被嵌套的元素得到它父元素样式
-
浏览器样式
- 是这个元素在这个浏览器运行时默认时附加的样式
-
<b>这个元素隐含加粗样式</b> <span style="font-weight:bold;">这个元素通过style加粗</span>
CSS中的选择器
-
基本选择器
-
通用选择器
-
<head> *{ border: 1px solid green; } <!--解析:"*"号是通用选择器,功能匹配所有元素,包括`<html>`和`<body>`标签--> </head> <body> <p>段落样式</p> <b>加粗样式</b> <span>快标签</span></body>
-
-
元素选择器
-
<head> p{ color:green; } <!-- 解析:直接使用元素名称作为选择器即可 --> </head> <body> <p>这是一个段落</p> </body>
-
-
ID选择器
-
<head> #abc{ color: yellow; font-size: 30px; } <!--解析:通过对元素设置全局属性id,然后使用#id值来选择页面唯一元素--> .ls{ color:green; } .mn{ font-size:30px } <!--解析:可以引用多个类--> </head> <body> <p id="abc">这是第一个段落</p> <span class="ls mn">这是第二个段落</span> </body>
-
-
类选择器
-
<head> .abc{ border:1px solid red; } <!-- 解析:通过对元素设置全局属性class,然后使用.class值选择一个或多元素 --> b.abc{ border:1px solid blue; } <!--解析:也可以使用"元素.class值"d的形式,限定某种类型的元素 --> </head> <body> <b class="abc">加粗效果</b> <span class="abc">啥也没有</span> <span class="abc edf">无</span> <!--解析:类选择器还可以调用多个样式,中间用空格隔开进行层叠--> </body>
-
-
-
复合选择器
-
分组选择器
-
<head> p,b,i,span{ color:blue; } <!--解析:将多个选择器通过逗号分隔,同时设置一组样式。当然,不但可以分组元素选择器,还可以使用ID选择器、类选择器、属性选择器混合使用--> </head> <body> <p>段落</p> <b class="abc">加粗效果</b> <i>倾斜</i> <span class="abc">啥也没有</span> </body>
-
-
后代选择器
-
<head> p b{ color:red; } <!--解析:选择<p>元素内部所有<b>元素。不在乎<b>的层次深度。当然,后代选择器也可以使用ID选择器、类选择器、属性选择器混合使用--> </head> <body> <p id="pid">第二个p标签 <span>第一层span标签 <span>第二层span标签 <span>第三层span标签</span><br/> </span><br/> <b>这是一个b标签</b> <p>这是一个p标签</p> </span> </p> </body>
-
-
子选择器
-
<head> ul>li{ color:yellow; } </head> <body> <ul> <li>我是儿子 <ul> <li>我是孙子</li> <li>我是孙子</li> </ul> </li> <li>我是儿子</li> <li>我是儿子</li> </ul> <!-- 子选择器 --> <!-- 子选择器与后代选择器最大的不同就是子选择器只能选择父元素向下一级的元素,不可以再往下选择 --> </body>
-
-
相邻兄弟选择器
-
<head> p + b{ color:khaki; } <!-- 相邻兄弟选择器匹配和第一个元素相邻的第二个元素 --> </head> <body> <p>第一个p</p> <b>第一个b</b> <b>第二个b</b> <b>第三个b</b> </body>
-
-
普通兄弟选择器
-
<head> p ~ b{ color:green; } <!-- 普通兄弟选择器匹配和第一个元素后面的所有元素 --> </head> <body> <p>第一个p</p> <b>第一个b</b> <b>第二个b</b> <b>第三个b</b> </body>
-
-
-
伪选择器分为【伪元素选择器】和【伪类选择器】,伪元素前置为两个冒号(:😃 伪类前置为一个冒号(😃
-
伪元素选择器
-
块级首行
-
<!--style.css--> ::first-line{ color:yellow; } /* 解析:块级元素的首行文本被选定,若想限定某种元素,可以加上前置 h4::first-line */ <!--index.html--> <body> <h4>1111111111<br/> 2222222222<br/> 3333333333</h4> </body>
-
-
块级首字母
-
::first-letter{ color:red; } /* 块级元素的首行首字母 */
-
-
文本插入
-
/* 在文本前插入内容 */ a::before{ content:"点击-" } /* 在文本后插入内容 */ a::after{ content:"-请进" }
-
-
-
伪类选择器
-
结构性伪类选择器
结构性伪类选择器:能够根据元素在文档中的位置选择元素,这类元素都有一个前缀(:)
-
子元素选择器
-
<!--style.css--> ul > li:first-child{ color:red; } /* 选择第一个元素 */ ul > li:last-child{ color:green; } /* 选择最后一个元素 */ p > span:only-child{ color:yellow; } /* 匹配属于父子元素中唯一子元素的元素,即span标签是p标签的唯一子元素 */
-
-
:nth-chile(n)系列
-
ul >li:nth-child(2){ background:yellow; } /* 解析:选择子元素的第二个元素 */ ul >li:nth-last-child(2){ background:orange; } /* 解析:选择子元素的倒数第二个元素 */
-
-
-
UI伪类选择器
UI伪类选择器是根据元素的状态匹配元素
-
:enabled{ border:1px solid red; } /* enabled解析:选择启用状态的元素 */ input:disabled{ border:1px solid purple; } /* disabled解析:选择禁用状态的元素 */ input:checked{ display:none; } /* checked解析:选择勾选的input元素 */ input:required{ border:2px solid purple; } input:optional{ border:2px solid green; } /* 解析:根据是否具有required属性选择元素 */
-
-
动态伪类选择器
动态伪类选择器根据条件的改变匹配元素
-
a:link{ color:red; } a:visited{ color:green; } /* 解析:link表示未访问过的超链接 visited表示已访问过的超链接 */ a:hover{ color:purple; } /* 解析:hover表示鼠标悬停在超链接上的时候 */ a:active{ color:blue; } /* 解析:表示鼠标按下激活超链接的时候,css中active必须位于hover之后 */ input:focus{ border:3px solid orange; } /* 表示获得焦点时 */
-
-
-
CSS中的颜色及度量单位
-
颜色表方案
颜色表及html代码: http://xh.5156edu.com/page/z1015m9220j18754.html
css颜色表: https://www.w3school.com.cn/tags/html_ref_colornames.asp
Web安全色: https://www.bootcss.com/p/websafecolors/ -
度量单位