CSS表现 :网页美化
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动...
发展史:
CSS1.0 只有简单的字符调整
CSS2.0 DIV(块)+ CSS,HTML与CSS结构分离思想,网页变得简单,SEO
CSS2.1 浮动,定位
CSS3.0 圆角、阴影、动画...浏览兼容性
入门:
link为链接CSS文件
CSS优势:
内容和表现分离
网页结构表现统一,可以实现复用
样式十分丰富
利用SEO,容易被搜索引擎收录
CSS的3种导入方式:
内部样式
行内样式
外部样式
优先级:就近原则:谁离元素进谁优先级高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式-->
<style>
h1{
color: #42bcff;
}
</style>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<!--行内样式:在标签中元素中,编写一个style属性,编写样式即可-->
<h1 style="color: #518eff"></h1>
<!--优先级:就近原则:谁离元素进谁优先级高-->
</body>
</html>
/*外部样式*/
h1{
color: antiquewhite;
}
外部样式两种写法:
1.链接式
<link rel="stylesheet" href="CSS/style.css">
2.导入式
CSS2.1特有的
<!--外部样式:导入式-->
<style>
@import url("CSS/style.css");
</style>