Web开发 -前端部分-CSS

CSS

CSS（Cascading Style Sheet）:层叠样式表，用于控制页面的样式（表现）。

一基础知识

1 标题格式

标题格式一：行内样式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个前端代码</title>
</head><body><!-- 第一种方式 --><h1 style="color: red;">图片图集:</h1><h2>第一张图片</h2><img src="./QQ图片20240919174729.jpg" width="10%"><hr>2024年12月8号<hr><h1>第二张照片</h1><img src="./QQ图片20240919174738.jpg" width="10%"><hr>2024年12月8号<hr></body></html>

标题样式二：内嵌样式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个前端代码</title><!-- 内嵌样式 --><style>h1{color: orange}h2{color:brown}</style>
</head><body><h1>图片图集:</h1><h2>第一张图片</h2><img src="./QQ图片20240919174729.jpg" width="10%"><hr>2024年12月8号<hr><h1>第二张照片</h1><img src="./QQ图片20240919174738.jpg" width="10%"><hr>2024年12月9号<hr></body></html>

标题样式三：外联样式

创建一个css文件用于存储对应格式

h1{color: brown;}
h2{color: blue;
}

外联导入

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个前端代码</title><link rel="stylesheet" href="./CSS/news.css">
</head><body><h1>图片图集:</h1><h2>第一张图片</h2><img src="./QQ图片20240919174729.jpg" width="10%"><hr>2024年12月8号<hr><h1>第二张照片</h1><img src="./QQ图片20240919174738.jpg" width="10%"><hr>2024年12月9号<hr></body></html>

2 颜色属性表示

color

3 字体大小属性表示

font-size（需要加px）

.cls {color: rgb(21, 0, 255);font-size: 12px;
}

4 实现首行缩进，列间距

        p{/* 首行缩进 */text-indent: 35px;/* 设置行高 */line-height: 25px;    }

二 CSS选择器

1 基础的三个选择器

用来选取需要设置样式的元素（标签）批量的更改

优先级类选择器 > id选择器 > 元素选择器

代码实现：

/* 元素选择器 */
h1{color: brown;}
h2{color: blue;
}
/* id选择器 */
#ax1{color: yellow;
}
/* 类选择器 */
.cls{color: rgb(0, 255, 8);
}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个前端代码</title><link rel="stylesheet" href="./CSS/news.css">
</head><body><!-- 元素选择器 --><h1>图片图集:</h1><h2>第一张图片</h2><img src="./QQ图片20240919174729.jpg" width="10%"><hr>2024年12月8号<hr><h1>第二张照片</h1><img src="./QQ图片20240919174738.jpg" width="10%"><hr><!-- id选择器 --><span id="ax1">year: </span><hr><!-- 类名选择器 --><span class="cls">2024年12月9号</span><hr></body></html>

2 通配选择器

作用：可以选中所有的HTML元素

代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h2 {color: green;font-size: 30px;}*{color: red;}</style><!-- <link rel="stylesheet" href="/HTML/CSS/news.css"> --></head><body><h2>欢迎来到我的世界</h2><p>草莓，蓝莓，溜溜梅，你想我了没？</p>
</body></html>

图形化展示：

3 复合选择器

交集选择器

作用：选中同时符合多个条件的元素。

并集选择器：

作用：选中多个选择器对应的元素，又称：分组选择器。

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.rich {color: gold;}.bea {color: red;}.dog {color: blue;}.pig {color: green;}/* 并集选择器  用于添加重复的属性 （也可以在原有的类中再添加一个共有类）*/#ax,.rich,.bea,.dog,.pig {font-size: 40px;background-color: yellow;width: 180px;}</style>
</head><body><h2 class="rich">土豪张三</h2><h2 class="bea">明星李四</h2><h2>破产王五（不添加任何样式）</h2><hr><p class="dog">小狗旺财</p><p class="pig">小猪佩奇</p><p id="ax">小羊肖恩</p></body></html>

图形化展示：

4 后代选择器（儿子孙子~）

作用：选中指定元素中，古河要求的后代元素。

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代选择器</title><style>/* 在父类元素后面加一个#nbsp(空格)再加上后代（几代都行）  */ul li {color: red;}ul li a {color: orange;}/* 将ol中的特殊id 的元素属性更改 */.subject #front-end {color: blue;}/* ol中的li为绿色  */ol li {color: gray;}/* p选择器中不能放h1-h6 */</style>
</head><body><ul><li>抽烟</li><li>喝酒</li><li><a href="#">烫头</a></li></ul><br><ol><li>张三</li><li>李四</li><li>王五</li></ol><ol class="subject"><li id="front-end">前端</li><li>后端</li><li>大数据</li><li>UI</li></ol>
</body></html>

图形化展示

5子代选择器（儿子）

作用：选中指定元素中符合要求的子元素（儿子元素）。（先写父再写子）

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>/* 子代选择器是一种组合关系（一个父与一个子而组成的一个组合搭配） */div>a {color: red;}div>p>a {color: green;}.ax>a {color: chocolate;}</style>
</head><body><div><a href="#">张三</a><a href="#">李四</a><a href="#">王五</a><p><a href="#">刘六</a><div><a href="#">孙七</a></div><br><div class="ax"><a href="#">吴八</a></div></p></div>
</body></html>

图形化展示

6 兄弟选择器

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>兄弟选择器</title><style>/* 紧紧相邻的兄弟 跟div紧紧相邻（间隔为一）的元素*/div+p {color: red;}/* 旁边的兄弟 (所有的兄弟元素) *//* 后来者居上 颜色为brown */div~p{color: brown;}</style>
</head><body><div>尚硅谷</div><p>前端</p><p>java</p><p>大数据</p><p>UI</p></body></html>

图形化展示：

7 属性选择器

作用：选中属性值符合一定要求的元素

代码实现：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 第一种写法 选中具有title属性的元素*/[title] {color: red;}/* 第二种写法 选中具有title属性且指定属性值的特定元素*/[title="home1"] {color: brown;}/* 第三种写法 选中具有title属性且属性值以指定值为开头的特定元素 */[title^="a"] {color: green;}/* 第四种元素 选中具有title属性且属性值以指定值为结尾的特定元素 */[title$="b"] {font-size: 30px;}/* 第五种写法 选中具有title属性且属性值包含指定值的特定元素*/[title*="a"] {background-color: yellow;}</style>
</head><body><div title="home1">这是一个属性选择器的实例1</div><div title="home2">这是一个属性选择器的实例2</div><div title="a_home3">这是一个属性选择器的实例3</div><div title="a_home4">这是一个属性选择器的实例4</div><div title="a_home5b">这是一个属性选择器的实例4</div></body></html>

图形化展示