css引入样式-行内样式、内嵌样式和外链样式

最新推荐文章于 2024-01-22 10:31:23 发布

原创最新推荐文章于 2024-01-22 10:31:23 发布 · 4.3k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文介绍了CSS的三种引入方式：行内样式（内联样式）、内部样式表（内嵌样式表）和外部样式表（外链式）。行内样式通过style属性设置，仅影响当前标签；内嵌样式写在HTML head中，控制当前页面；外部样式通过link标签链接单独的.css文件，应用于整个网站。每种方式都有其优缺点，如代码冗余、样式分离程度等。

css初识及引入样式

概念：css通常称为css样式表或层叠样式表
作用：

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

引入css样式表的三种方式：

1）行内式（内联样式）

概念：称行内样式、行间样式，是通过标签的style属性来设置元素的样式
基础语法<标签名 style="属性1：属性值1；属性2：属性值2;">内容</标签名>
注意：
style其实就是标签的属性
样式属性和值之间用：
多组属性值之间用；隔开
只能控制当前的标签和嵌套在其中的字标签，造成代码冗(rong)余
缺点：没有实现样式和结构的分离

2）内部样式表（内嵌样式表）

是将css代码集中写在HTML文档的head头部标签中，并且用style标签定义
基础语法

<head>
    <style type="text/css">
        div{
            color: red;
            font-size: 12px;
        }
    </style>
</head>

注意
style标签一般位于head标签中，理论上他可以放在HTML文档的如何地方。
type="text/css"在html中可以省略。
只能控制当前的页面。
缺点：没有彻底分离

3）外部样式表（外链式）

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

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

注意
link是一个单标签
link标签要放在head头部标签中，并且指定link的三个属性

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件。
type	定义所链接文档的类型，在这里需要指定为"text/CSS",表示链接的外部文件为CSS样式表。我们都可以省略
href	定义所有链接外部样式表文件的url，可以是绝对路径也可以是相对路径

缺点：需要引入

CSS样式总结：

选择器用于指定css样式作用的HTML标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性
属性和属性值之间用“.”连接
多个“键值对”之间用“;”，进行区分

css引入样式-行内样式、内嵌样式和外链样式

css初识及引入样式

1 条评论