本文介绍了CSS的基础知识，包括样式表的组成、选择符、声明、三种样式表类型及其优先级。详细讲解了内联式、嵌入式和外部式CSS的用法，以及选择器如标签选择器、类选择器和ID选择器。还涉及CSS的优先级、继承、盒模型、布局模型和居中技巧等核心概念。
CSS（Cascading Style Sheets）：层叠样式表，主要用于定义HTML内容在浏览器内的显示样式。
CSS样式由选择符和声明组成，声明由属性和值组成。
选择符：又称选择器，指明网页中要应用样式规则的元素。
声明：声明放在英文大括号中”{}“，属性和值之间用冒号：分隔，多个声明之间用分号；分隔。
CSS注释：/*注释语句*/
内联式css：内联式CSS样式表就是把CSS代码直接写在现有的HTML标签中。要写在元素开始标签里，CSS代码写在style=""双引号中，如果有多条CSS代码中间用分号隔开。
如：
<p style="color:red"这里文字是红色。></p>嵌入式css：把css代码写在<style type="text/css"></style>中，嵌入式css样式必须写在<style></style>之间，并且嵌入式css样式一般写在<head></head>之间。
外部（联）式css样式：将css代码代码单独写在一个文件中，这个css样式文件以".css"为扩展名。在<head></head>标签内使用<link>标签将css样式文件链接到HTML文件内。
<link href="main.css" rel="stylesheets" type="text/css" />三种样式优先级：内联式>嵌入式>外部式， 嵌入式>外部式 前提：嵌入式css样式的位置一定在外部式的后面。离被设置元素越近优先级越高。
选择器：选择器指明了{}的样式作用的对象
选择器{
样式;
}标签选择器：为标签设置样式
类选择器：英文圆点开头，类选择器名字可以任意取，但是不能取中文
.类选择器名称{
样式代码：
}.setColor{
color:red;
} /* 设置类选择器*/
<span class=".setColor">作用对象</span> /*使用*/
ID选择器：
#ID选择器{
样式代码;
}#setGreen{
color:green;
} /*设置*/
<span id="setGreen">作用对象</span>类和ID选择器的区别：ID选择器只能在文档中使用一次。可以使用类选择器词列表方法为一个元素同时设置多个样式，不能使用ID词列表。
.setColor{
color:red;
}
.setSize{
size:20px;
}
<span class="setColor setSize">作用对象</span> /*合法*/
#setColorID{
color:red;
}
#setSizeID{
size:20px;
}
<span id="setColorID setSizeID">作用对象</span> /*不合法*/
子选择器：>选择指定标签的第一代子元素
.food>li{border:1px solid red;} /* 将class名为food下的子元素加入红色实线边框 */包含（后代）选择器：加入空格，选择指定标签下的后辈元素
.fisrt span{color:red;}子选择和包含选择器的区别：子选择器作用于直接后代，或者说是作用于第一代后代。包含选择器作用于所有的子后代元素。
>作用于元素的第一代后代，空格作用于元素的所有后代。
最低0.47元/天 解锁文章
扫一扫
889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
