CSS(层叠样式表cascading style sheet）

命中。

于 2021-10-20 02:32:59 发布

阅读量473

点赞数

分类专栏： CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/YANGMENGZHENG/article/details/120856274

版权

本文介绍了CSS的基本概念、主要作用和与HTML的区别。详细讲解了CSS的三种使用方式：行内嵌入式、页面嵌入式和外部CSS文件导入。此外，文章还重点阐述了CSS的选择器，包括元素选择器、类选择器、ID选择器、通配符选择器和分组选择器，帮助理解如何定位和设置HTML元素的样式。

摘要由CSDN通过智能技术生成

二、CSS使用方法（3种）：style属性

1、行内嵌入式

由下面举例可知，行内嵌入式只对当前嵌入的表签有效。（不推荐使用，因为此方法失去了样式表的优点。)

2、页面嵌入式

3、导入css文件的方式（外部CSS)：推荐使用

三、CSS的选择器：在CSS中定位页面中的标签(控件)

1、简单选择器(基本选择器)

(1)元素选择器（标签名选择器）：优先级最低，涉及最广。

(2)类选择器：优先级次之

(3)id选择器：优先级最高

(4)通配符选择器（通用选择器）：*，代表所有元素

(5)分组选择器

一、CSS简介

1、CSS

(1)CSS 是一种描述 HTML 文档样式的语言。

(2)什么是 CSS？

CSS 指的是层叠样式表* (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作，它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中

*：也称级联样式表。

2、CSS主要作用

(1)对页面的外观进行美化

(2)统一网站页面的风格

(3)实现内容和样式的分离,适合团队开发

3、CSS和HTML区别

(1)创建 HTML 的目的是描述网页的内容，通俗来说HTML就是标签

(2)创建CSS的目的是制作网页的样式，CSS就是给标签添加样式

二、CSS使用方法（3种）：style属性

1、行内嵌入式

给标签添加style属性,用来设置样式。

可用于为单个元素应用唯一的样式。

由下面举例可知，行内嵌入式只对当前嵌入的表签有效。（不推荐使用，因为此方法失去了样式表的优点。)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="color:blueviolet;font-size:50px">这是一个标题</p>
    <h3 style="color:cornsilk;font-size:100px">只有此元素有的样式</h3>
</body>
</html>

2、页面嵌入式

(1)在页面中使用<style></style>定义不同的样式规则

(2)属性继承：明明是父级上设置样式，结果后代标签也跟着发生变化，这就叫属性继承。color属性和font系列属性都可以被继承。

下面举例中body中的属性被body中p标签和h3标签继承，文本位置都居中。

(3）未曾对h3标签进行样式设置，所以它除了继承body的属性，并没有其他属性。

(4) 连接两个属性，用分号隔。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{text-align: center;}
        p{
            color: crimson;
            font-size: large;
        }
    </style>
</head>
<!-- <style>
    body{text-align: center;}
    p{
        color: crimson;
        font-size: large;
    }
</style> -->
<body>
    <p style="color: darkgreen;">文本居中</p>
    <p>设置颜色和字号</p>
    <h3>另一个文本</h3>
</body>
</html>