什么是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链接地址")
}
通过某站大佬教学视频后自作笔记