目标
了解CSS是什么？用来干嘛的？
掌握CSS的语法结构
掌握CSS的引入方式
掌握基础选择器的使用
CSS指的是层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言，是描述标记语言页面格式的标准。CSS使开发人员能够分离内容和可视元素，以实现更好的页面控制和灵活性。
层叠：层叠指的就是样式的优先级，当产生冲突时以优先级高的为准。
作用：用来美化咱们的网页的。
语法规则：
选择器{ e.g p{
声明块 color: back;
} }
选择器：通过选择器可以选中页面的制定元素
声明块：通过声明块来制定要为元素设置样式
CSS的引入方式：
1、行内样式（直接在标签中写样式 style="" font-size:字体大小 多个样式同时作用时，通过；分号分割）
<p style="font-size: 10px;">《古惑仔》是最佳拍档电影公司出品的香港黑帮题材</p>
2、内部样式 在HTML文件中写样式 样式位置在style标签中写（一般放在head中）使用选择器调用
<style>
p{
font-size: 100px;
color: green;
}
</style>
<body>
<p >《古惑仔》是最佳拍档电影公司出品的香港黑帮题材系列电影，正传电影由刘伟强执导郑伊健、陈小春主演</p>
</body>
3、外部样式 样式的内容会单独写在一个外部文件中，通过引入的方式对元素作用
index.css文件中写
p{
font-size: 100px;
color: green;
}
index.html文件中
<link rel="stylesheet" href="index.css">
<body>
<p >《古惑仔》是最佳拍档电影公司出品的香港黑帮题材系列电影，正传电影由刘伟强执导郑伊健、陈小春主演</p>
</body>
基础选择器
元素选择器
Id选择器
Class选择器
通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 元素选择器*/
/* p{
font-size: 20px;
color: green;
}*/
/* p{
/* ID选择器 #==id id值不能重复*/
/* #red{
font-size: 20px;
color: red;
}*/
/* 类选择器 。==class id选择器只能选择其中一个元素 类选择器可以选择多个元素
当元素中有多个class属性值，通过空格分隔
当多个选择器同时作用于同一个元素是，最后出现的样式会覆盖之前的样式*/
/*.yellow{
font-size: 20px;
color: lightblue;
}
.abc{
color: red;
}*/
/* 通配选择器*/
*{
font-size: 20px;
color: rgb(174, 230, 173);
}
</style>
</head>
<body>
<h1>回乡偶书</h1>
<p>少小离家老大回；</p>
<p id="red">乡音无改鬓毛衰。</p>
<p class="yellow abc">儿童相见不相识；</p>
<p class="yellow">笑问客从何处来。</p>
</body>
</html>
复合选择器
后代选择器
父子选择器
<!DOCTYPE html> /*父子选择器*/zh
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box>p{
color: red;
}
</style>
</head>
<body>
<div id="box">
<div>
<p>段落一</p>
<div>
<p>段落二</p>
</div>
</div>
<p>段落三</p>
<p>段落四</p>
</div>
</body>
</html>
总结导图
扫一扫
879
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
