1、什么是CSS及CSS的导入方式

最新推荐文章于 2024-07-19 15:50:46 发布

很皮的皮蛋瘦肉粥

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量135

点赞数 1

分类专栏： CSS3 文章标签： css

本文链接：https://blog.csdn.net/cxycxytony/article/details/107469991

版权

CSS3 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

文章目录

1.1、CSS简介
1.2、发展史
1.3、快速入门
1.4 css的三种导入方式

1.1、CSS简介

Cascading Style Sheet 层叠级联样式表

CSS：表现层（美化网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动

1.2、发展史

CSS1.0

CSS2.0 DIV（块）+ CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画… 浏览器兼容性~

1.3、快速入门

基本入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范，<style> 可以编写css代码,每一个声明，最好适用分号结尾
    语法：
        选择器{
            声明1;        
            声明2;        
            声明3;        
        }
    -->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>

<h1>我是标题</h1>

</body>
</html>

建议使用这种规范
在这里插入图片描述
css优势：

内容和表现分离
网页结构表现统一，可以实现复用
样式十分丰富
建议使用独立于html的css文件
利用SEO，容易被搜索引擎收录！

1.4 css的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 内部样式 -->
    <style>
        h1{
            color: green;
        }
    </style>
    
    <!-- 外部样式 -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<!-- 优先级：就近原则 -->

<!-- 行内样式：在标签元素中，编写一个style属性，编写样式即可 -->
<h1 style="color: red">我是标题</h1>

</body>
</html>

扩展：外部样式两种写法

连接式：
html

<link rel="stylesheet" href="css/style.css">

导入式：
@import式CSS2.1特有的

<style>
    @import url("css/style.css");
</style>

学习视频链接：https://www.bilibili.com/video/BV1YJ411a7dy?p=2

很皮的皮蛋瘦肉粥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1、什么是CSS及CSS的导入方式

1.1、CSS简介Cascading Style Sheet 层叠级联样式表CSS：表现层（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动1.2、发展史CSS1.0CSS2.0 DIV（块）+ CSS，HTML与CSS结构分离的思想，网页变得简单，SEOCSS2.1 浮动，定位CSS3.0 圆角，阴影，动画… 浏览器兼容性~...
复制链接

扫一扫