1.什么是CSS
1.什么是CSS
- Cascading Style Sheet 层叠样式表。
- CSS:表现(美化网页)。
- 字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动。
2.CSS发展史
- CSS 1.0:1994年 10月提出;
- CSS 2.0:DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO;
- CSS 2.1:浮动,定位;
- CSS 3.0:圆角、阴影、动画…浏览器兼容性。
3.快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3快速入门</title>
<!-- 规范:<style>可以编写CSS的代码,每一个声明最好以“;”结尾
语法:
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>CSS3测试</h1>
</body>
</html>
- 建议单独写一个css文件,用link标签引入css文件效果 。
<link rel="stylesheet" href="css/hello.css">
CSS的优势:
- 内容和表现分离;
- 网页结构表现统一,可以实现复用;
- 样式十分的丰富;
- 建议使用独立于html的css文件;
- 利用SEO,容易被搜索引擎收录!
CSS的3种常用导入方式:
优先级:就近原则——行内样式 > 内部样式 > 外部样式
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
<!--内部样式-->
<style>
h1{
color: blue;
}
</style>
<!--行内样式:在标签元素中,编写一个style属性,编写样式即可-->
<h1 style="color: aquamarine">CSS3测试</h1>
-
拓展:外部样式两种方法。
-
链接式—HTML
<!--外部样式--> <link rel="stylesheet" href="css/style.css">
-
导入式—@import是CSS2.1特有的!
<!--导入式--> <style> @import url("css/style.css"); </style>
-
2.CSS选择器
作用:选择页面上的某一个后者某一类元素。
1.基本选择器
标签选择器—选择一类标签。
- 格式:标签名{}
<style>
p{
font-size: 80px;
}
</style>
类选择器class—选择所有class一致的标签,跨标签。
- 格式:.类名{}
<style>
/*
类选择器的格式: .class的名称{}
好处:可以多个标签归类,是同一个class,可以复用!
*/
.test01{
color: darkorange;