CSS学习02之css导入方式

最新推荐文章于 2023-05-16 22:28:13 发布

小黑神zxs

最新推荐文章于 2023-05-16 22:28:13 发布

阅读量444

点赞数 1

分类专栏： CSS3详解文章标签： css css3 html 前端 idea

本文链接：https://blog.csdn.net/zxs1002/article/details/122850219

版权

CSS3详解专栏收录该内容

18 篇文章 0 订阅

订阅专栏

回顾

什么是 CSS？

CSS 指的是层叠样式表* (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML
元素 CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中

CSS 是一种描述 HTML 文档样式的语言。
CSS 描述应该如何显示 HTML 元素（HTML美颜）。

三种使用 CSS 的方法

有三种插入样式表的方法：

外部 CSS

<!--外部样式link,还有一种@import url=""-->
<link rel="stylesheet" href="css/style.css">

内部 CSS

<!--内部样式-->
    <style>
        h2{
            color: green;
        }
    </style>

行内 CSS

<!--行内样式：在标签元素中，编写一个style属性，填写样式即可-->
<p style="text-align: center; color: red">xxxx</p>

示例

上章我们学会简单使用css了，以后我就不展示详细操作步骤了！！！

1.编写index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入方式</title>
    <!--内部样式-->
    <style>
        h2{
            color: green;
        }
    </style>
    <!--外部样式link,还有一种@import url=""-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，填写样式即可-->
<h1 style="text-align: center; color: red">我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>

</body>
</html>

2.编写style.css

h3{
    color: blue;
}

3.运行及测试结果

在这里插入图片描述

小结

就近原则，不同样式定义一个元素时采取就近原则，采取离元素近的样式
css注释：

/* 这是一条单行注释 */
p {
  color: red;
}

作者有话说

博客创作不易，希望看到这里的读者动动你的小手点个赞，如果喜欢的小伙伴可以一键三连，作者大大在这里给大家谢谢了。

小黑神zxs

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习02之css导入方式

回顾什么是 CSS？CSS 指的是层叠样式表* (Cascading Style Sheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML元素 CSS 节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在 CSS 文件中CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素（HTML美颜）。三种使用 CSS 的方法有三种插入样式表的方法：外部 CSS<!--外部样式link,还有一种@import url=""--&g
复制链接

扫一扫