css3发展史、快速入门、导入方式

1uuue

已于 2022-08-24 20:34:03 修改

阅读量263

点赞数

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

于 2022-08-22 21:50:27 首次发布

本文链接：https://blog.csdn.net/qq_61727355/article/details/126472592

版权

CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.什么是CSS

1.1 简述

Cascading Style Sheet 层叠样式表【回顾html：超文本标记语言】
CSS：表现层（美化网页）
主要美化对象：字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动

1.2 发展史

CSS1.0：最初于 1996 年发布，由用于添加字体属性的属性组成，例如字体和文本的强调颜色、背景和其他元素。

CSS2.0：DIV（块）+CSS，提出了HTML与CSS结构分离的思想使网页变得简单，如：SEO（搜索引擎优化）

CSS2.1：融入一些更高级的元素：浮动，定位

CSS3.0：圆角边框、阴影、动画…浏览器兼容性

2.快速入门

2.1 项目搭建

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    规范 <style>:可以编写css样式
语法：
选择器{
    声明1；
    声明2；
    声明3；
}
-->
    <style>
        h1{
            color: blueviolet;
        }
    </style>

</head>
<body>
<h1>我是标题</h1>
</body>
</html>

样式分离：建议使用这种规范（单独写一个css文件，用link标签引入css文件效果）

2.2 css的优势

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

3.三种css导入方式

1）行内样式（不符合结构与样式分离的规范）

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

2）内部样式

css中的注释为：/*..........*/

<!--内部样式-->
    <style>
        h1{
            color: blueviolet;
        }
    </style>

3）外部样式

/*外部样式*/
h1{
    color: chartreuse;
}

总结：优先级：就近原则（最高的是行内样式）

举例：

此时内部样式离基准元素更近，参照内部样式来

此时外部样式离基准元素最近，参照外部样式

4）拓展外部样式的两种写法

a.连接式（ link标签）

b.导入式

@import是CSS2.1特有的！

弊端：当网页样式特别多的时候会先展现出结构，然后再去渲染

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

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

</head>
<body>
<h1>biu</h1>
</body>
</html>

1uuue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3发展史、快速入门、导入方式

1.什么是CSS Cascading Style Sheet 层叠样式表【回顾html：超文本标记语言】CSS：表现层（美化网页）主要美化对象：字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动 2.发展史 CSS1.0：最初于 1996 年发布，由用于添加字体属性的属性组成，例如字体和文本的强调颜色、背景和其他元素。CSS2.0：DIV（块）+CSS，提出了HTML与CSS结构分离的思想使网页变得简单，如：SEO（搜索引擎优化） CSS2.1：融入一些更高级的元素：浮动，定位
复制链接

扫一扫

专栏目录