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

css发展史、快速入门、导入方式
目录

1.什么是CSS

1.1 简述

1.2 发展史

2.快速入门

2.1 项目搭建

2.2 css的优势

3.三种css导入方式

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 项目搭建
```
html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
 
    <style>
        h1{
            color: blueviolet;
        }
    style>
 
head>
<body>
<h1>我是标题h1>
body>
html>
```
样式分离：建议使用这种规范（单独写一个css文件，用link标签引入css文件效果）

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

1）行内样式（不符合结构与样式分离的规范）
```
<h1 style="color: red">我是标题h1>
```
2）内部样式

css中的注释为：/*..........*/
```
    <style>
        h1{
            color: blueviolet;
        }
    style>
```
3）外部样式
```
/*外部样式*/
h1{
    color: chartreuse;
}
```
总结：优先级：就近原则（最高的是行内样式）

举例：

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

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

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

a.连接式（ link标签）

b.导入式

@import是CSS2.1特有的！

弊端：当网页样式特别多的时候会先展现出结构，然后再去渲染
```
html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
 
    <style>
        @import url("css/style.css");
    style>
 
head>
<body>
<h1>biuh1>
body>
html>
```
相关阅读:
（WebFlux）003、多数据源R2dbc事务失效分析
 React框架基础
 【开题报告】基于SpringBoot的校园周边攻略平台的设计与实现
 高通平台开发系列讲解（AI篇）SNPE工作流程介绍
 2023年05月 Python（五级）真题解析#中国电子学会#全国青少年软件编程等级考试
 JS异步任务的并行、串行，以及二者结合
 支付宝小程序集成mqtt兼容IOS和安卓
 哈希表hash_table
LeetCode刷题（12）
Java封装
原文地址：https://blog.csdn.net/qq_61727355/article/details/126472592

1.什么是CSS

1.1 简述

1.2 发展史

2.快速入门

2.1 项目搭建

2.2 css的优势

3.三种css导入方式