本文介绍了CSS（层叠样式表）的基本概念，包括其在网页美化中的作用，如字体、颜色等样式设置。阐述了CSS的发展历程，从CSS1.0到CSS3.0的特性变化。接着，展示了CSS的基本语法，并通过例子说明了内容与表现的分离、复用性和样式丰富性等优势。此外，还讨论了CSS的三种导入方式：内部样式、行内样式和外部样式，以及它们的优先级。最后，强调了使用独立CSS文件对SEO的益处。
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>
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>
<!-- 外部样式 -->h1{color: crimson;}
<!--导入式@import是CSS2.1特有的
<style>@import url("css/style.css");</style>
扫一扫
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
