CSS简介及导入方式

最新推荐文章于 2024-08-15 15:20:23 发布

Johaden

最新推荐文章于 2024-08-15 15:20:23 发布

阅读量155

点赞数 2

分类专栏：前端自学笔记文章标签： css 前端 html

本文链接：https://blog.csdn.net/Johaden/article/details/139045345

版权

前端自学笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.CSS简介：中文名“层叠样式表”，用于定义网页样式和布局的样式表语言。通过CSS可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，实现精准页面设计。

2.CSS与HTML的关系：HTML类似于骨架（毛坯房），CSS类似于装修、家装等。

3.CSS语法：通常由选择器、属性和属性值组成，多个规则可以组合。

选择器{
    属性1：属性值1;
    属性2：属性值2;

}

①选择器的声名（大括号里的内容）：其中可以写多条属性，但是必须遵循以上格式，即分号结尾，属性和值的关系以键值的关系出现。

示例：P标签选择器，其中字体颜色为蓝色，大小为16像素。

p {
    color:blue;
    font-size:16px;
}

4.导入方式

①内部样式表：放在HTML文档头部，如下，在头部中确定标题的样式，在body中设置其内容。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>CSS导入方式</title>

    <style>
        p{
            color:blue;
            font-size:16px;
        }
    </style>
</head>
<body>
    <p>这是一个添加了CSS样式的文本</p>
</body>
</html>

②内联样式：在HTML中设定样式。

③外部样式：CSS样式放在单独文件中，在head中用link标签链接进来，好处就是可以在多处使用相同的样式。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>CSS导入方式</title>

    <style>
        p{
            color:blue;
            font-size:16px;
        }
    </style>
    <link href="style.css" rel="stylesheet" />
</head>
<body>
    <p>这是一个添加了CSS样式的文本</p>
    <h1 style="color:aqua;">这是一个内联样式示例</h1>
    <h2>这是一个外部样式示例</h2>
</body>
</html>

下面为新添加的style.css文件，内部可以设置外联样式。

h2{
    color: blueviolet;
}

注意：这三种导入方式有不同的优先级，优先级高的会覆盖优先级低的样式。内联样式＞内部样式表＞外部样式表。

Johaden

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
CSS简介及导入方式

通过CSS可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，实现精准页面设计。①选择器的声名（大括号里的内容）：其中可以写多条属性，但是必须遵循以上格式，即分号结尾，属性和值的关系以键值的关系出现。：CSS样式放在单独文件中，在head中用link标签链接进来，好处就是可以在多处使用相同的样式。：这三种导入方式有不同的优先级，优先级高的会覆盖优先级低的样式。：放在HTML文档头部，如下，在头部中确定标题的样式，在body中设置其内容。示例：P标签选择器，其中字体颜色为蓝色，大小为16像素。
复制链接

扫一扫

专栏目录