CSS样式规则以及CSS样式表的引入

浅浅的花香味﹌ 2023-06-22 03:30 23阅读 0赞

### 1、CSS 的发展历程 ###

从 HTML 被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样 式语言为用户提供页面效果 的控制。最初的 HTML 只包含很少的显示属性。 随着 HTML 的成长，为了满足页面设计者的要求，HTML 添加了很多显示功能。但是随 着这些功能的增加，HTML 变的越来越杂乱，而且 HTML 页面也越来越臃肿。于 是 CSS 便诞生了。

### 2、CSS 网页的美容师 ###

如果 JavaScript 是网页的魔法师，那么 CSS 就是网页的美容师；让网页更加丰富多彩。

有人说， 没有不漂亮的女人，只有不会打扮的女人。

我想说， 没有不好看的网页，只有不会 CSS 的前端。

### 3、CSS 初识 ###

CSS 通常称为 CSS 样式表或层叠样式表(级联样式表)主要用于设置 HTML 页 面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边 距等）以及版面的布局等外观显示样式。  
CSS 以 HTML 为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

### 4、CSS 样式规则 ###

具体格式如下：

h1{
        color：red；
        font-size: 25px;
    }

在上面的样式规则中:

h1：选择器

color：red；：声明

color：属性

red：属性值

(1).选择器用于指定 CSS 样式作用的 HTML 对象，花括号内是对该对象设置的具体样式。

(2).属性和属性值以“键值对”的形式出现。

(3).属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。

(4).属性和属性值之间用英文“:”连接。

(5).多个“键值对”之间用英文“;”进行区分。 可以用段落 和 表格的对齐的演示。

### 5、引入 CSS 样式表（书写位置） ###

##### (1)行内式(内联样式) #####

是通过标签的 style 属性来设置元素的样式，其基本语法格式如下：

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

##### (2)内部样式表(内嵌式) #####

内嵌式是将 CSS 代码集中写在HTML文档的 head 头部标签中,并且用 style 标签定义,其基本语法格式如下：

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

语法中,style 标签一般位于 head 标签中title标签之后,也可以把他放在 HTML 文档的任何地方。

##### (3)外部样式表(外链式) #####

链入式是将所有的样式放在一个或多个以.CSS 为扩展名的外部样式表文件中,通 过 link 标签将外部样式表文件链接到 HTML 文档中，其基本语法格式如下：

<head>
    	<link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
    </head>

##### 注意:link 是个单标签! #####

该语法中,link 标签需要放在 head 头部标签中,并且必须指定 link 标签的三个属性,具体如下:

href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。

type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为 CSS 样式表。

rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。

发表评论取消回复

表情：

评论列表（有 0 条评论，23人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS——样式表的引入

1、内部样式表 <!DOCTYPE html> <html> <head> <meta charset="U

待我称王封你为后i/ 2023年08月17日 16:10/ 0 赞/ 165 阅读

相关 CSS样式规则以及CSS样式表的引入

1、CSS 的发展历程从 HTML 被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的 HTML 只包含很少的显示

浅浅的花香味﹌/ 2023年06月22日 03:30/ 0 赞/ 24 阅读

相关 css样式引入优先级

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

淩亂°似流年/ 2023年06月18日 10:58/ 0 赞/ 27 阅读

相关 CSS基础——CSS样式的引入和规则【学习笔记】

1.引入CSS样式表（书写位置）行内式（内联样式）内部样式表（内嵌样式表）外部样式表（外链式）（1）行内式（内联样式）概念：称

客官°小女子只卖身不卖艺/ 2022年12月22日 09:13/ 0 赞/ 171 阅读

相关 CSS引入方式-内部样式表、行内样式表、外部样式表

CSS引入方式内部样式表（嵌入式）内部样式表就是将CSS在写html页面内部。是将所有的CSS代码抽取出来，单独放到一个<style>标签中。例如：

我不是女神ヾ/ 2022年12月16日 14:28/ 0 赞/ 245 阅读

相关 CSS样式引入方式

CSS样式引入方式任务描述相关知识样式引入方式内部样式表外部样式表内部样式使

约定不等于承诺〃/ 2022年11月13日 00:48/ 0 赞/ 246 阅读

相关 CSS创建（样式表引入）

一、如何插入样式表 1.外部样式表 2.内部样式表 3.内联样式二、外部样式表详解每个页面使用<link>标签链接到样式表，<link>标签在（文档的）头部。

布满荆棘的人生/ 2022年09月30日 13:46/ 0 赞/ 260 阅读

相关 css样式编写规则

一、css书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(wid

小鱼儿/ 2022年09月28日 11:43/ 0 赞/ 221 阅读

相关 CSS样式引入

我们已经学习了行内、内嵌和外链三种方式来引入我们的 CSS 样式，这里我们再深入探讨下。行内方式通过给元素添加 style 属性来添加样式，如下： <di

小灰灰/ 2022年05月27日 09:44/ 0 赞/ 342 阅读

相关引入CSS样式表（书写位置）

引入CSS样式表（书写位置） CSS可以写到那个位置？是不是一定写到html文件里面呢？内部样式表内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且

青旅半醒/ 2022年03月21日 05:10/ 0 赞/ 309 阅读