CSS基本语法与基本选择器_htmlcss由两部分组成-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43641202/article/details/115211904

本文介绍了CSS的基本概念，包括其全称层叠样式表，以及三种样式引入方式：行内样式、内部样式表和外部样式表。重点讨论了样式优先级的"就近原则"以及CSS基本选择器，包括标签选择器、类选择器和ID选择器的用法，强调ID选择器的唯一性。最后，阐述了选择器优先级：ID选择器 > 类选择器 > 标签选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

什么是CSS?

css全称为层叠样式表或级联样式表。
用于HTML中，对元素设置样式。

CSS的基本语法

CSS规则由两个部分构成，即选择器和声明。
声明必须放在一对大括号“{ }”中，可以是一条或多条。
每条声明由属性和值的组成，属性和值之间用冒号分开，每条声明以英文分号结尾。选择器 {属性1:值1; 属性2:值2; …}
例如

h1{
    font-size: 12px;
    color: black;
}

在html中引入css样式需要用到<style>标签。
<style>标签位于<head>标签中。
在HTML中引入CSS有三种引入方式

行内样式
内部样式表
外部样式表

行内样式

就是直接把CSS代码添加到HTML标签中。使用style属性是改变所有HTML元素样式的通用方法。用法如下：

<h1 style="color: yellow;font-size: 30px;">行内样式</h1>

在这里插入图片描述
这种方式仅对当前的HTML标签起作用,并且是写在HTML标签中的，因此这种方式不能使内容与表现相分离，本质上没有体现CSS的优势，因此不推荐使用。

内部样式表

如前面讲到的示例一样，把CSS代码写在<head>的<style>标签中，与HTML内容位于同一个HTML文件中，这就是内部样式表。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>内部样式表</title>
        <style>
            h1{
                font-size: 12px;
                color: black;
            }
        </style>
    </head>
    <body>
        <h1>内部样式表</h1>
    </body>
    
</html>

在这里插入图片描述
这种方式便于在同页面中修改样式，但不利于在多页面间共享及维护复用代码，对内容与样式的分离也不够彻底。

外部样式表

链接外部样式表就是在HTML页面中使用 <link> 标签链接外部样式表， <link> 标签要放在页面的 <haed> 标签内，语法如下：

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

其中，rel=“stylesheet” 是指在页面中使用这个外部样式表。type=“text/css” 是指文件的类型是样式表文本，这个属性其实是可以省略的。href=“css/base.css” 是指文件所在的位置。

外部样式表实现了样式和结构彻底分离，一个外部样式可以应用于多个页面。当改变这个外部样式表文件时，所有页面的样式都会随之改变。这样不仅减少了重复的工作量，也利于保持网站的统一样式和网站维护。同时减少了用户浏览网页时的代码下载量，提高了网站的运行速度。

代码示例如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>链接外部样式表</title>
        <link rel="stylesheet" href="css/base.css">
    </head>
    <body>
        <h2>清平乐</h2>
        <hr>
        <p>年年雪里,常插梅花醉,尽梅花无好意,赢得满衣清泪!</p>
        <p>今年海角天涯,潇潇两鬓生华.</p>
        <p>看取晚来风势,故应难看梅花.</p>
    
        
    </body>
    
</html>

base.css文件代码如下

h2 {
    font-size: 20px;
    color: red;
}
p {
    font-size: 16px;
    color: black;
}

浏览器中的效果：
在这里插入图片描述

样式优先级

CSS的全称是层叠样式表，对于页面中的某个元素，允许同时应用多个样式（即叠加），页面元素的最终样式即为多个样式的叠加效果。但这存在一个问题——当同时应用上述三类样式时，页面元素将同时继承这样的样式，如果样式之间存在冲突，应该继承哪种样式呢？

这里只需要记住优先级是遵循 “就近原则” 哪种样式离修饰的标签近，就继承哪种。行内样式一定优先于内部样式表、外部样式表，因为行内样式就写在标签里。而内部、外部样式表就看谁离标签近就继承谁。

CSS基本选择器

在CSS中，有三种最基本的选择器，分别是标签选择器、类选择器和ID选择器。

标签选择器

顾名思义就是直接选择HTML中的标签名称，如<h1>~<h6>、<p>、<img>等。对其进行声明。
例如，h2选择器用于声明页面中所有<h2>标签的样式风格。同样，p选择器用于声明页面中所有<p>标签的样式风格。
例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>标签选择器的用法</title>
        <style>
            h2{
                color: red;
            }
            p{
                color: blue;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <h2>清平乐</h2>
        <hr>
        <p>年年雪里,常插梅花醉,尽梅花无好意,赢得满衣清泪!</p>
        <p>今年海角天涯,潇潇两鬓生华.</p>
        <p>看取晚来风势,故应难看梅花.</p>
    
        
    </body>
    
</html>

在这里插入图片描述

以上示例中的CSS代码声明了HTML页面中的所有<h2>标签和<p>标签。每个CSS标签选择器都包含选择器本身、属性和值，其中属性可以设置多个。

在这里插入图片描述

类选择器

标签选择器一但声明，页面中所有该标签都会相应的发生变化。以上文的代码为例，当声明了<p>标签为蓝色时，页面中的所有<p>标签都将显示为蓝色。如果希望其中一个<p>标签不是蓝色，而是绿色，仅靠标签选择器是不够的，还需要引入类（class）选择器。
语法如下：

.color{
         font-size: 25px;
         color: green;
 }

在这里插入图片描述

定义

以点（.）开头，类名可自定义
使用

在需要该样式的HTML标签中，通过class="类名"来应用

类选择器是网页中最常用的一种选择器，设置了类选择器后，只要页面中某个标签需要相同的样式，直接使用class属性调用即可。类选择器在同一个页面中可以频繁使用，应用起来非常方便。

ID选择器

ID选择器的使用方法于类选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此它的针对性更强。ID就相当于身份证，不可重复且唯一。当然，你给两个标签设置相同的ID属性也不犯法，它也会相对于的显示，但是为了规范，防止出错，一个ID只用一次，不要重复使用，且名字也不要重复。

#index{
        font-size: 25px;
        color: green;
}

在这里插入图片描述

定义

以井号（#）开头，ID可自定义
使用

在需要该样式的HTML标签中，通过id="ID"来应用

注意！ CSS选择器命名以及使用规范：

使用小写英文字母；
不要和ID选择器同名；
使用具有语义化的单词命名；
长名称或词组可以使用驼峰命名方式；
ID选择器在页面中只能使用一次，也就是说在同一个页面中同一个id属性只能设置一次；而类选择器可以在页面中多次使用。

三种选择器的优先级

选择器的优先级和样式优先级不同，不遵循“就近原则”，无论使用哪种方式引入CSS样式，一般都遵循：ID选择器 > class类选择器 > 标签选择器。