CSS
层叠样式表(Cascading Style Sheets) ，用于渲染HTML元素标签的样式。
基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* CSS注释 */
p{
color: black;
}
</style>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!--
网页分成三个部分
结构: HTML
表现：CSS
行为：JavaScript
CSS:
层叠样式表
网页其实是一个多层的结构，通过CSS可以分别为网页每一层来设置样式。
-->
<!--
使用CSS来修改元素的样式
1.内联样式(行内样式)：
在标签内部通过style属性来设置元素的样式。
style="属性名：属性值;...."。
样式只能对一个标签生效。
2.内部样式表：
将样式编写到head中的style标签里。
CSS选择器{属性名: 属性值;}
3.外部样式表：
使用link标签来引入外部的css文件。
<link rel="stylesheet" href="./css/style.css">
-->
<!--
CSS基本语法：
选择器{声明块}
选择器：通过选择器可以选中页面中指定的元素。
声明块: 通过声明块来指定要为元素设置的样式。
声明块由一个一个的声明组成的。
声明是一个名值对结构。
一个样式名对应一个样式值，名和值之间以:连接，以;结束。
-->
<p style="color: red;">我是一个P标签</p>
</body>
</html>CSS选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
常用选择器
元素选择器
作用：根据标签名来选中指定的元素。
语法：标签名{}
id选择器
作用：根据元素的id属性值来选中一个元素。
语法：#id{}
类选择器：
作用：根据元素的class属性值来选中一组元素。
语法：.类名{}
通配符选择器
作用：选中页面中的所有元素。
语法：*{}
复合选择器
交集选择器：
作用：选中页面中同时符合多个条件的元素。
语法：选择器1选择器2...{}
注意：选择器中如果有元素选择器，必须使用元素选择器开头。
并集选择器:
作用：同时选择多个选择器对应的元素。
语法：选择器1,选择器2...{}
关系选择器
父元素：直接包含子元素的元素。
子元素：直接被父元素包含的元素。
祖先元素：直接或间接包含后代元素的元素。
后代元素：直接或间接被祖先元素包含的元素。
兄弟元素：拥有相同的父元素的元素。
子元素选择器：
作用：选中指定父元素的的指定子元素。
语法：父元素 > 子元素{}
后代元素选择器：
作用：选中指定元素内的指定后代元素。
语法：祖先 后代{}
选择下个兄弟选择器：
作用：选中指定元素的下一个元素。
语法：前一个 + 下一个{}
选择下边所有兄弟选择器：
作用：选中指定元素的所有兄弟元素。
语法：兄 ~ 弟{}
属性选择器
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的的元素
伪类选择器
伪类: 不存在的、特殊的，用来描述一个元素的特殊状态。
比如：第几个元素、被鼠标点击等等...
一般情况都是以:开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 第n个子元素
n 第n个
2n/even 选中偶数位的元素
2n+1/odd 选中奇数位的元素
:first-of-type
:last-of-type
:nth-last-of-type(n)
与上面的一样，但是选择的元素是同类型
:not(选择器) 否定伪类
将符合条件的元素从选择器中去除
*/
p{
color:red;
}
#one{
color: black;
}
.common{
color: gray;
}
*{
font-size: 20;
}
p.one{
color: brown;
}
div,p{
color: antiquewhite;
}
div > p{
color: aquamarine;
}
div p {
color: beige;
}
</style>
</head>
<body>
<p id="one">第一段</p>
<!--
class是一个标签的属性
可以通过class属性来为元素分组
可以同时为一个元素指定多个class属性值(使用空格隔开)
-->
<p class="common">第二段</p>
<p class="common three">第三段</p>
<p>第四段</p>
<p>第五段</p>
<div>我是一个DIV</div>
<div>
<div>
<p></p>
</div>
<div>
</div>
</div>
</body>
</html>超链接的伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
:link 用来表示没访问过的链接(正常的链接)
*/
a:link {
color: brown;
}
/*
:visited 用来表示访问过的链接
*/
a:visited {
color: gray;
}
/*
:hover 用来表示鼠标移入的状态
*/
a:hover {
color: yellow;
}
/*
:active 用来表示鼠标点击
*/
a:active {
color: white;
}
</style>
</head>
<body>
<a href="https://www.banq.ink/">半晴</a>
<a href="https://www.banq.ink/">Miko</a>
<a href="https://www.banq.ink/">半晴Miko</a>
</body>
</html>伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
伪元素：表示页面中一些特殊的并不真实的存在的元素(特殊位置)
伪元素使用::开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 表示元素的开始
::after 表示元素的最后
before 和 after 必须结合content属性来使用
*/
p::first-letter {
color: aqua;
}
p::after {
content: 'BanQ';
}
</style>
</head>
<body>
<p>半晴Miko</p>
</body>
</html>
