本文深入解析CSS层叠样式表的基本概念、语法及优势，涵盖内部、外部和内联样式，详细讲解选择器、文本、链接、背景、表格等样式设置，以及标准文档流、盒子模型、浮动等布局技巧。
CSS
基本概念
<!--概念：CSS:层叠样式表(Cascading Style Sheets)
css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。
所谓层叠，可以将整个网页想象成一层一层的结构，层次高的将会覆盖层次低的
css可以分别为网页的各个层次设置样式。
-->
<!--优势:内容与表现分离
网页的表现统一，容易修改。
丰富的样式，使得页面布局更加灵活。
减少网页的代码量，增加网页的浏览速度，节省网络带宽。
运用独立于页面的CSS，有利于网页被搜索引擎搜录。
-->
<!--基本语法
CSS由两个主要的部分构成：选择器，以及一条或多条声明。
CSS声明总是以分号(;)结束，声明组以大括号({})括起来：
p {color:red;text-align:center;}
为了让CSS可读性更强，你可以每行只描述一个属性。
实例：
p{color:red; text-align:center;}
-->
<!--注释
CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:
/*这是个注释*/
p{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;}
-->
样式的优先级内联样式>内部样式>外部样式
内部样式
<!--内部样式:当单个文档需要特殊的样式时，就应该使用内部样式表。
你可以使用<style>标签在文档头部定义内部样式表。-->
<style>
p{
background-color: pink;
color: white;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<p>使用内部样式将改变这段文字的颜色</p>
</body>
内联样式
<!--由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。
请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。
style 属性可以包含任何 CSS 属性。
也可以多重样式重叠-->
</head>
<body>
<p style="color: red; font-size: 20px;">使用内联样式该表这段文字的颜色</p>
外部样式
<!--外部样式表:当样式需要应用于很多页面时，外部样式表将是理想的选择
在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。
每个页面使用<link>标签链接到样式表。link标签在文档的头部-->
<link rel="stylesheet" href="../css/style.css" />
</head>
<body>
<p>使用外部样式表改变这段文字的颜色</p>
<!--浏览器会从文件style.css中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。
文件中不能包含任何的HTML标签。
样式表应该以.css扩展名进行保存-->
文本样式
<style>
.p1{/*类选择器*/
text-align: left;
color: deepskyblue;
text-decoration: none;
}
.p2{
text-align: center;
color: red;
text-decoration: underline;
}
.p3{
text-align: right;
color: hotpink;
text-decoration: line-through;
}
.p4{
text-align: center;
text-decoration: overline;
}
</style>
</head>
<body>
<!--
1.text-align:设置文本水平对齐方式，常用值：
left right center
2.line-height:设置文本行高属性
3.text-indent：设置文本首行缩进
4.text-decoration:设置文本装饰
常用属性：none 默认值：标准 （常用在超链接设置，超链接默认属性是text-decoration：underline）
underline：设置文本下划线
overline:设置文本上划线
line-through：设置文本删除线
-->
<p class="p1">
日照香炉生紫烟，
</p>
<p class="p2">
遥看瀑布挂前川。
</p>
<p class="p3">
飞流直下三千尺，
</p>
<p class="p4">
疑是银河落九天。
</p>
背景样式
<style>
p{
background-color: deepskyblue;
}
div{
width: 500px;
height: 300px;
border: 1px deepskyblue solid;
background-image: url(../image/1.jpg);
}
</style>
</head>
链接样式
<style>
a{
text-decoration: none;
}
/*未访问链接:红色*/
a:link{color: red;}
/*已访问链接:绿色*/
a:visited{color: green;}
/*鼠标移动到链接上:紫色*/
a:hover{color: purple;}
/*鼠标点击时:蓝色*/
a:active{color: blue;}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a><br />
列表样式
<style>
/*空心圆圈*/
.ul1{list-style-type: circle;}
/*方形*/
.ul2{list-style-type: square;}
/*实心圆圈*/
.ul3{list-style-type: disc;}
/*图像作为列表项标记*/
.ul4{list-style-image:url(../image/arrow-icon.gif) ;}
nav{
width: 960px;
margin: 0px auto;
border: 1px aquamarine solid;
}
nav ul li{
display: inline-block;
width: 100px;
list-style-type: none;
}
</style>
表格样式
<!--如果需要把表格显示为单线条边框，请使用 border-collapse 属性。-->
<style>
table{
width: 500px;
border: 1px greenyellow solid;
text-align: center;
margin: 0px auto;
/*边框合并*/
border-collapse: collapse;
}
/*设置表头样式*/
table thead{
background-color: gray;
}
</style>
标签选择器
<!--标签选择器(元素选择器)
文档的元素就是最基本的选择器
如果设置HTML的样式，选择器通常将是某个HTML元素，比如p、h1、em、a-->
<style>
div{
background-color:greenyellow ;
}
h1{
color: pink;
}
</style>
ID选择器
<!--ID选择器：要给添加样式的标签设置一个ID名称
可以为标有特定ID的HTML元素指定特定的样式(独一无二)
HTML元素以Id属性来设置ID选择器，CSS中ID选择器以"#"符号来定义。-->
<meta charset="utf-8" />
<style>
#menu{
width:500px;
background-color: gray;
font-size: 20px;
}
#menu ul li{
list-style-type: none;
width: 100px;
float: left;
}
</style>
Class选择器
<!--类选择器：就是给要添加样式的标签加上一个类名，关键字class
用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用
在HTML中以class属性表示，在CSS中类选择器以一个点"."符号显示。
语法：.类名（例如:.class1{..}）
-->
<style>
.test1{
color: blue;
font-weight: bold;
}
</style>
并集选择器
<!--并集选择器:创建由逗号分隔的多个选择器可以将样式应用到单个选择器匹配的所有元素
或者理解成将多个相同样式定义的选择器以逗号进行分组。
语法：选择器，选择器，选择器{}-->
<style>
header,main{
height: 200px;
border: 1px deepskyblue solid;
}
#home,.p1{
color: red;
}
</style>
后代选择器
<!--多个选择器以空格分开，组合成包含关系，且右边的选择器从属于左边
即右边的选择器只能在左边的选择器范围内选择-->
<style>
#menu h1{
color: red;
}
</style>
子元素选择器
<!--子代选择器和后代选择器很像，不过只选择匹配元素中的直接后代
目标元素为匹配第一个选择器的元素的直接后代,且匹配第二个选择器
用于选择指定标签元素的第一代子元素
语法：第一个选择器>第二个选择器
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。-->
<style>
/*第一代子元素*/
.food > li{
background-color: mistyrose;
}
/*后代元素中的第一个子元素*/
.food > li:first-child{
background-color: gray;
border: 1px salmon solid;
}
/*第一代子元素中的最后一个子元素*/
.food > li:last-child{
background-color: blueviolet;
}
.food > li:first-child ul li:first-child{
color: crimson;
}
</style>
兄弟选择器
<!--相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。-->
<style>
h1+#p1{
color: red;
}
.p2+p{
color: blue;
}
</style>
</head>
<body>
<div class="test1">
<h1>山东省景点</h1>
<p id="p1">五岳独尊-泰山</p>
<p>孔孟之乡-济宁</p>
<p class="p2">江北水城-聊城</p>
<p>人间仙境-蓬莱</p>
</div>
伪类选择器
<!--动态伪类选择器：根据条件的改变匹配元素，是相对于文档的固定状态来说的。
:link选择器 选择未访问链接元素
:visited选择器 选择已访问的链接元素
:hover选择器 鼠标悬停在其上的元素
:active选择器 被用户激活的元素，通常意味着用户即将点击该元素 -->
<style>
nav{
width: 500px;
}
nav ul{
list-style-type: none;
}
nav ul li{
float: left;
margin: 10px;
}
/*未访问超链接的样式*/
nav ul li a:link{
color: red;
text-decoration: none;
}
/*鼠标点击后的超链接样式*/
nav ul li a:visited{
color: gray;
text-decoration: none;
}
/*鼠标悬浮超链接的样式*/
nav ul li a:hover{
color: yellow;
text-decoration: none;
}
/*鼠标点击超链接样式*/
nav ul li a:active{
color: blueviolet;
text-decoration: none;
}
属性选择器
<!--属性选择器:对带有指定属性的 HTML 元素设置样式
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。-->
<style>
a[href="#"]{
color: red;
font-size: 30px;
}
img[alt=dog]{
border: 1px salmon solid;
}
form input[name='UserName']{
background-color: red;
color: white;
}
</style>
<meta charset="utf-8" />
</head>
<body>
<a href="#" title="百度">百度一下</a><br />
<img id="img1" src="../image/1.jpg" alt="dog" title="小狗" width="70" height="70" />
<form name="input" action="" method="get">
<input type="text" name="UserName" value="zhangsan" size="20" /><br />
<input type="button" value="submit" />
</form>
标准文档流
概念
1.标准文档流：按照标签的顺序正常排列
2.非标准文档流：一个标签脱离了标准文档流
行内元素和块级元素
1.行内元素（内联元素）：只占内容的宽度（默认不换行）。
如span,strong,input,select,lable,a,image
2.块级元素：占用了全部宽度，是垂直方向布局
如h1-h6,p,form,table,div,ul,ol,dl
联系
都可以通过display属性进行切换
区别
1.块级元素独占一行，行内元素不会独占一行，相邻的行内元素可以排在同一行
2.块级元素可以设置宽度和高度，行内元素无法设置宽度和高度
<style>
/*将行内元素变为块级元素*/
.red,.blue{display: block;width: 300px;height: 100px;}
.purple{background-color: purple;}
.gray{background-color: gray;}
/*将块级元素变为行内元素*/
.purple,.gray{display: inline;}
ul li{display: inline-block;width: 150px;}
</style>
display
- inline:行内元素
- block:块级元素
- Inline-block:既是块级元素，又是行内元素
隐藏元素
方式
- display属性：设置一个元素是如何显示
- visibility属性：指定一个元素是否可见
区别
1.visibility中的hidden可以隐藏某个元素，但是仍然占据空间，虽然被隐藏，但会影响布局
2.display中的none也可以隐藏元素，但隐藏的元素不会占用空间，元素会消失
.hidden{visibility: hidden;}
.none{display: none;}
</style>
</head>
<body>
<h2>山东省</h2>
<span>青岛</span>
<span>济南</span>
<span class="hidden">烟台</span>
<span>潍坊</span>
<span class="none">临沂</span>
盒子模型—内外边距
- 设置1个值：上右下左
- 设置2个值：上下、左右
- 设置3个值：上、左右、下
- 设置4个值：上、右、下、左
浮动
概念
设置某个元素的浮动行为，将元素脱离常规的文档流，向左或向右移动，直到碰到父元素的边框。
实现—float属性
1.left:左浮动
2.right:右浮动
3.none:默认值，不浮动
扫一扫
2356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
