APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > css >

收藏
分享到

CSS引入方式和选择符的讲解和运用

css 来源：互联网 作者：佚名 发布时间：2025-05-15 20:50:58 人浏览
摘要

CSS 是一种格式化网页的标准方式，它拓展了 HTML 的功能，使网页设计者能够以更有效、更易维护的方式设置网页格式。CSS 功能强大，CSS 的样式设定功能比 HTML 多，几乎可以定义所有的网页元

CSS 是一种格式化网页的标准方式，它拓展了 HTML 的功能，使网页设计者能够以更有效、更易维护的方式设置网页格式。CSS 功能强大，CSS 的样式设定功能比 HTML 多，几乎可以定义所有的网页元素。

二、CSS 是什么

CSS 即层叠样式表（Cascading Style Sheets），是一种用于描述网页文档（如 HTML 或 XML）外观和格式的样式表语言。它主要用于将网页内容的呈现（外观）和结构（内容）分离，从而实现更灵活、更高效的网页设计。

CSS 能够对文本的字体、颜色、大小、行间距等进行设置，还能为元素添加背景颜色、背景图片，设置元素的边框样式、圆角效果等，让网页更美观。例如：

1

2

3

4

p {

    color: blue;

    font-size: 16px;

}

在 CSS 里，注释是用来给代码添加说明或者解释的内容，浏览器会忽略这些注释内容。CSS 注释有且只有一种格式 /**/ ：

1

2

3

4

5

6

7

8

9

10

/* 这是一个单行的CSS注释 */

p {

    /* 为段落文本设置颜色为蓝色 */

    color: blue;

    /*

    这是一个多行注释

    这里可以写更多的说明内容

    */

    font-size: 16px;

}

三、CSS 引入方式

1、行内样式

行内样式也叫内联样式，是各种引用 CSS 方式中最直接的一种。行内样式就是通过直接设置各个元素的 style 属性，从而达到设置样式的目的。行内样式的格式为：

1

<标签 style="属性: 属性值;">

2、内部样式表

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

内部样式表处于页面的 <head> 与 </head> 标签之间，内部样式表的格式为：

1

2

3

4

5

6

7

<head>

    <style>

        标签 {

            属性: 属性值;

        }

    </style>

</head>

3、链入外部样式表

外部样式表把声明的样式存放在独立的样式文件（.css 文件）中，当页面需要使用样式时，通过   < link >标签外链接外部样式表的文件即可。使用外部样式表，改变一个文件就能改变整个站点的外观。

①用< link >标签链接样式表文件

< link >标签必须放到页面的<head> ...</head> 标签对内。其格式为：

1

2

3

4

5

<head>

  ...

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

  ...

</head>

其中，rel 属性用于指定链接的文档与当前文档的关系，当链入外部样式表时，它的值需设为         “ stylesheet ”；href 属性用于指定外部 CSS 文件的路径，可以是相对路径，也可以是绝对路径。

②样式表文件的格式

样式表文件可以用任何文本编辑器（如记事本）打开并编辑，一般样式表文件的扩展名为 .css 。样式表文件的内容是定义的样式表，不包含 HTML 标签。样式表文件的格式为：

1

2

3

4

5

?选择器 {

    属性1: 属性值1;

    属性2: 属性值2;

    /* 可以有更多属性 */

}

四、CSS 选择符（选择器）

基本选择符包括标签选择符、class 类选择符和 id 选择符。

1、标签选择符

CSS 中的标签选择符（也称为元素选择器）是最基础的选择符类型，它通过 HTML 标签的名称来选择页面中所有该类型的元素，并为这些元素应用统一的样式。语法如下：

1

2

3

4

标签名 {

    属性: 属性值;

    /* 可以有更多的属性 - 值对 */

}

2、class 类选择符

在 CSS 里，class 类选择符是一种极为实用的选择符，它能够依据元素的 class 属性值来选择元素并应用样式。类选择符以点号（.）开头，后面紧跟类名，语法如下：

1

2

3

4

.class-name {

    属性: 属性值;

    /* 可以有更多属性 - 值对 */

}

3、id 选择符

在 CSS 里，id 选择符是一种用于精准选择特定元素的选择器，它依据元素的 id 属性值来定位元素。id 选择符以井号（#）开头，后面紧跟元素的 id 属性值，语法如下：

1

2

3

4

#id-name {

    属性:属性值;

    /* 可添加更多的属性 - 值对 */

}

五、练习

1、练习一下三种 CSS 引入方式

示例代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>css三种引入方式</title>

    <style>

        h3{

            color: blue;

            font-size: 30px;

            font-family: 宋体;

          }

     </style>

    <link rel="stylesheet" href="styles.css">

</head>

<body> 

    <h2 style="color: brown; font-size: 30px; font-family:楷体">

    测试CSS的引入方式：行内式

    </h2>

    <h3>

        测试CSS的引入方式：内嵌式  

    </h3>

    <h4>

        测试CSS的引入方式：外链式  

    </h4>

</body>

</html>

运行结果：

2、练习一下 CSS 三种选择符 

示例代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>

        /* 标签选择器 */

        p {

            color: blue;

        }

        /* 类选择器 */

        .red-text {

            color: red;

        }

        /* id选择器 */

        #green-text {

            color: green;

        }

    </style>

</head>

<body>

    <p>这是使用标签选择器设置为蓝色的文本。</p>

    <span class="red-text">这是使用类选择器设置为红色的文本。</span>

    <p id="green-text">这是使用id选择器设置为绿色的文本。</p>

</body>

</html>

 运行结果：
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章
  • 使用animation.css库快速实现CSS3旋转动画效果
    CSS3在网页设计中提供了丰富的样式和动态效果，其中animation.css是一个专门用于实现动画旋转特效的开源CSS3动画库。本文将深入探讨animati

  • CSS引入方式和选择符的讲解和运用

    CSS引入方式和选择符的讲解和运用
    CSS 是一种格式化网页的标准方式，它拓展了 HTML 的功能，使网页设计者能够以更有效、更易维护的方式设置网页格式。CSS 功能强大，CSS 的
  • CSS3 Facebook-style Buttons项目常见问题及最新解决方
    CSS3 Facebook-style Buttons 项目常见问题解决方案 css3-facebook-buttons Simple CSS to recreate the appearance of Facebooks buttons and toolbars. 项目地址:https://gitcod
  • CSS3布局样式及其应用举例
    深入探讨 CSS3 布局样式及其应用 引言 在现代网页设计中，CSS（层叠样式表）不仅是设计视觉样式的工具，也是布局的核心技术。CSS3引入了
  • CSS3实现的账号密码输入框提示效果
    1. 输入框提示特效实现原理 1.1 用户界面的视觉引导 输入框是网站表单中最常见的组件之一，其提示特效为用户在填写过程中提供视觉引导
  • css中的overflow使用介绍
    title: overflow使用 date: 2025-05-07 19:41:52 tags: cssoverflow属性详解 overflow是 CSS 中控制内容溢出容器时如何显示的属性，它有以下主要功能： 1. 基本
  • CSS Grid 的 auto-fill 和 auto-fit 内容自适应
    CSS Grid 的 auto-fill 和 auto-fit 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 /* 父元素 */ .grid { display: grid; /* 定义「网格容器」里有多少列，以及每列的宽度 */

  • 前端高级CSS用法介绍

    前端高级CSS用法介绍
    在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一。随着前端技术的不断
  • CSS去除a标签的下划线的几种方法
    在 CSS 中，去除a标签（超链接）的下划线主要有以下几种方法： 使用text-decoration属性 通用选择器设置：使用a标签选择器，将text-decoration属
  • CSS will-change属性介绍
    will-change 是一个 CSS 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化渲染性能，提前做一些准备工作，从
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计