chodenke

HTML及CSS学习笔记 06 - CSS简介和常见的选择器

本文是HTML及CSS课程的第六课。W3C提倡网页的内容与表现分离，层叠样式表（Cascading Style Sheet）即是网页中的“表现”部分，它描述HTML标签将会显示成什么样子。本文介绍层叠样式表的基本概念，及在层叠样式表中常见的选择器类型等内容

文章目录

一、层叠样式表（CSS）介绍
- 1、层叠样式表是什么
- 2、为什么使用层叠样式表
- 3、层叠样式表的格式
- 4、层叠样式表写在哪里
- - 4.1、行内样式
  - 4.2、内部样式
  - 4.3、外部样式
二、几种常见的CSS选择器
- 1、标签选择器
- 2、类选择器
- 3、ID选择器
- 4、伪类选择器
- 5、后代选择器
- 6、子选择器
- 7、属性选择器
- 8、通用选择器
- 9、群组选择器
三、层叠样式表的优先级
- 1、样式优先级
- 2、选择器优先级
- 3、提升样式优先级

一、层叠样式表（CSS）介绍

1、层叠样式表是什么

层叠样式表（英文全称：Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。

在web开发技术初期，HTML的内容和样式没有分离开，如下：

随着web技术的发展，HTML变的越来越杂乱和臃肿。web开发人员建议，把表示样式的代码从HTML中分离出来，并且创建一种规则来定义HTML元素要显示成什么样子，于是便诞生了CSS语言。

在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
下面是一个简单的列子：
HTML：

<body>
  <h1>标题 1h1>
  <p>这是段落中的一些文本。p>
  <p>这是另外一个段落p>
  <hr />
  <h2>标题 2h2>
  <table>
    <tr><th>Nameth><th>E-mailth><th>Phoneth>tr>
    <tr><td>Doe, Johntd><td>[email protected]td><td>555-789-7222td>tr>
    <tr><td>Smith, Evatd><td>[email protected]td><td>555-324-3693td>tr>
  table>
  <br />
  <hr />
  <h3>标题 3h3>
  <p>你应具备的知识:p>
  <ol><li>HTMLli><li>CSSli>ol>
  <p>你最喜欢的饮料:p>
  <ul><li>Smoothieli><li>Green teali><li>Coffeeli>ul>
body>

样式表1：

body {font-size:75%;font-family:verdana,arial,'sans serif';background-color:#FFFFF0;color:#000080;margin:10px;}
h1 {font-size:200%;}
h2 {font-size:140%;}
h3 {font-size:110%;}
table,th,tr,td {border: 1px solid #111111}
table {width: 100%}
th {background-color:#ADD8E6;}
ul {list-style:circle;}
ol {list-style:upper-roman;}

样式表2：

body {font-size:75%;font-family:"lucida calligraphy",arial,'sans serif'; background-color:#DCDCDC;color:#8A2BE2;margin:10px;}
h1 {font-size:200%;}
h2 {font-size:140%;}
h3 {font-size:110%;}
table,th,tr,td {border: 1px solid #111111}
table {width: 100%}
th {background-color:#D3D3D3;}
td {background-color:#FFFAF0;}

页面浏览效果：

说明：

同一份HTML代码，在使用不同的CSS样式表进行修饰时，表现出来的效果会有很大的不同。

2、为什么使用层叠样式表

使内容与表现分离
布局
修饰页面元素

3、层叠样式表的格式

CSS要修饰HTML页面中的元素，就必须先选择（找到）被修饰的元素，这就需要用到CSS选择器。其次，还需要告诉浏览器修饰被选择元素的哪一种属性，如字体、颜色、边框、背景、位置等。最后，还需要说明将被选择元素的该属性修饰成什么样子，即给该属性赋予属性值。综上，层叠样式表的基本格式为：

选择器 {
  属性1: 属性值;
  属性2: 属性值;
  ...
}

4、层叠样式表写在哪里

对应样式表书写的位置，有三种应用样式的方式，分别是行内样式、内部样式、外部样式。

4.1、行内样式

行内样式是将样式源代码按标签属性的形式书写在所要修饰的标签中，行内样式只能由当前标签使用，不具有复用性。行内样式也被称为内联样式。
下面是一个示例：

<body>
  <p>价格：<span style="color:red;font-size:70px;">10span>元p>
body>

页面浏览效果：

说明：

行内样式写在标签的style属性中，style属性是一个全局属性（几乎所有标签所共有的，具有相同含义的属性称之为全局属性），用以表示元素的行内样式。
行内样式省略样式表的选择器部分，因为行内样式已经指定为修饰当前标签。

4.2、内部样式

内部样式将样式源代码写在当前HTML文件中。在当前页面中可以重复使用。
下面是一个示例：


<html>
  <head>
    <title> 内部样式 title>
	<meta charset="utf-8">
	<style type="text/css">
	  span {
	    color: red;
        font-size: 70px;
	  }
	style>
  head>
  <body>
    <p>价格：<span>10span>元p>
	<p>价格：<span>23span>元p>
  body>
html>

页面浏览效果：

说明：

内部样式定义在HTML文件的标签部分中，使用