CSS(1)---css语法、css选择器

一、CSS语法

1、CSS语法

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

属性是您希望设置的 样式属性。每个属性有一个属性值。属性和属性值被冒号分开。

示例

 <!--  这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素 -->

     h1 {color:red; font-size:14px;}

  <!-- 在这里，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。 -->

二、CSS三种引入方式

CSS三种引入方式有：行内样式、内部样式表、外部样式表。

1、行内样式

它是通过标签的 style属性 来设置元素的样式，

基本语法示例：

<!--使用行内样式引入CSS-->

 <body>

     <p style="color:blue; font-size:40px">欢迎访问雨点的博客。</p>

 </body>

建议 实际在写页面时不提倡使用，在测试的时候可以使用。

2、内部样式表

在 style标签 中书写CSS代码。style标签写在head标签中。

其基本语法示例：

<head>

  <!--使用内部样式表引入CSS-->

  <style type="text/css">

    div{

        background: green;

    }

  </style>

</head>

3、外部样式表

CSS代码保存在扩展名为.css的样式表中。有两种方式：链接式、导入式。

基本语法示例：

<head>

  <!--链接式:推荐使用-->

  <link rel="stylesheet" type="text/css" href="css/style.css" />

  <!--导入式-->

  <style type="text/css">

    @import url("css/style.css");

  </style>

</head>

4、三者比较

## 三、CSS基础选择器

基础选择器可以分为: 标签选择器、类选择器、 id选择器、通配符选择器。

1、标签选择器

标签选择器（元素选择器）是指用 HTML标签名称 作为选择器，按标签名称分类，为页面中同一类标签指定统一的CSS样式。基本语法示例：

<!-- 示例 这里h1就是标签-->

h1 {color:red; font-size:14px;}

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

2、类选择器

类选择器使用 .（英文点号）进行标识，后面紧跟类名。

基本语法示例

 <head>

    <style type="text/css">

        .center {text-align: center}

   </style>

</head>

注意：类名的第一个字符不能使用数字！

3、 id选择器

id选择器使用 # 进行标识，后面紧跟id名，其基本语法示例：

 <head>

    <style type="text/css">

        #red {color:red;}

        #green {color:green;}

   </style>

</head>

id选择器和类选择器区别

类选择器：好比人的名字,是可以多次重复使用的。

id选择器：好比人的身份证号码,是唯一的不能重复。

4、通配符选择器

通配符选择器用 * 号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

* {

  margin: 0;                    /* 定义外边距*/

  padding: 0;                   /* 定义内边距*/

}

四、CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

复合选择器有:交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、伪类选择器。

1、交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如p.className。

基本语法

示例

<!DOCTYPE html>

<html>

<head>

	<title>Document</title>

	<style>

		div.red {  /*交集选择器  既要满足是 div 标签 又要满足class叫 red*/

			color: red;

		}

	</style>

</head>

<body>

	<div>交集选择器</div>

	<div class="red">交集选择器</div>  <!-- 只有这个会变红 -->

	<p class="red">交集选择器</p>

</body>

</html>

2、并集选择器

并集选择器，只要满足一个就可以。比如 .className, h1 , #id {color: #F00;} 表示 .className 和 h1 和 #id 这三个选择器都会执行颜色为红色。通常用于集体声明。

示例

<!DOCTYPE html>

<html>

<head>

	<title>并集选择器</title>

	<style>

    /*1. 只要满足其中一个就会变红*/

    div, p, span {   /*并集选择器  用逗号隔开 */

    	color: red;

    }

	</style>

</head>

<body>

	<div>并集选择器</div>

	<p>并集选择器</p>

	<span>并集选择器</span>

	<h1>并集选择器</h1>  <!-- 只有这一个不会变红 -->

</body>

</html>

3、后代选择器

后代选择器又称为包含选择器，一般标签里面又会包含标签,那么内层标签就为外层标签的后代。

示例

<!DOCTYPE html>

<html>

<head>

	<title>后代选择器</title>

	<style>

	div p  {   /* 后代选择器  p 一定是 div 的孩子 */

		color: red;

	}

	</style>

</head>

<body>

	<div> 后代选择器 </div>

	<div>

	    <p>后代选择器</p>   <!-- 只有它变红 -->

	</div>

</body>

</html>

4、子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。

后代选择器跟子元素选择器的区别

后代可以是亲儿子、亲孙子、亲重孙子之类的，而子代只是亲儿子。所以后代选择器的范围更广些。

示例

<!DOCTYPE html>

<html>

<head>

	<title>Document</title>

	<style>

	ul li > a {  /*这里表示 ul的后代中的li的亲儿子才会有效  */

			color:red;

	}

	</style>

</head>

<body>

	<ul>

		<li>

			<a href="#">一级菜单</a>    <!-- 只有这个是li的亲儿子，所以只有它会变红 -->

			<div>

				<a href="#">二级菜单</a>  <!-- 这三个只是li的后代但并不是亲儿子，所以不会变红 -->

				<a href="#">二级菜单</a>

				<a href="#">二级菜单</a>

			</div>

		</li>

	</ul>

</body>

</html>

5、相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

6、伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

为了和我们刚才学的类选择器相区别，类选择器是一个点比如 .className {} 而我们的伪类用 2个点就是冒号比如 :link{}。

示例

<!DOCTYPE html>

<html>

<head>

	<title>Document</title>

	<style>

	a:link {  /* 未访问过的连接状态*/

		color: #3c3c3c;

		font-size: 25px;

		text-decoration: none;  /*取消下划线*/

		font-weight: 700;

	}

	a:visited {  /*这个链接我们已经点过的样子  已访问过链接*/

		color: orange;

	}

	a:hover {  /*鼠标经过连接时候的样子*/

		color: #f10215;

	}

	a:active {  /*鼠标按下时候的样子*/

		color: green;

	}

	</style>

</head>

<body>

	<a href="http://www.oujiong.com">点击</a>

</body>

</html>

参考

有关CSS选择器上面也只是讲了一部分，更多的可以看w3school官方文档。当你需要怎么样的选择器到这里查找就可以。

1、w3school-CSS 教程

2、CSS 选择器参考手册

你如果愿意有所作为，就必须有始有终。(3)