CSS简介

1.1 什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

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

1.2 CSS发展史

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: chartreuse;-->
    <!--        }-->
    <!--    </style>-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

CSS的优势：

1、内容和表现分离

2、网页结构表现统一，可以实现复用

3、样式十分的丰富

4、建议使用独立于html的css文件

5、利用SEO，容易被搜索引擎收录！

1.4 CSS的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 内部样式 -->
    <style>
        h1{color: #1f23ff;}
    </style>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级选择:就近原则,行内最优先,在看内部和外部位置-->
<!--行内样式 : 在标签元素中,编写一个style属性,编写样式即可-->
<h1 style="color: chartreuse">我是标题</h1>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!-- 外部样式 -->h1{color: crimson;}
1

<!--导入式@import是CSS2.1特有的
<style>@import url("css/style.css");</style>
1
2

相关阅读:
前端的页面结构
【StableDiffusion秋叶包反斜杠问题】Failed to find xxx\sd-webui-aki-v4.8\...\xxx.pth
jQuery 的DOM操作元素
国产猫罐头可以作为长期主食吗？口碑好的顶级猫罐头推荐
C 风格文件输入/输出（std::fflush）（std::fwide）（std::setbuf）（std::setvbuf）
csdn涨薪秘籍-全网没有之一的pytest 玩转数据驱动测试框架
01 - Android系统架构
pandas plot函数：数据可视化的快捷通道
springcloud14:gateway总结
SwiftUI 4 新功能大全之 Toggle与 Mixed Toggle 多个绑定组件

原文地址：https://blog.csdn.net/Q1575290554/article/details/125496761