HTML5&CSS3基础：CSS简介和使用（4）

最新推荐文章于 2023-10-25 18:01:32 发布

斜键仙

最新推荐文章于 2023-10-25 18:01:32 发布

阅读量596

点赞数 1

分类专栏：前端 #基础知识文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_45336315/article/details/111008917

版权

前端同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

#基础知识

8 篇文章 0 订阅

订阅专栏

这里主要介绍CSS是什么以及它在网页中是如何使用的，在使用中我们又应该注意什么，在这我们对上面的内容做个总结。

文章目录

历篇文章目录
第五节：CSS简介和使用
前言
一、CSS简介(CSS3)
- 1.简介
- 2.版本
二、使用
- 1.语法
- - 1.1 CSS样式语法规则
  - 1.2 引入CSS样式表的方式
总结

历篇文章目录

点击访问历篇文章

第五节：CSS简介和使用

前言

从思维导图可以大概知道总结的知识内容，思维导图还有分支没展开，有需要的可自行下载。
在这里插入图片描述
网盘链接：https://pan.baidu.com/s/1LwUeEadq7cYORTyoFuFQcg
提取码：2t0a

一、CSS简介(CSS3)

前文中我们提到了网页组成的三个部分：结构（HTML）、表现（CSS）、行为（JavaScript），在这呢我们开始了解CSS是如何装扮我们网页的。

1.简介

（1）CSS（Cascading Style Sheets层叠样式表）通常称为CSS样式表或样式表，主要用于设置HTML页面中的各种外观显示样式。
（2）CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，如下图所示，图中的文字、粗体、背景、行间距和排版等，都是通过CSS控制的。
在这里插入图片描述

2.版本

（1）1996年12月，W3C发布第一个有关样式的标准CSS1;
（2）1998年5月发布了CSS2;
（3）2001年5月23日W3C完成了CSS3的工作草案。

二、使用

CSS非常灵活，既可以嵌入在HTML文档中，也可以是一个单独的外部文件，如果是独立的文件，则必须以“.css”为后缀名。而网页实际上是一种多层结构，通过CSS可以分别为网页的每一层设置样式，最后我们能看到的只是网页最上面的一层。

1.语法

1.1 CSS样式语法规则

选择器{属性: 属性值1;  属性: 属性值2;  属性: 属性值3;}

在这里插入图片描述
声明块：“{ }”大括号和里面的内容就是声明块，用来指定为元素设置的样式。
声明块是由一个个声明组成，声明是由一个名值对构成。

注意书写规则：
（1） CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照习惯将“选择器、属性、值”都采用小写形式;

（2）多个属性之间必须用英文状态下的分号隔开，最后一个分号可不写，按照习惯CSS样式出现的符号都用英文状态下的符号；

（3）如果属性的值由多个单词组成且中间包含空格，则必须为这个属性加上英文状态下的单引号。例如：

p{ font-family: 'Times New Roman' }

（4）在编写CSS代码时，为了提高代码可读性，通常会加上CSS注释。例如：

 /* 这是CSS注释文本，此文本不会显示在浏览器窗口中 */    选中要注释的内容快捷键Ctrl+/

（5）在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。例如：

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

        h2{
            font-size: 20px; /* 20和px之间不可以出现空格 */
            color: red;
          }

上边两段代码所呈现的效果是一样的，但是第二种的可读性更高，注意属性的值和单位之间是不允许出现空格的，否则浏览器解析时会出错。

1.2 引入CSS样式表的方式

也就是如何装扮HTML文档在中的内容

（1）行内式（也称内联样式）
是通过标记的style属性来设置元素的样式，基本语法如下：

<标记 style="属性: 属性值1;  属性: 属性值2;  属性: 属性值3;">内容</标记>

例：
<h2 style="font-size: 20px; color: red;">内联样式</h2>

语法中style是标记的属性，实际上任何HTML标记都有style属性，用来设置行内式。
其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标记及嵌套在其中的子标记起作用。

注意： 不推荐使用内联样式，因为只能对一个标签生效，如果希望影响到多个元素，必须在每一个元素中都复制一遍，并且当样式发生变化时，我们要一个一个的修改。

（2）内嵌式
内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标记定义，其基本语法格式如下：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       选择器{属性1:属性值1; 属性2: 属性值2; 属性3: 属性值3;}
    </style>
</head>

该语法中，<style>标记一般位于<head>标记中的<title>标记之后，也可以把它放在HTML文档的任何地方。但是由于浏览器是从上到下解析代码的，把CSS代码放在头部便于提前被下载和解析，以避免因网速问题网页内容下载后出现短暂没有样式修饰。

· type属性：
属性值：”text/css“，告诉浏览器<style>标记包含的是CSS代码，因为<style>标记还可以包含其他代码，如JavaScript代码，但也可以不写。

 <style type="text/css">
       选择器{属性1:属性值1; 属性2: 属性值2; 属性3: 属性值3;}
 </style>

注意： 该方式通过选择器可以同时为多个标签设置样式，并且修改时只需要修改一处即可，但是内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行重复使用。

（3）链入式(最佳)
链入式是将所有的样式放入一个或多个以”.css“为扩展名的外部样式表文件中，通过<link/>标记将外部样式表文件链接到HTML文档中，基本语法格式如下：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css文件的路径">
</head>

· rel属性
· rel属性值：stylesheet， rel是Relations的缩写，指关联到一个stylesheet（样式表单)。

· href属性
· href属性值：为".css"样式表的路径。

注意：
（1）外部样式表需要通过link标签引入，意味着只要想使用这些样式的网页都可以进行引用，使样式可以在页面之间进行复重使用。
（2）将样式编写到外部的css文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

总结

以上就是今天要讲的内容，本文仅仅简单介绍css和它的使用，样式表的出现无疑能够让我们对HTML文件进行更多的装扮，如我们除了可以穿不同衣服来装扮自己，还可以在发型，帽子，鞋子，首饰等等来装扮自己。
如若上面有错误，还望大家不吝赐教! 同时欢迎大家点赞收藏！

斜键仙

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5&CSS3基础：CSS简介和使用（4）

这里主要介绍CSS是什么以及它在网页中是如何使用的，在使用中我们又应该注意什么，在这我们对上面的内容做个总结。文章目录前言一、CSS简介(CSS3)1.简介2.版本二、使用1.语法1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、CSS简介(CSS3)前文中我们提到了网页组成的三个部分：结构（HTM.
复制链接

扫一扫