CSS——基础引入方式及选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_89085837/article/details/147191770

一、CSS简要介绍

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述网页外观和样式的标记语言，主要控制网页的布局、颜色、字体、动画等视觉效果。它与 HTML 结合使用，HTML 负责页面结构， CSS 则专注于美化内容。

二、CSS的引入方式

3种引入CSS样式表的方式：

定义行内样式
定义内部样式表
链入外部样式表

1.定义行内样式表

行内样式属于最直接的一种，也叫内联样式。行内样式就是通过直接设置各种元素的 style 属性，从而达到设置样式的目的。

但是这样的设置方式会使得整个页面变得更加臃肿，即便俩个元素一模一样，用户也需要在每个元素中单独书写。

格式为：

<标签 style="属性：属性值；属性：属性值...">

示例：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内样式表</title>

</head>
<body>
    <h1 style="color:aqua; font-size: larger;">我是一级标题</h1>
</body>
</html>

注：

行内式的表现和内容混在一起，并不符合 Web 标准，所以慎用这种方法。当样式仅需要在一个元素上应用一次时可以使用行内样式。

2.定义内部样式表

内部样式表是指样式表的定义处于 HTML 文件的一个单独的区域，与 HTML 的内容和结构标签分离开来，从而实现对整个页面范围的内容、结构和表现进行统一控制和管理。

与行内样式不同，内部样式表处于页面的 <head> 与 </head> 标签之间。单个页面需要特定样式时，最好使用内部样式表。

格式为：

<style type="text/css">
    选择符 1{属性：属性值；属性：属性值...}
    选择符 2{属性：属性值；属性：属性值...}
    ...
</style>

如果出现 <style> 和 </style> 中使用 < ! - - . . . - - > 是为了避免旧版本不支持 CSS ，把里面的内容用注释的形式表示，这样对于不支持的 CSS 的浏览器，会自动略过此段内容。
/ * . . . * /为 CSS 的注释符号，主要用于注释 CSS 的设置值。内容不会被显示或引用在网页上。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内嵌式、内部样式表</title>

    <style>
        h2{color:blue;
        font-size: 20px;}    
    </style>
</head>
<body>
    <h2>我是二级标题</h2>
</body>
</html>

注：如果出现多个同样定义h2的内部样式表，则采取后来者居上原则。

3.链入外部样式表

外部样式表通过某个HTML页面中添加链接方式生效。同一个外部样式表可以被多个网页甚至整个网页采用，大大提高了样式应用和维护的效率，这就是它最大的优点。

外部样式表把声明样式放在独立一个样式文件中，当页面需要使用样式时，通过 <link> 标签链接外部样式表文件即可。

优势：

所有网页都通过<Iink>链接到同一个CSS文件，从而共用样式表。

CSS文件共享在促进代码重用的同时，有助于简化代码和缩小HTML文件

若浏览器缓存了CSS样式表，网站其他页面加载会更快(F12->网络->CSS->响应)

想调整网站外观时，只需要调整CSS文件即可。

（1）用 <link> 标签链接样式表文件

<head>
    ...
    <link rel="stylesheet" href="外部样式表文件名.css">
    ...
</head>

rel="stylesheet" 属性规定了当前文档与被链接文档之间的关系，即定义在网页中使用外部样式表。

（2）样式表文件格式

选择符 1{属性：属性值；属性：属性值...}
选择符 2{属性：属性值；属性：属性值...}
...

三、CSS选择器（选择符）

3种基本选择器：

标签选择符
class
id

1.标签选择符

标签选择器是通过HTML标签名称来选择元素的。

标签选择器就是网页元素本身，定义时直接使用元素名称。

格式为：

E
{
    /*CSS代码*/
}

其中，E 表示网页元素。

2.class类选择符

类选择器使用 "." 符号来选择具有特定类的元素。一个元素可以有多个类。

格式为：

<style type="text/css">
    .类名称 1{属性：属性值；属性：属性值...}
    .类名称 2{属性：属性值；属性：属性值...}
    ...
    .类名称 3{属性：属性值；属性：属性值...}
</style>

3. id 选择符

ID选择器使用"#"符号来选择具有特定ID的元素。ID在页面中是唯一的。

格式为：

<style type="text/css">
    .#id 名 1{属性：属性值；属性：属性值...}
    .#id 名 2{属性：属性值；属性：属性值...}
     ...
    .#id 名 3{属性：属性值；属性：属性值...}
</style>

四、另外说明

样式配置的优先级：行内样式 > id选择器样式 > 类选择器的样式 > 标签选择器的样式

在没有优先级存在的情况下，样式配置遵循后来者居上的原则

层叠是指当在 HTML 文档中引用多个 CSS 样式文件时，若多个样式文件所定义的样式之间发生冲突，将依据样式优先级进行处理。若不考虑样式的优先级，一般道循 “后来居上” 原则。
另外，重要性 (!important声明) 和特异性也会影响 CSS 样式的处理层级特异性值由选择器中的不同类型决定，例如ID选择比类选择器具有更高的特异性，类选择器又比元素选择器具有更高的特异性。