CSS样式之初识

最新推荐文章于 2024-07-12 16:27:40 发布

陌上少年，且听这风吟

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量551

点赞数 10

分类专栏：前端文章标签：前端 html5 css3

本文链接：https://blog.csdn.net/siaok/article/details/129914196

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

编译软件：IntelliJ IDEA 2019.2.4 x64
运行环境：Google浏览器

前言

随着人工智能的不断发展，低代码开发思想逐渐盛行，软件开发的技术门槛进一步降低，普通人甚至不需要具备专业的前端开发知识储备，就可以快速生成一个模块化的系统，但是纵使如此，让他修改自己系统的某一功能，却满脸犯愁，不知如何修改。毕竟，还没学走路，就想开始飞。本文旨在为你介绍前端开发的”三大件“–css的基础篇，保准让你眼见一亮，醍醐灌顶。

一、CSS样式是什么？

CSS，英文全称Cascading Style Sheets，中文释义为层叠样式表，又称CSS样式表或级联样式表。它和HTML5一样，也是一种标记语言。

CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式边距等)以及版面的布局和外观显示样式。

CSS让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS可以美化HTML,让HTML更漂亮，让页面布局更简单。

二、 CSS有哪些语法规范？

要想了解CSS的语法规范，就必须了解它的样式规则。

👉CSS规则由两个主要的部分构成：

选择器以及条或多条声明
在这里插入图片描述
👉样式规则如下：

选择器是用于指定CSS样式的HTML标签，花括号内是对该对像设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文“：”分开
多个“键值对”之间用英文“，”进行区分

三、基础选择器

3.1 标签选择器

👉定义：

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

👉语法：

标签名{
	属性1,属性值1;
	属性2,属性值2;
	属性3,属性值3;
	...
}

👉作用：

可以把某一类标签全都选择出来，如所有的p标签

👉优点：

能快速为页面中同类型的标签设置统一样式

👉缺点：

不能设计差异化样式，只能选择全部的当前标签

3.2 类选择器

👉应用场景：

如果想要差异化选择不同的标签，比如单独选一个或者某几个标签，可以考虑使用类选择器

👉语法：

.类名{
	属性1:属性值1;
	...
}

🏆 样例：所有拥有red类的HTML元素div均改为红色。

代码演示如下：

.red
color:red;
}

💡 在HTML中div标签需要调用class属性来调用上述选择器

代码演示如下：

<div class='red'>变红色</div>

从上述样例我们可以看到，类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号显示

👉注意：

命名要“见名知意”，尽量使别人一眼就知道这个类名的目的
不要使用纯数字、中文等命名，尽量使用英文字母来表示
长名称或词组可以使用中横线来为选择器命名

👉多类名使用方式：

🏆样例：给div标签应用两个类选择器red和font20

代码演示如下：

<div c1ass="red font20">亚瑟</div>

🤔小tips：

(1)在标签class属性中可以写多个类名
(2)多个类名中间必须用空格分开

🏆案例：使用类选择器实现如下效果

在这里插入图片描述

代码演示如下：

<DOCTYPE html>
	<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .red {
                background-color: red;
            }
            .green{
            background-color:green;
            }
        </style>
    </head>
    <body>
    <table border="1" width="200px" height="400px"cellspacing="0">
        <tr class="red">
            <td></td>
        </tr>
        <tr class="green">
            <td></td>
        </tr>
        <tr class="red">
            <td></td>
        </tr>
    </table>
    </body>
    </html>

在这里插入图片描述

3.3 id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式

HTML元素以id 属性来设置id 选择器，CSS中id 选择器以“#"来定义

👉语法:

#id名{
	属性1: 属性值1;
	...
	}

例如，将id为nav 元素中的内容设置为红色。

#nav {
	color:red;
	}

🤔存疑：

教程视频中说同一个id只能被调用一次，但是我发现同一个id选择器可以被调用多次，演示效果如下，故而我认为这里的“只能被调用一次"是某种编程规范，并非只能调用一次

代码演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #blue{
            color: red;
        }
        #blue{
            color: blue;
        }
    </style>
</head>
<body>

    <p id="blue">天下大同</p>
    <p id="blue">天下</p>



</body>
</html>

在这里插入图片描述

👉更正理解：

之所以强调“同一个id只能被调用一次”，是因为id选择器是用来给HTML元素设置唯一的标识符的，因此同一个文档中不能存在多个具有相同id的元素。如果在同一个文档中出现了多个相同id的元素，那么只有第一个元素会被应用样式，其他的元素将被忽略。同一个id选择器可以被多次使用，但实践开发中为保证唯一性，遂只调用一次。在某种程度上，也算一种编程规范。

3.4 id选择器与类选择器之间的区别

类选择器(class)好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
id 选择器好比人的身份证号码，全中国是唯一的，不得重复
id 选择器和类选择器最大的不同在于使用次数上
类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和JavaScript 搭配使用

3.5 通配符选择器

在CSS中，通配符选择器使用" * "定义，它表示选取页面中所有元素(标签)。

👉语法：

* {
	属性1: 属性值1;
	...
}

💡注意：

1.通配符选择器不需要调用，自动就给所有的元素使用样式
2.特殊情况才使用，如以下的使用场景(清除所有的元素标签的内外边距）

🏆案例：运用通配符选择器，自动给所有元素的字体变成红色

代码演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        * {
            color: red;
        }

    </style>

</head>
<body>

    <p> 身份证一般指中华人民共和国居民身份证。 中华人民共和国居民身份证是用于证明居住在中华人民共和国境内的公民身份证明文件。 </p>

    <ul>
        <li>你</li>
        <li>我</li>

    </ul>
</body>
</html>

**在这里插入图片描述**

3.6 基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签比如	不能差异化选择	较多	p { color: red;)
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color:red; )
id选择器	一次只能选择1个标签	ID属性只能在每个HTML文档中出现一次	一般和js搭配	#nav {color:red;)
通配符选择韶	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	*{color: red;}

四、css引入方式

4.1 行内样式表

👉用法：

通过在标签上添加style属性的形式设置样式

style="color:red 
style="color:red;font-size: 50px;"

🏆代码举例：

<p style="color:red"> 你好 </p>

在这里插入图片描述

4.2 内部样式表

👉用法：

在head标签内添加style标签，设置样式
选择器选择我需要设置样式的标签

🏆代码举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #blue{
            color: red;
        }
      
    </style>
</head>
<body>

    <p id="blue">天下大同</p>
  



</body>
</html>

在这里插入图片描述

4.3 外部样式表

👉用法：

将内部样式的代码，提取到一个css文件内(后缀为.css的文件)
在html页面内做一个引入即可(如下图所示)

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

🏆代码举例：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="c3.css">


</head>
<body>

<p> 身份证一般指中华人民共和国居民身份证。 中华人民共和国居民身份证是用于证明居住在中华人民共和国境内的公民身份证明文件。 </p>

<ul>
    <li>你</li>
    <li>我</li>

</ul>
</body>
</html>

在这里插入图片描述

陌上少年，且听这风吟

关注

10
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
12
评论
CSS样式之初识

随着人工智能的不断发展，低代码开发思想逐渐盛行，软件开发的技术门槛进一步降低，普通人甚至不需要具备专业的前端开发知识储备，就可以快速生成一个模块化的系统，但是纵使如此，让他修改自己系统的某一功能，却满脸犯愁，不知如何修改。毕竟，还没学走路，就想开始飞。本文旨在为你介绍前端开发的”三大件“–css的基础篇，保准让你眼见一亮，醍醐灌顶。
复制链接

扫一扫