1.认识CSS
1.1 什么是CSS
层叠样式表(Cascading Style Sheets)
作用:美化网页
字体、颜色、边距、高度、背景等等
1.2 语法
选择器{声明1;声明2;声明3;}
1.3 导入方式
内部样式:在标签中编写style属性的css代码
外部样式:CSS方式
行内样式:在标签元素中编写一个style属性
优先级:就近原则
2.选择器
作用:选择页面上的某一个或者一类元素
2.1 基本选择器
1.标签选择器 :选择一类标签
2.类选择器:选择所有class属性一致的标签
3.id选择器:全局唯一
优先级:不遵循就近原则
id选择器>class选择器>标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <link rel="stylesheet" href="css/style.css">-->
<style>
/*h1{ //1.标签选择器不能单独设置某一个标签的特性*/
/* color: #ff0000;*/
/* border-radius: 24px;*/
/* background: blue;*/
/*}*/
/* 2.类选择器的格式 .class的名称{}
好处,多个标签归类,是同一个class*/
/*.t1{*/
/* color: red;*/
/*}*/
/*.t2{*/
/* color: green;*/
/*}*/
/*.t3{*/
/* color: aqua;*/
/*}*/
/* 3.id选择器 #id名称{} id必须保证全局唯一,不能复用 */
</style>
</head>
<body>
<h1 class="t1">我是标题1</h1>
<h1 class="t2">我是标题2</h1>
<h1 class="t3">我是标题3</h1>
</body>
</html>
2.2 层次选择器
1.后代选择器:在某个元素的后面
2.子选择器:只选择当前下面的一代
3.相邻兄弟选择器:同辈的下面的一个
4.通用选择器:下面的所有同辈元素
/*后代选择器*/
body p{
background: red;
}
/*子选择器*/
body>p{
background: green;
}
/*相邻选择器*/
.active + p{
background: blue;
}
/*通用选择器*/
.active ~ p{
background: blue;
}
3.美化网页
span标签:重点要突出的字