什么是CSS

1.CSS是什么
2.CSS选择器（重点+难点）
3.美化网页（文字，阴影，超链接，列表，渐变）
4.盒子模型
5.浮动
6.定位
7.网页动画（特效效果）
推荐网站
菜鸟教程

1.1什么是CSS

Cascading Sryle Sheet 层叠级样式表

CSS：表现（美化网页）

字体，颜色，边距，高度，宽度，定位，浮动……
在这里插入图片描述

1.2 发展史

CSS1.0

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

CSS2.1 浮动，定位

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

1.3快速入门

规范-style标签在head中进行
可以编写CSS的代码,每一个声明，最好使用分号结尾
语法：
选择器{
声明1；
声明2；
声明3;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 规范-style标签 在<head>中进行
	可以编写CSS的代码,每一个声明，最好使用分号结尾
	语法：
		选择器{
						声明1；
						声明2；
						声明3;
					} -->
<style>
    p{
    color: red;
}
</style>
</head>
<body>
    <p>第一个CSS</p>
</body>
</html>

但是遇到复杂数据时，建议使用link标签（单独创建一个css文件然后使用link标签引用）如图所示
在这里插入图片描述
CSS的优势：

1，内容和表现分离

2，网页结构表现统一，可以反复使用

3，样式十分的丰富

4，建议使用独立于HTML的CSS文件

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

Vue

1.4CSS的三种导入方式

在这里插入图片描述
优先级：行内样式最靠近元素，第一执行，外部样式和内部样式在head 中看距离元素位置
拓展：外部样式两种写法
链接式：（常用）

<link rel="stylesheet" href="css地址">

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

style{
@import url("css链接地址")
}

通过某站大佬教学视频后自作笔记

P1.CSS简单介绍及基础入门

什么是CSS

1.1什么是CSS

1.2 发展史

1.3快速入门

1.4CSS的三种导入方式

猜你喜欢