HTML + CSS 学习笔记(三)
CSS就是层叠样式表，CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽高等。
一、行内样式(内联样式)
在标签内使用style属性设置该标签样式，属性名+:+值+;
<!DOCTYPE html>
<html lang="zh-cn">
<head></head>
<body>
<h1 style="color: red; font-size: 80px;">
hello
</h1>
</body>
</html>
这种方式写的样式只对当前样式有效，无法复用，不推荐大量使用。
二、内部样式
使用<style></style>标签设置标签样式，写在 html 内部。通常放在<head></head>中。虽然也可以写在<body></body>标签中，但是更推荐放置在<head>中。
将样式表放置在
<head>中有以下优点：
- 提供更好的加载性能：将样式表放在头部可以确保在页面内容加载之前先加载样式，使页面更快地呈现。
- 全局样式定义：通过在头部中定义样式表，可以确保样式适用于整个文档，而不仅仅是特定的部分。
- 便于维护和管理：将样式表与页面内容分开，使得对样式的修改和维护更加方便，同时也使HTML结构更加清晰。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<style>
h1 {
color: red;
font-size: 80px;
}
h2 {
color: blue;
font-size: 50px;
}
</style>
</head>
<body>
<h1>hello</h1>
<h2>world</h2>
</body>
</html>
样式在单个 html 页面中可以复用、代码结构清晰；但没有实现结构与样式完全分离，多个 html 页面无法复用样式。
三、外部样式
新建一个.css文件用于写样式，在html文件中使用<link>标签引入该css文件。
<link>标签写在<head>标签中，href属性表示引入的文档路径，rel标签表示引入的文档与当前文档的关系。
/* css文件，文件名为hello.css */
h1 {
color: red;
font-size: 80px;
}
h2 {
color: blue;
font-size: 50px;
}
<!-- html文件 -->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<!-- 此处引入css外部样式表 -->
<link rel="stylesheet" href="./hello.css">
</head>
<body>
<h1>hello</h1>
<h2>world</h2>
</body>
</html>
外部样式可以多个html文件复用，结构清晰，可触发浏览器的缓存机制，提高访问速度，实现了结构与样式的完全分离。
四、样式表优先级
优先级规则：行内样式 > 内部样式 = 外部样式
- 内部样式、外部样式的优先级相同，且后面的样式会覆盖前面的样式。
- 同一个样式表中，优先级和编写顺序有关，后面的样式会覆盖前面的样式。
/* h2.css文件 */
h2 {
color: blue;
font-size: 50px;
}
/* p.css文件 */
p {
color: blue;
font-size: 50px;
}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<!-- 在style标签前引入h2.css样式表 -->
<link rel="stylesheet" href="./h2.css">
<style>
h1 {
color: red;
font-size: 80px;
}
h2 {
color: red;
font-size: 50px;
}
p {
color: red;
font-size: 50px;
}
</style>
<!-- 在style标签后引入p.css样式表 -->
<link rel="stylesheet" href="./p.css">
</head>
<body>
<!-- 此时h1文字的颜色为pink -->
<h1 style="color: pink">hello</h1>
<!-- 此时h2的文字颜色为red -->
<h2>world</h2>
<!-- 此时p的文字颜色为blue -->
<p>欢迎学习css</p>
</body>
</html>
五、语法规范
CSS语法构成：选择器 { 声明块 }；
例如：h1 {color: red; font-size: 30px;}，h1为选择器，{}及其中间所有的为声明块，声明块由一个或多个声明组成，声明格式为属性: 属性值;构成，:;为英文符号。
六、CSS代码风格
展开风格：开发时推荐，便于维护和调试
h1 {
color: red;
font-size: 30px;
}
紧凑风格：项目上线时推荐，可减小文件体积。
h1{color:red;font-size:30px;}
七、CSS基本选择器
- 通配选择器
可以选中所有的HTML元素。
语法：* { 属性名: 属性值; } - 元素选择器
为页面中某种元素统一设置样式。
语法：标签名 { 属性名: 属性值; } - 类选择器
根据元素的class值选中某些元素设置样式。
一个标签只能有一个class属性，但是class的值可以有多个，中间用空格分隔，class的值不能是纯数字、中文，类名最好要能“见名知意”。
语法：.类名 { 属性名: 属性值; } id选择器
根据元素的id属性值，精准选中某个元素设置样式。
id属性值尽量由字母、数字、下划线(_)、短杆(-)组成，最好以字母开头，不要包含空格、区分大小写。
语法：#id值 { 属性名: 属性值; }
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<style>
/* 通配选择器，所有元素的字体为20px */
* {
font-size: 20px;
}
/* 元素选择器，所有h2的颜色都为red */
h2 {
color: red;
}
/* 类选择器，所有类名为"one"的颜色都为purple */
.one {
color: purple;
}
/* 类选择器，所有类名为"two"的设置green下划线 */
.two {
text-decoration: underline green;
}
/* id选择器，id在一个HTML页面中是唯一的 */
/* 设置id为id1的元素的文字居中显示 */
#id1 {
text-align: center;
}
</style>
</head>
<body>
<h1 id="id1">hello world</h1>
<h2>html</h2>
<h3 class="one two">标题一</h3>
<p class="one">正文一</p>
<p class="one">结束语一</p>
<h2>css</h2>
<h3 class="one two">标题二</h3>
<p class="two">正文二</p>
<p class="two">结束语二</p>
</body>
</html>
通配选择器：选择所有标签，一般用于清除样式。
元素选择器：选择所有同种标签，但是不能差异化选择。
类选择器：选中所有特定类名的元素——使用频率很高。
id选择器：选中特定id值的那个元素（唯一的）。
八、复合选择器
- 交集选择器
选择同时符合多个条件的元素。多个条件之间没有符号分隔。
语法：选择器1选择器2...选择器n { 属性名: 属性值; } - 并集选择器
选择多个选择器对应的元素设置同样的样式，又称分组选择器。多个选择器之间用,分隔。
语法：选择器1, 选择器2, ..., 选择器n { 属性名: 属性值; }
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<style>
/* 选择p标签中类名为"end"的颜色设为purple */
p.end {
color: purple;
}
/* 给id为id1，class为title和end的标签设置同样的样式 */
#id1,
.title,
.end {
background-color: grey;
width: 120px;
font-size: 30px;
}
</style>
</head>
<body>
<h1 id="id1">hello world</h1>
<h2>html</h2>
<h3 class="title">标题一</h3>
<p class="text">正文一</p>
<p class="end">结束语一</p>
<h2>css</h2>
<h3 class="title">标题二</h3>
<p class="text">正文二</p>
<p class="end">结束语二</p>
<h3 class="end">未完待续</h3>
</body>
</html>
九、HTML元素间的关系及选择器
父元素：直接包裹某个元素的元素，就是该元素的父元素;
子元素：被父元素直接包含的元素；
祖先元素：父元素的父元素···都是祖先元素；
后代元素：子元素的子元素···都是后代元素；
兄弟元素：具有相同父元素的元素。
父元素也是祖先元素的一种，子元素也是后代元素的一种。
<!-- div是h1、ul的父元素，ul是li的父元素,但是div不是li的父元素 -->
<!-- div和ul是li和span的祖先元素，li和span是div和ul的后代元素 -->
<!-- h1和ul互为兄弟元素，四个li也互为兄弟元素 -->
<div>
<h1>hello</h1>
<ul>
<li>1</li>
<li>
<span>2</span>
</li>
<li>3</li>
<li>4</li>
</ul>
</div>
- 后代选择器
选中指定元素中符合要求的后代元素，各选择器之间以空格分隔
语法：选择器1 选择器2 ... 选择器n { 属性名: 属性值; } - 子代选择器
选中指定元素中符合要求的子元素，父元素和子元素之间用>分隔选择器1>选择器2>...>选择器n { 属性名: 属性值; } - 兄弟选择器
- 相邻兄弟选择器
选中指定元素 后，符合条件的相邻兄弟元素
语法：选择器1+选择器2 { 属性名: 属性值; } - 通用兄弟选择器
选中指定元素 后，符合条件的所有兄弟元素
语法：选择器1~选择器2 { 属性名: 属性值; }
- 相邻兄弟选择器
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<style>
/* iv中的后代li全都为red */
ul li {
color: red;
}
/* div中的子代a元素为blue，p中的a不变 */
div>span {
color: blue;
}
/* 选中h2后面紧紧相邻的p元素为pink */
h2+p {
color: pink;
}
/* 选中h3后所有的p元素设为brown */
h3~p {
color: brown;
}
</style>
</head>
<body>
<div>
<ul>
<li>语文</li>
<li>数学
<ol>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ol>
</li>
<li>英语</li>
</ul>
<span>班级</span>
<span>年级</span>
<p>
<span>总</span>
</p>
</div>
<div>
<p>试卷</p>
<h2>题目</h2>
<p>选择题</p>
<p>判断题</p>
<h3>第二部分</h3>
<p>填空题</p>
<p>解答题</p>
</div>
</body>
</html>
十、属性选择器
选中属性值符合一定要求的元素
- [属性名]：选中具有某个属性的元素。
- [属性值=“xx”]：选中包含某个属性且属性值为xx的元素。
- [属性值^=“xx”]：选中包含某个属性且属性值以xx开头的元素。
- [属性值$=“xx”]：选中包含某个属性且属性值以xx结尾的元素。
- [属性值*=“xx”]：选中包含某个属性且属性值包含xx的元素。
例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<style>
/* 选中具有title属性的元素，设为red */
[title] {
color: red;
}
/* 选中具有title属性的元素且属性值为3的元素字体设为30px */
[title="3"] {
font-size: 30px;
}
/* 选中具有title属性的元素且属性值以a开头的元素字体设为40px */
[title^="a"] {
font-size: 40px;
}
/* 选中具有title属性的元素且属性值以z结尾的元素字体设为50px */
[title$="z"] {
font-size: 50px;
}
/* 选中具有title属性的元素且属性值包含m的元素字体设为60px */
[title*="m"] {
font-size: 60px;
}
</style>
</head>
<body>
<div title="1">1</div>
<div title="2">2</div>
<div title="3">3</div>
<div title="a4">4</div>
<div title="5z">5</div>
<div title="6m6">6</div>
</body>
</html>
十一、伪类选择器
选中特殊状态的元素
什么是伪类？——很像类但不是类，是元素特殊状态的一种描述
- 动态伪类
:link：超链接未被访问的状态（a元素独有）:visited：超链接访问过的状态（a元素独有）:hover：鼠标悬停在元素上的状态（所有元素可用）:active：元素激活的状态（所有元素可用）
以上四种使用时遵循lvha的顺序，即link、visited、hover、active:focus：获取焦点的元素（表单元素元素可用）<!DOCTYPE html> <html lang="zh-cn"> <head> <style> /* 选中没有访问过的a设为orange */ a:link { color: orange; } /* 选中访问过的a设为gray */ a:visited { color: gray; } /* 选中的是鼠标悬浮状态的a元素 */ a:hover { color: skyblue; } /* 选中的是激活状态的a元素,即鼠标点下去时的状态 */ a:active { color: green; } /* 获取焦点，设置被选中输入框文字颜色和背景色 */ input:focus { color: brown; background-color: skyblue; } /* 当a元素同时具有以上多种状态时，最后呈现的效果以写在后面的样式为准 */ /*link和visited为a元素独有的状态，hover和active所有元素可用 */ /* focus只有表单类元素才能用，比如input，select */ </style> </head> <body> <a href="https://www.baidu.com">去百度</a> <a href="https://www.jd.com">去京东</a><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> </body> </html>
- 结构伪类
:first-child：所有兄弟元素中的第一个:last-child：所有兄弟元素中的最后一个:nth-child(n)：所有兄弟元素中的第n个:first-of-type：所有同类型兄弟元素中的第一个:last-of-type：所有同类型兄弟元素中的最后一个:nth-of-type：所有同类型兄弟元素中的第n个:nth-last-child(n)：所有兄弟元素中的倒数第n个:nth-last-of-type(n)：所有同类型兄弟元素中的倒数第n个:only-of-child：选择没有兄弟元素的子元素:only-of-type：选择没有同类型兄弟元素的子元素:root：根元素:empty：内容为空元素，空格也算内容<!DOCTYPE html> <html lang="zh-cn"> <head> <style> /* 选中div1和div2的第一个儿子元素，且是p元素 */ /* 结构一的张三变了，结构二的没有元素变 */ .div1>p:first-child { color: red; } .div2>p:first-child { color: red; } /* 选中div3的后代中的作为第一个儿子元素出现的p元素 */ /* 结构三中测试一和测试二变了 */ .div3 p:first-child { color: red; } /* :nth-child(n)括号中的值可写具体的 数字、 公式（写法：an+b。例：2n：偶数；2n+1：奇数(n从0开始)；-n+5：前5个）、 单词（even：偶数；odd：奇数） n：选中所有子元素——几乎不用 */ /* 选中div中作为第4个儿子元素出现的p元素 */ /* 结构四中的四变了 */ .div4>p:nth-child(4) { color: red; } /* 选中第一个儿子p元素，div4中的二变了 */ .div4>p:first-of-type { color: red; } /* .div4>p:last-of-type 选中最后一个儿子p元素 .div4>p:nth-of-type(n) 选中第n个儿子p元素*/ /* 选中div中作为倒数第3个儿子元素出现的p元素 */ /* 结构五中的4变了 */ .div5>p:nth-last-child(3) { color: red; } /* 选中倒数第三个儿子p元素 */ /* 结构五中的3变了 */ .div5>p:nth-last-of-type(3) { color: red; } /* 选中没有兄弟元素的span元素，结构五中测试三变了 */ span:only-child { color: red; } /* 选中没有同类型兄弟元素的span，结构四中一也变了 */ span:only-of-type { color: red; } /* 选中的是根元素，也就是选中html */ :root { background-color: gray; } /* 选中的是没有内容的div元素，<div></div>中间什么都不能有，空格也不行 */ div:empty { width: 100px; height: 100px; background-color: skyblue; } </style> </head>xuan <body> <!-- 结构一 --> <div class="div1"> <p>张三：98分</p> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> </div> <!-- 结构二 --> <div class="div2"> <span>张三：98分</span> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> </div> <!-- 结构三 --> <div class="div3"> <p>测试一</p> <marquee> <p>测试二</p> <p>张三：98分</p> </marquee> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> </div> <!-- 结构四 --> <div class="div4"> <span>一</span> <p>二</p> <p>三</p> <p>四</p> <p>五</p> <p>六</p> </div> <!-- 结构五 --> <div class="div5"> <span>1</span> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <span>6</span> </div> <div> <span>测试三</span> </div> <div></div> </body> </html>
- 否定伪类
:not(选择器)：排除满足括号中条件的元素。<!DOCTYPE html> <html lang="zh-cn"> <head> <style> /* 选中div的儿子p元素，但是排除类名为fail的元素，赵六没变 */ /* div>p:not(.fail) { color: red; } */ /* 选中div的儿子p元素，但是排除title属性值以123开头的元素，王五没变 */ /* div>p:not([title^="123"]) { color: red; } */ /* 选中div的儿子p元素，但是排除第一个儿子p元素，王五没变 */ div>p:not(:first-child) { color: red; } </style> </head> <body> <div> <p>张三：98分</p> <p>李四：88分</p> <p title="123">王五：78分</p> <p class="fail">赵六：68分</p> </div> </body> </html> - UI 伪类
:checked：被选中的复选框或单选按钮:enabled：可用的表单元素:disabled：不可用的表单元素<!DOCTYPE html> <html lang="zh-cn"> <head> <style> /* 选中的是勾选的复选框或单选按钮 */ input:checked { width: 100px; height: 100px; } /* 选中的是被禁用的input元素 */ input:disabled { background-color: bisque; } /* 选中的是可用的元素 */ input:enabled { background-color: skyblue; } </style> </head> <body> <input type="checkbox"> <input type="radio" name="gender"> <input type="radio" name="gender"> <input type="text"> <input type="text" disabled> </body> </html>
- 目标伪类
:target：选中锚点指向的元素<!DOCTYPE html> <html lang="zh-cn"> <head> <style> div { background-color: skyblue; height: 500px; } div:target { background-color: pink; } </style> </head> <body> <a href="#one">去第1</a> <a href="#two">去第2</a> <a href="#three">去第3</a> <a href="#four">去第4</a> <div id="one">第1个</div><br> <div id="two">第2个</div><br> <div id="three">第3个</div><br> <div id="four">第4个</div><br> </body> </html> - 语言伪类
:lang：根据指定的语言选择元素（本质是看lang属性的值）<!DOCTYPE html> <html lang="zh-cn"> <head> <style> div:lang(en) { color: pink; } /* 虽然div中没有设置lang，但在html中设置了全文的lang */ div:lang(zh-CN) { color: green; } /* 不管什么元素，只要是zh-CN就设为绿色 */ /* :lang(zh-CN) { color: green; } */ </style> </head> <body> <div>你好</div> <div lang="en">hello</div> <div>学习</div> <span>使我快乐</span> </body> </html> - 伪元素选择器
选中元素中的一些特殊位置
什么是伪元素？——很像元素但不是元素，是元素中的一些特殊位置
::first-letter：选中元素中的第一个文字::first-line：选中元素中的第一行::selection：选中被鼠标选中的内容::placeholder：选中输入框的提示文字::before：在元素最开始的位置创建一个子元素（必须用content属性指定内容）::after：在元素最后的位置创建一个子元素（必须用content属性指定内容）<!DOCTYPE html> <html lang="zh-cn"> <head> <style> /* 选择div的第一个字 */ div::first-letter { color: red; font-size: 40px; } /* 选中div的第一行 */ div::first-line { background-color: yellow; } /* 选中div中被鼠标选择的文字 */ div::selection { background-color: skyblue; color: pink; } /* 选中的是input中的提示文字 */ input::placeholder { color: skyblue; } /* 选中p元素最前面和最后面的位置并创建一个子元素 */ p::before { content: "￥"; } p::after { content: ".00"; font-size: 10px; } </style> </head> <body> <!-- vscode中输入lorem然后回车即可出现这一段英文 --> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero eum voluptatum quia laudantium eius repellendus, obcaecati quibusdam asperiores unde aliquam provident iusto accusantium praesentium nemo sed ex voluptatem, commodi nobis.</div> <input type="text" placeholder="请输入"> <p>99</p> <p>199</p> <p>299</p> </body> </html>
- 选择器优先级
通过不同的选择器选中相同的元素，并为相同的样式名设置不同的值时，就发生了样式冲突，最终效果看优先级。- 简单比较：
id选择器 > 类选择器 > 元素选择器 > 通配选择器
- 复杂比较：计算权重
计算方式：每个选择器都可计算出一组权重，格式为：(a,b,c)
- a：id选择器的个数
- b：类、伪类、属性 选择器的个数
- c：元素、伪元素 选择器的个数
比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再比较
- 特殊规则：
- 行内样式大于所有选择器
!important的权重最高，大于行内样式，大于所有选择器
<!DOCTYPE html> <html lang="zh-cn"> <head> <style> /* id选择器 > 类选择器 > 元素选择器 > 通配选择器 */ #two { color: skyblue; } .slogan { color: pink; } h2 { color: red; } * { color: green; } </style> </head> <body> <h2>hello world!</h2> <h2 class="slogan">hello world!</h2> <h2 class="slogan" id="two">hello world!</h2> </body> </html>
十二、三大特性
- 层叠性
如果发生样式冲突，那就根据一定的规则(选择器优先级)，进行样式的层叠(覆盖)。 - 继承性
元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
规则：优先继承离得近的(就近原则)。
常见可继承属性：text-??、font-??、line-??、color - 优先级
一般：!important > 行内样式 > id选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承的样式
复杂：计算权重（并集选择器的每一部分分开计算）
463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
