【前端基础】Day 2 CSS层叠样式表
目录
1.CSS简历
2.CSS 基础选择器
2.1标签选择器
2.2类选择器
2.3 id选择器
2.4通配符选择器
2.5总结
3.CSS字体属性
字体属性总结
4.CSS文本属性
4.1颜色
4.2对齐文本
4.3装饰文本
4.4文本缩进
4.5行间距
4.6文本属性总结
5.CSS的引入方式
5.1内部样式表
5.2行内样式表
5.3外部样式表
7.Chrome调试工具
7.1打开调试工具
7.2使用调试工具
1.CSS简历
网页美容师，也是一种标记语言
作用：选择标签+设置这些标签的样式
书写位置在head标签间，在style标签间书写想要的样式
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS语法规范</title>
<style>
/* 选择器 {样式}
给谁改样式 {改什么样式} */
p {
color: red;
font-size: 12px;
/* 修改了文字大小为12像素 */
}
</style>
</head>推荐代码风格：
1.展开格式
2.小写字母
3.空格规范：选择器（标签）和大括号中间保留空格；属性值前面，冒号后面，保留一个空格
2.CSS 基础选择器
2.1标签选择器
2.2类选择器
2.3 id选择器
2.4通配符选择器
2.5总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* 标签选择器 */
p {
color: blue;
}
/* 类选择器: 样式点定义，结构类(class)调用，一个或多个，开发最常用*/
.red {
color: red;
}
.box {
width: 100px;
height: 100px;
font-size: 30px;
}
.green {
background-color: green;
}
.pink {
background-color: pink;
}
/* id选择器:样式#定义，结构id调用，只能调用一次，别人切勿使用 */
#pink {
color: pink;
}
/* 把html body div span li等等标签都更改了 */
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>男</p>
<p>男</p>
<ul>
<li class="red">桃花</li>
<li>蔷薇</li>
</ul>
<div class="box green">绿色</div>
<div class="box pink">粉色</div>
<div id="pink">id选择器</div>
</body>
</html>3.CSS字体属性
字体属性总结
<style>
body {
font-family: 'Microsoft yahei', Arial, Helvetica;
font-size: 16px;
font-weight: 700;
/* 700后不跟单位，等价于bold,400等价于normal,提倡用数字 */
font-style: normal;
/* 复合属性：简写的方式
font: italic 700 16px 'Microsoft yahei'; */
}
/* 标题标签比较特殊，需要单独指定文字大小 */
h2 {
font-size: 16px;
}
</style>4.CSS文本属性
4.1颜色
4.2对齐文本
4.3装饰文本
4.4文本缩进
4.5行间距
4.6文本属性总结
<style>
h1 {
text-align: center;
}
div {
color: deeppink;
text-decoration: line-through;
}
a {
/* 取消a默认的下划线 */
text-decoration: none;
}
p {
text-indent: 2em;
}
</style>5.CSS的引入方式
5.1内部样式表
5.2行内样式表
5.3外部样式表
6.综合案例
7.Chrome调试工具
7.1打开调试工具
打开Chrome浏览器，按下F2键或者右击页面空白处再点击检查。
7.2使用调试工具
