HTML学习笔记 06 - CSS和常见选择器简介_用css设计早发白帝城-优快云博客

本文链接：https://blog.youkuaiyun.com/Class013/article/details/105937534

一、层叠样式表

1、什么是CSS

层叠样式表（英文全称：Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。
再web开发技术初期，HTML的内容和样式没有分离开，随着web技术的发展，HTML变的越来越杂乱和臃肿。web开发人员建议，把表示样式的代码从HTML中分离出来，并且创建一种规则来定义HTML元素要显示成什么样子，于是便诞生了CSS语言。

2、CSS的作用

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

3、CSS的格式

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

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

4、CSS的书写位置

4.1、行内样式

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

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

说明：

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

4.2、内部样式

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

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

说明：

内部样式定义在HTML文件的<head>标签部分中，使用<style>标签定义。
需要在<style>标签中添加属性及对应的值type="text/css"。
上例中的选择器为span，表示选择页面中的所有<span>标签。

4.3、外部样式

外部样式是将样式源代码定义在以css为扩展名的独立文件中。HTML文件可以通过<link />标签将外部样式引入。外部样式具有样式代码一次定义，多个HTML页面复用的特点。
实例：

<!DOCTYPE html>
<html>
  <head>
    <title> 外部样式 </title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>价格：<span>10</span>元</p>
	<p>价格：<span>23</span>元</p>
  </body>
</html>

style.css源码：

@charset "utf-8";
span {
  color: red;
  font-size: 70px;
}

说明：

<link />标签结尾的/表示标签结束。
rel属性的值为stylesheet，表示引入的文件是定义页面样式的。
href属性的工作原理和在<a>标签中的相同，注意相对路径和绝对路径的问题。
可以在多个HTML文件中同时使用<link />标签，引入同一个样式表文件，实现多个HTML页面复用同一份样式表。

二、常见选择器

1、标签选择器

一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式。

<!DOCTYPE html>
<html>
  <head>
    <title> 标签选择器 </title>
    <meta charset="utf-8">
    <style type="text/css">
      p { text-decoration:underline; }
    </style>
  </head>
  <body>
    <p>李白，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”。</p>
    <p>李白深受黄老列庄思想影响，有《李太白集》传世，诗作中多以醉时写的，代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《梁甫吟》《早发白帝城》等多首。</p>
  </body>
</html>

说明：

标签选择器是一个不带<>的标签名。
页面中所有的标签默认都使用标签选择器的样式。

2、类选择器

类选择器根据类名来选择被修饰的元素。给标签增加一个class属性，然后给class属性填写一个值，这个值叫做类名，之后可以使用.类名作为选择器选择具有该类名的标签。

<!DOCTYPE html>
<html>
  <head>
    <title> 类选择器 </title>
    <meta charset="utf-8">
    <style type="text/css">
      .nav {
        text-decoration: underline;
        font-size: 20px;
      }
      .text-blue {
        color: #0d6aad;
      }
    </style>
  </head>
  <body>
    <ul class="nav text-blue">
      <li>主页</li>
      <li>校友档案</li>
      <li>添加校友</li>
    </ul>
    <h3>兴趣爱好</h3>
    <ul>
      <li>饮酒</li>
      <li>赋诗</li>
      <li>游历山水</li>
    </ul>
  </body>
</html>

说明：

在定义类选择器时，必须以.开头，后面写类名，类名不允许以数字开头，不允许是标签名称。
在使用类选择器时在标签中用class属性引用类名。
在标签的class属性中可以同时引用多个类名，中间以空格隔开。

3、ID 选择器

ID选择器可以为有特定ID的HTML元素指定特定的样式。元素的ID即标签中id属性指定的属性值。ID选择器的格式为#ID。

<!DOCTYPE html>
<html>
  <head>
    <title> ID选择器 </title>
    <meta charset="utf-8">
    <style type="text/css">
      #user-name {
        width: 300px;
      }
      #user-desc {
        width: 300px;
        resize: vertical;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>添加校友</caption>
      <tr>
        <td><label for="user-name">校友名称</label></td>
        <td><input type="text" id="user-name" name="userName" /></td>
      </tr>
      <tr>
        <td><label>校友性别</label></td>
          <td>
            <input type="radio" name="userSex" id="user-male" value="male" checked />
            <label for="user-male">男</label>
            <input type="radio" name="userSex" id="user-female" value="female" />
            <label for="user-female">女</label>
        </td>
      </tr>
      <tr>
        <td><label for="user-desc">校友介绍</label></td>
        <td><textarea name="userDesc" id="user-desc"></textarea></td>
      </tr>
    </table>
  </body>
</html>

说明：

ID选择器以#开头，后接网页元素id属性的值，用来唯一的修饰该元素。
根据元素ID来选择元素，具有唯一性，这意味着同一ID在同一文档页面中只能出现一次。

4、伪类选择器

伪类选择器可以在原有选择器的基础上添加一定的限定条件，当某种情况发生时再选择这个标签。

<!DOCTYPE html>
<html>
  <head>
    <title> 伪类选择器 </title>
    <meta charset="utf-8">
    <style type="text/css">
      a {
        color: yellow;
      }
	  a:link {
        color: blue;
      }
      a:hover {
        color: green;
      }
	  a:active {
        color: red;
      }
	  a:visited {
        color: gray;
      }
    </style>
  </head>
  <body>
    <h1>常用地址</h1>
    <ul>
      <li><a href="https://www.baidu.com">百度</a></li>
	  <li><a href="https://www.1688.com/">阿里巴巴</a></li>
	  <li><a href="https://www.qq.com/">腾讯</a></li>
    </ul>	
  </body>
</html>

说明：

伪类选择器格式为其他选择器:伪类。
选择器a:link选择未访问的链接，和a{}相同并且同时存在时会覆盖a{}。本例中a { color: yellow; }不会起作用。
选择器a:hover选择处于鼠标悬停状态的链接。
选择器a:active选择激活状态（鼠标点击未释放）的链接。
选择器a:visited选择已经被访问过的链接。
注意在CSS代码中，一般a:hover必须位于a:link之后；a:active必须位于a:hover之后（建议按事件发生的顺序记忆）。

5、后代选择器

后代选择器又称派生选择器，有些时候也被称作包含选择器，用来选择特定元素或元素组的后代。

<!DOCTYPE html>
<html>
  <head>
    <title> 后代选择器 </title>
    <meta charset="utf-8">
    <style type="text/css">
	  ol li { 
	    text-decoration: underline;
		color: red;
	  }
    </style>
  </head>
  <body>
    <h3>主要作品</h3>
    <ol>
      <li>728年：《黄鹤楼送孟浩然之广陵》</li>
	  <li>732年：《行路难三首》</li>
	  <li>749年：</li>
	  <ul>
	    <li>《寄东鲁二稚子》</li>
	    <li>《送萧三十一之鲁中兼问稚子伯禽》</li>
        <li>《静夜思》</li>
      </ul>
    </ol>
  </body>
</html>

说明：

后代选择器的格式为选择器1 选择器2 … 选择器n。
后代选择器中的元素不仅仅只能有两个，对于多层祖先后代关系，可以有多个空格加以分开，如id属性为a、b、c的三个元素，则后代选择器可以写成#a #b #c{}的形式，只要对祖先元素的选择在后代元素之前、中间以空格分开即可。

6、子选择器

子选择器用来选择直接后代。

<!DOCTYPE html>
<html>
  <head>
    <title> 子选择器 </title>
    <meta charset="utf-8">
    <style type="text/css">
	  ol>li { 
	    text-decoration: underline;
		color: red;
	  }
    </style>
  </head>
  <body>
    <h3>主要作品</h3>
    <ol>
      <li>728年：《黄鹤楼送孟浩然之广陵》</li>
	  <li>732年：《行路难三首》</li>
	  <li>749年：</li>
	  <ul>
	    <li>《寄东鲁二稚子》</li>
	    <li>《送萧三十一之鲁中兼问稚子伯禽》</li>
        <li>《静夜思》</li>
      </ul>
    </ol>
  </body>
</html>

说明：

子选择器的格式为选择器1>选择器2>…>选择器n。
请注意子选择器与后代选择器的区别，子选择器仅是指它的直接后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过>进行选择。

7、属性选择器

属性选择器作用在具有指定属性名及属性值的标签上。

<!DOCTYPE html>
<html>
  <head>
    <title> 属性选择器 </title>
    <meta charset="utf-8">
    <style type="text/css">
      input[type=text] {
        width: 300px;
      }
      #user-desc {
        width: 300px;
        resize: vertical;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>添加校友</caption>
      <tr>
        <td><label for="user-name">校友名称</label></td>
        <td><input type="text" id="user-name" name="userName" /></td>
      </tr>
      <tr>
        <td><label>校友性别</label></td>
          <td>
            <input type="radio" name="userSex" id="user-male" value="male" checked />
            <label for="user-male">男</label>
            <input type="radio" name="userSex" id="user-female" value="female" />
            <label for="user-female">女</label>
        </td>
      </tr>
      <tr>
        <td><label for="user-desc">校友介绍</label></td>
        <td><textarea name="userDesc" id="user-desc"></textarea></td>
      </tr>
    </table>
  </body>
</html>

说明：

属性选择器的格式为选择器[属性名=属性值]。

8、通用选择器

通用选择器用*表示，作用在所有标签上。如* {font-size:12px}，表示所有元素的字体大小都是12px。

9、群组选择器

当几个元素样式属性一样时，可以共同调用一个声明，便可以使用群组选择器。

<!DOCTYPE html>
<html>
  <head>
    <title> 群组选择器 </title>
    <style type="text/css">
      h3,div,p,span{color:red;}
    </style>
  </head>
  <body>
    <h3>HTML5</h3>
    <div>CSS3</div>
    <p>JAVA</p>
    <span>SQL</span>
  </body>
</html>