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

相关阅读:
y133.第七章服务网格与治理-Istio从入门到精通 -- Istio认证及配置案例(十九)
微服务组件之Zuul
计算机视觉与深度学习 | 基于GPS/BDS多星座加权图因子优化的行人智能手机导航
C++Qt开发——动画框架、状态机框架
SpringBoot 过滤器和拦截器的区别
论文解读：《DeepIPs：使用基于深度学习的方法对SARS-CoV-2感染的磷酸化位点进行全面评估和计算识别》
Three outline物体边界线条实例
249 h221 最大岛屿面积
2023-简单点-树莓派picamera2介绍和要点
yocto machine class解析之flashlayout-stm32mp

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