本文介绍了CSS的基础知识，包括其作用（用于描述网页的布局和格式），使用方法（内联、内嵌和外联样式），以及选择器的优先级。详细阐述了标签选择器、id选择器和类选择器，并探讨了它们之间的区别。此外，还讨论了关系选择器，如兄弟选择器及其在CSS中的应用。最后强调了掌握CSS选择器对于网页美化和布局的重要性。
目录
1.什么是Css
Css全称为Cascading Style Sheets，它是层叠样式表，是描述标记语言页面格式的标准/语言。主要用于描述网页的表示，即布局和格式。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
Css的作用
CSS具有对网页的布局、颜色、背景、宽度、高度、字体进行控制，让网页按您的美工设计布局的更加美观漂亮。
Css的使用方法
通常来说，Css的使用方法可分为以下三种：
1.内联样式：也叫行内样式/行间样式，在开始标签内添加style属性并设置css样式。
<h1 style="color: red;">一级标题</h1>2.内嵌样式：也叫内部样式，在HTML中的head标签中添加并按照固定格式设置css样式。
<style>
h1{
font-size: 60px;
color: aquamarine;
}
</style>3.外联样式：也叫外部样式，在外部创建一个css文件，在HTML中的head标签中通过link引入css文件。
<link rel="stylesheet" href=""> 其中内嵌样式的有点为可以重复使用代码。
优先级：
正常情况下：行内样式——内部样式——外部样式。
特殊情况下：行内样式——内部样式/外部样式（按照在头标签里面的先后顺序，以浏览器的执行顺序判断优先级）。
2.Css的基本选择器
Css中众所周知的基本选择器有三种：
1.标签选择器
例如：
<style>
h1{
background-color: aqua;
font-size: 20px;
}
</style>
</head>
<body>
<h1>标签选择器</h1>
</body>2.id选择器
例如：
<style>
#first{
background-color: blueviolet;
}
</style>
</head>
<body>
<h1 id="first">id选择器</h1>
</body>3.类选择器
例如：
<style>
.lei{
background-color: blueviolet;
}
</style>
</head>
<body>
<h1 class="lei">类选择器</h1>
</body>类选择器与id选择器的区别
1.类选择器的前缀不同于id选择器的前缀，类选择器一般以“.”为前缀，而id选择器以“#”为前缀。
2.class中可以添加很多个类名，中间以空格隔开。而id名只能有一个。
3.id的优先级：给同一个元同时使用class类名设置相同的css样式，优先执行id选择器内的css样式。
4.id唯一性：在js中一整个页面中一个id只能出现一次。
3.Css中关系选择器
Css中关系选择器的元素之间的关系有：
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
其中关系选择器可以分为：
子选择器：在嵌套中通过外层元素一层一层的找到某个后代选择器
#box>div>h4 {
background-color: aqua;
}
后代选择器：在嵌套中通过外层元素直接找到/一层一层找到某个后代元素
#box span {
color: red;
}兄弟选择器
兄弟选择器：也叫并集选择器，同时选择多个标签，设置相同样式。
格式：兄弟，兄弟
p,#box {
background-color: #ffc;
}相邻兄弟选择器：
格式：兄弟+相邻兄弟
div p+div{
background-color: #cfc;
}其含义是选择所有页面中紧邻着p元素之后的第一个div元素。
另外一种格式是兄弟~兄弟，其代表的含义是设置同一个div元素下的p元素之后的每一个元素的背景颜色。
#box span {
color: red;
}Css选择器优先级
id选择器——类选择器——标签名选择器——子选择器——后代选择器——伪类选择器
总结
Css的使用方法以及其各种选择器的使用是基础但是必须需要掌握的内容，如何正确的使用选择器并且对页面进行合理的美化以及布局是接下来的重中之重。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
