CSS简介和常见的选择器

最新推荐文章于 2024-05-20 21:21:56 发布

Lazy_idle

最新推荐文章于 2024-05-20 21:21:56 发布

阅读量146

点赞数

分类专栏： Web前端文章标签： html5 html css

本文链接：https://blog.csdn.net/kokomo_tender/article/details/115224878

版权

Web前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

CSS简介和常见的选择器

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

1、层叠样式表是什么

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

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

HTML：

<body>

  <h1>标题 1</h1>
  <p>这是段落中的一些文本。</p>
  <p>这是另外一个段落</p>
  <hr />
  <h2>标题 2</h2>
  <table>
    <tr><th>Name</th><th>E-mail</th><th>Phone</th></tr>
    <tr><td>Doe, John</td><td>jdoe@example.com</td><td>555-789-7222</td></tr>
    <tr><td>Smith, Eva</td><td>esmith@example.com</td><td>555-324-3693</td></tr>
  </table>

  <br />

  <hr />
  <h3>标题 3</h3>
  <p>你应具备的知识:</p>
  <ol><li>HTML</li><li>CSS</li></ol>
  <p>你最喜欢的饮料:</p>
  <ul><li>Smoothie</li><li>Green tea</li><li>Coffee</li></ul>

</body>

样式一：

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;}

样式二：

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;">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页面复用的特点。
下面是一个示例：
编写HTML文件，命名为test.html，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;
}

说明：

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

二、几种常见的CSS选择器

前面我们已经提到了CSS选择器，它的核心目的即是选择需要被修饰的元素。以下我们将了解一些常见的CSS选择器。

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之后（建议按事件发生的顺序记忆）。

伪类选择器也可以用来缩小标签的选择范围，或者插入简单的内容。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <title> 伪类选择器 </title>
    <meta charset="utf-8">
    <style type="text/css">
	  ul:after {
	    content: ' 等等';
	    color: blue;
	  }
      li:first-child {
	    color: green;
	  }
    </style>
  </head>
  <body>
    <h3>兴趣爱好</h3>
    <ul>
      <li>饮酒</li>
      <li>赋诗</li>
      <li>游历山水</li>
    </ul>
  </body>
</html>

说明：

选择器ul:after选择<ul>元素之后，用以插入内容。
选择器li:first-child选择属于父元素的第一个子元素，且该元素必须是<li>元素才能被选择。

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>

页面浏览效果同ID选择器，这里不再展示。
说明：

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

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>

说明：

群组选择器的格式为选择器1, 选择器2, ..., 选择器n。

三、层叠样式表的优先级

1、样式优先级

按样式表书写的位置，样式的优先级遵循就近原则的规则，从低到高依次是浏览器默认样式、外部样式、内部样式、行内样式。

2、选择器优先级

按选择器的不同，样式的优先级遵循范围由小到大的规则，从低到高依次是标签选择器、类选择器、ID选择器。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 选择器优先级 </title>
    <style>
      div {height: 50px; border: 5px solid gray; background: lightgreen;}
      .d-class {height: 35px; width: 50px; background: lightyellow;}
      #d-id {height: 20px; background: lightblue;}
    </style>
  </head>
  <body>
    <div>文字1</div>
    <div class="d-class">文字2</div>
    <div class="d-class" id="d-id">文字3</div>
  </body>
</html>

3、提升样式优先级

若想让优先级低的属性值生效，可以在属性值的后面添加!important来提升样式的优先级。
下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 提升样式的优先级 </title>
    <style>
      div {font-size: 20px !important;}
    </style>
  </head>
  <body>
    <div>文字1</div>
    <div style="font-size:40px;">文字2</div>
  </body>
</html>

Lazy_idle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS简介和常见的选择器

HTML及CSS学习笔记 06 - CSS简介和常见的选择器一、层叠样式表（CSS）介绍1、层叠样式表是什么层叠样式表（英文全称：Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。下面是一个简单的列子：HTML：<body> &lt
复制链接

扫一扫