本文介绍了CSS的基础知识，包括CSS的作用、引用方式（行内样式、内部样式、外部样式）、代码基本格式、基本样式设置、常用复合选择器（交集、并集、后代、子代、相邻、兄弟元素选择器）及其使用，以及CSS的三大特性。内容详细阐述了如何通过CSS来装饰和布局HTML文档。
1.什么是CSS？
层叠样式表（Cascading Style Sheets，简写CSS），是一种用来为HTML文档添加样式（字体、间距、位置、颜色、角度等显示效果）的计算机语言。
HTML是内容的展示，CSS是内容的装饰。
2.CSS的引用方式
2.1行内样式
<div style="存放该元素的CSS样式代码"></div>
在开始标签的内部可以设置一个叫做style的属性，属性的双引号内存放该元素代码的CSS样式。
<!-- css的引用方式 -->
<!-- 1.行内样式表（不推荐使用） -->
<!-- color:red: 文本颜色 -->
<!-- 只针对当前标签生效，写重复样式就会很影响效率 -->
<div style="color: blue;">天青色等烟雨，而我在等你。</div>
2.2内部样式
<head>
<style>/*层叠样式表：CSS，专门用来装饰网页内容的显示效果*/
<style>
</head>
在head标签中间新建一个style标签，该标签内部存放的就是网页文件中的CSS代码
CSS中的代码注释格式采用的是：/注释文字 /
<!-- 2.内部样式表：在头部添加一个style双标签（在练习时使用） -->
<!-- 此样式表只应用于当前文档 -->
<head>
<style>
/需求：给h1标签设置字体颜色 /
h1{
color: red;
}
</style>
<head>
<body>
<h1>不是风动，不是幡动，仁者心动</h1>
<body>
2.3外部样式
<!-- 3.外部样式表：
3.1在外部新建一个后缀名为.css的文件
3.2通过link标签关联css文件。link标签写在head标签中（推荐使用，结构与表现互相分 离，更清晰，更整体） -->
<link rel="stylesheet" href="css/index.css">
在head标签中间新建一个link标签，通过href属性设置外部CSS文件地址。
rel是relationship的缩写（指定当前文档与被链接文档的关系）rel=“stylesheet”表示我们引用的是一个样式表（CSS）文件。
<!-- 用于连接外部样式表 -->
<!-- rel="stylesheet" 声明这是一个样式文件-->
<!-- type：指定其格式为text/css -->
href和src的定义与区别
1.href (Hypertext Reference）网络资源的位置，浏览器识别当前资源是一个样式表，页面解析不会暂停（由于浏览器需要样式规则去渲染页面，渲染过程可能会被暂停）。这与把css文件内容写在
3.CSS代码的基本格式
3.1元素/标签命名的基本格式
网页中除去DTD标签和注释标签，皆可称呼为元素，元素即是标签，标签即是元素。
选择器：选择元素的器具或是工具。
class命名的元素使用: . + 元素名称，来找到一个元素。
id命名的元素使用: # + 元素名称，来找到一个元素。
或是直接写上标签的名称：如，div,p,h1等也可以直接找到元素。
标签选择器：h1-h6, div,span,p,ul,li,ol,dl,a,img等等。
class命名（别称：类名）： 谁都可以取，可以取任意次。
类选择器：在标签中添加一个属性，class=“类名”，理解为：取的别名。
id命名：只能是唯一的，一旦被使用了一次，其他人再也不能用。
id选择器：在标签中添加一个属性，id=“id名”，具有唯一性，体现在操作js的时候。
id选择器和类选择器区别：
1.W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
2.类选择器，好比人的名字，是可以多次重复使用的，比如张伟、王伟、李伟。
3.id选择器，好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。
4.为避免代码出现冲突，大骨架用id命名，里面的小结构用class。
CSS命名规范：
-
必须以字母开头命名选择器，这样可保证在所有浏览器下都能兼容；
-
不允许单个字母的类选择器出现；
-
不允许命名带有广告等英文的单词，例如ad、adv、adver、advertising，以防止该模块被浏览器当成垃圾广告过滤掉；
-
一律小写；
-
尽量用英文；
-
不加中杠和下划线；
-
尽量不缩写，除非一看就明白的单词。
条样式代码的设置格式为：
样式名称:样式值;
样式名称+冒号+样式值+分号*
注：所有符号皆为英文符号，不得使用中文符号
4.CSS基本样式
.box1 {
/* 一、 尺寸样式，设置宽高：宽width 高height /
width: 800px;
height: 100px;
/ 二、 位置样式 /
/ 水平位置 /
margin-left: 30px;
margin-right: 20px;
/ 垂直位置 /
margin-top: 50px;
margin-bottom: 20px;
/ 复合写法 /
/ 四个参数：上 右 下 左 /
margin: 50px 20px 20px 30px;
/ 两个参数：上下 左右 /
margin: 20px 30px;
/ 一个参数：四个方向距离一致 /
margin: 50px;
/ 清除默认边距 /
margin: 0;
/ 三、 背景颜色 /
/ 颜色值三种写法：
1.颜色的单词；
2.rgb(0-255,0-255,0-255)；rgba(0-255,0-255,0-255,0-1)最后一位为颜色透明度
3.十六进制数，三位或六位。/
background-color: yellow;
/ 四、 文字样式 /
/ 文字大小，浏览器默认渲染14px /
font-size: 20px;
/ 文字字体 /
font-family: SimSun;
/ 文字颜色，颜色写法和背景颜色一致 */
color: green;
5.常用复合选择器的使用
5.1交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
.son {
color:blue;
}
/* h1标签中有一个类名叫son */
h1.son{
color: yellow;
}
/* h1标签中有一个id名叫red */
h1#red{
color:red;
}
/* 类名为son的标签中，有一个id名为red */
.son#red{
color: purple;
}
5.2并集选择器
并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的。
任何形式的选择器（包括标签选择器、class类选择器、id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
p {
color:red;
}
.hong {
color:red;
}
p,
.green {
color: green;
}
5.3后代元素选择器
后代元素选择器是一个空格，空格前后各有一个选择器。作用是：找到空格前的选择器所选中的元素的后代元素中符合空格后选择器的要求的元素。
.box ul li {
color: orange;
}
5.4子代选择器
子代元素选择器是一个大于号，大于号前后各有一个选择器。作用是：找到大于号的选择器所选中的元素的子元素中大于号后选择器的要求的元素。
.box>ul {
color: pink;
}
5.5相邻元素选择器
相邻元素选择器是一个+号，作用是：找到加号前的选择器所选中的元素紧跟其后第一个符合+号后选择器选中的元素。
.main>ul+div {
color: aqua;
}
5.6兄弟元素选择器
兄弟元素选择器是一个号（波浪号），作用是：找到号前的选择器所选中的元素紧跟其后所有**符合~号后的选择器选中的元素。
.main>ul~div {
background-color:yellow;
}
作用是：找到空格前的选择器所选中的元素的后代元素中符合空格后选择器的要求的元素
5.7CSS的三大特性
1.继承性，子承父业
.father {
color: red !important;
}
2.层叠性，即覆盖性：就近原则
h1 {
color: pink;
}
浏览器的执行顺序：从上到下解析的
h1 {
color: blue;
}
3.优先级：3.1 标签选择器的权重：1分；
3.2 类选择器的权重：10分；
3.3 id选择器的权重：100分；
3.4 行内样式的权重：大于100分，小于无穷大；
3.5 提高选择器的权重： !important,权重无穷大，继承的权重为0.
6.样式优先级
扫一扫
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
