CSS样式与选择器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/coco_astrids/article/details/53573085

CSS(Cascading Style Sheat，层叠样式表)和表格、框架一样，是一种页面布局方式，但相对于后两者来说，CSS是一种标准的格式化网页方式，是一种主流的网页布局方式。用于控制网页样式，并允许样式信息与网页内容分离的一种技术。所以，在传统的HTML进行网页设计时存在大量的缺陷，如果在HTML页面引入了CSS技术，情况将得到明显改善。使用CSS带来的好处：

1. 将格式和结构分离

格式和结构的分离，有利于格式的重用及网页的修改维护。

2. 精确控制页面布局

能够对网页的布局、字体、颜色、背景等图文效果实现更加精确的控制。

3. 制作体积更小、下载更快的网页

CSS只是简单地文本，使用它可以减少表格标记、图像用量及其他加大HTML体积的代码。

4. 可以实现许多网页同时更新

利用CSS样式表，可以将终点上的多个网页都指向同一个CSS文件，从而更新这个CSS文件时，可实现多个网页同时更新。

CSS区块属性：

主要用于设置区块的大小、边距、间距以及浮动特性等样式。常见的区块属性如下表：

属性	描述
width	设定对象的宽度
height	设定对象的高度
float	让文字环绕在一个元素的周围
clear	禁止浮动元素出现在所属对象旁边
padding	设置内边距，即区块边框与内容的间距，它包括了top,right,bottom,left四个属性，分别用于设定上下左右方向的填充距离。
margin	设置外边距，即区块与周围元素之间的距离，它包括了top,right,bottom,left四个属性，分别用于设定上下左右方向的填充距离。

CSS基本选择器：

“对象”，“属性”，“属性值”构成了CSS的三个组成部分，“对象”是很重要的，它制定了对哪些网页元素进行样式设置，这个“对象”在CSS定义中称为“选择器(selector)”。所有HTML语言中的标记样式都是通对应的CSS选择器进行控制的。在CSS中，根据选择器的构成形式，可分为基本选择器和复合选择器。基本选择器包括：HTML标记选择器、类选择器和ID选择器；复合选择器是通过对基本选择器进行组合构成的。

HTML标记选择器

<style>

div{

border-color:red;

border-width:10px;

}

</style>

类选择器

使用HTML标记选择器可以设置页面中所有相同标记的统一格式，但如果需要对相同标记中某些个别标记做特殊效果设置，使用HTML标记选择器就无法实现了，徐引入其他选择器。类(class)选择器允许以一种独立于文档元素的方式来指定样式。

.classname{

border-width:10px;

}

示例：

代码实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>web期末复习+CSS</title>
 <style type="text/css">
   div{
      border-style:solid;
	  border-width:10px;
	  border-color:blue;
	  margin:20px;
	  background:#999999;
	  width:600px;
   }
   .al{
      border-style:solid;
	  border-width:10px;
	  border-color:red;
	  margin:20px;
	  background:#FFFFCC;
	  width:800px;
   }
 </style>
</head>
<body>
 <div>示例1</div>
 <div>示例2</div>
 <div class="al">示例3</div>
</body>
</html>

ID选择器

ID选择器跟类选择器的功能一样，两者主要区别在于它们的选择器的前缀符号不同；另外，ID名称在HTML页面中必须唯一，而类选择器在HTML页面中可以重名，这是由ID属性是用来唯一标识一个元素所决定的，因而通常通过id明来操作HTML元素。

#IDname{

border-color:red;

}

三种选择器示例：

代码实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>web期末复习+CSS</title>
 <style type="text/css">
   div{
      border-style:solid;
	  border-width:10px;
	  border-color:blue;
	  margin:20px;
	  background:#999999;
	  width:600px;
   }
   .al{
      border-style:solid;
	  border-width:10px;
	  border-color:red;
	  margin:20px;
	  background:#FFFFCC;
	  width:800px;
   }
   #sov{
      border-width:5px;
	  border-color:pink;
	  border-style:solid;
	  margin:10px;
	  width:800px;
	  background:white;
   }
 </style>
</head>
<body>
 <div>示例1</div>
 <div>示例2</div>
 <div class="al">示例3</div>
 <div id="sov">I am a slow walker, but I never get back!</div>
</body>
</html>

复合选择器

交集选择器

交集选择器是由两个选择器直接连接构成的，其中第一个选择器必须是HTML标记选择器，第二个选择器必须是类选择器或ID选择器。两个选择器之间必须连续写，不能有空格。

示例：

代码实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>web期末复习+CSS</title>
 <style type="text/css">
   div{
      border-style:solid;
      border-width:10px;
      border-color:blue;
      margin:20px;
      background:#999999;
      width:600px;
   }
   .al{
      border-style:solid;
      border-width:10px;
      border-color:red;
      margin:20px;
      background:#FFFFCC;
      width:800px;
   }
   div.al{
      border-color:red;
      background:#999999;
   }
 </style>
</head>
<body>

<div>普通效果</div>
 <div class="al">交集选择器效果</div>
 <p class="al">类选择器效果</p>
</body>
</html>

并集选择器

并集选择器是由两个或两个以上的任意选择器构成，不同选择器之间使用逗号隔开。它的特点所设置的样式对并查选择器中的各个选择器都有效，并集选择器的作用是把不同的选择器的相同样式定义抽取出来放到一个地方做一次定义，从而极大简化CSS代码量。

示例：

代码实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>web期末复习+CSS</title>
 <style type="text/css">
   div{
      border-style:solid;
      border-width:10px;
      border-color:blue;
      margin:20px;
      background:#999999;
      width:600px;
   }

h1,h2,div{
      background:#999999;
   }
 </style>
</head>
<body>

<div>并集选择器效果</div>
 <h1>并集选择器效果</h1>
 <h2>并集选择器效果</h2>
</body>
</html>

后代选择器

CSS选择器可以通过嵌套的方式对特殊位置的HTML标记进行声明，如<div>标记中包含<p>标记，就可以通过后代选择器进行控制。后代选择器的写法是：嵌套外层的标记写在前面，内层的标记写在后面，中间用空格隔开。内层标记称为外层标记的后代。

div p{

border-width:10px;

font-size:20px;

}

示例：

代码实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>web期末复习+CSS</title>
 <style type="text/css">
   div{
      border-style:solid;
      border-width:10px;
      border-color:blue;
      margin:20px;
      background:#999999;
      width:600px;
   }

p{
      background:#99FF33;
   }
   div p{
      background:#FFFF99;
      border-style:solid;
      border-width:10px;
      border-color:blue;
   }
 </style>
</head>
<body>

<div>不是后代选择器效果</div>
 <p>不是后代选择器效果</p>
 <div>后代选择器<p>效果</p></div>
</body>
</html>

后代选择器不仅可以使用HTML标记选择器进行嵌套，也可以使用类选择器和ID选择器。