🌟博主主页：我是一只海绵派大星
📚专栏分类：前端
📚参考教程：菜鸟教程
❤️感谢大家点赞👍收藏⭐评论✍️
目录
一、CSS教程
1、什么是CSS
CSS（Cascading Style Sheets）是一种计算机语言，用于表现HTML或XML等文件的样式。它不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
2、CSS 语法
CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我是一只海绵派大星</title>
<style>
p
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>这个段落采用CSS样式化。</p>
</body>
</html>
3、CSS id 和 class
id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我是一只海绵派大星</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>
class 选择器
class可以在多个元素中使用
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：
//.......
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
//.......
4、CSS 链接
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
当设置为若干链路状态的样式，也有一些顺序规则：
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
5、CSS列表
在 HTML中，有两种类型的列表：
- 无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
- 有序列表 ol - 列表项的标记有数字或字母
6、CSS 盒子模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
7、 CSS margin(外边距)
margin属性可以有一到四个值。
- margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
- margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
- margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
- margin:25px;
- 所有的4个边距都是25px
8、CSS 分组 和 嵌套 选择器
分组选择器
在样式表中有很多具有相同样式的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我是一只海绵派大星</title>
<style>
h1,h2,p
{
color:green;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
嵌套选择器
它可能适用于选择器内部的选择器的样式。
在下面的例子设置了四个样式：
- p{ }: 为所有 p 元素指定一个样式。
- .marked{ }: 为所有 class="marked" 的元素指定一个样式。
- .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
- p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
9、CSS 组合选择符
在 CSS3 中包含了四种组合方式:
- 后代选择器(以空格 分隔)
- 子元素选择器(以大于 > 号分隔）
- 相邻兄弟选择器（以加号 + 分隔）
- 普通兄弟选择器（以波浪号 ～ 分隔）
后代选择器
后代选择器用于选取某元素的后代元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好</title>
<style>
div p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>
子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好</title>
<style>
div>p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<div>
<span><p>I will not be styled.</p></span>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好</title>
<style>
div+p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>文章标题</h1>
<div>
<h2>DIV 内部标题</h2>
<p>DIV 内部段落。</p>
</div>
<p>DIV 之后的第一个 P 元素。</p>
<p>DIV 之后的第二个 P 元素。</p>
</body>
</html>
后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好</title>
<style>
div~p
{
background-color:yellow;
}
</style>
</head>
<body>
<p>之前段落，不会添加背景颜色。</p>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>
🎁结语：
本次精彩内容已圆满结束！希望各位读者在阅读过程中能够收获满满。在此，特别感谢各位读者的支持与三连赞。如果文章中存在任何问题或不足之处，欢迎在评论区留言，大星必定会认真对待并加以改进，以便为大家呈现更优质的文章。你们的支持与鼓励，将是博主不断前进的最大动力。再次感谢大家的陪伴与支持！
3053
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
