「这是我参与2022首次更文挑战的第23天，活动详情查看：2022首次更文挑战」
P45-体验css
css：层叠样式表
作用：表现层。给html设置样式
写在sytle标签里，放在head标签里，title下面
写法：选择器{属性名:属性值:}
选择器：查找标签
<!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>学习css</title>
<style>
/* css注释 */
p {
color: red;
font-size: 30px; /*x像素*/
background-color: blanchedalmond;
width: 400px;
height: 100px;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
</body>
</html>
P46-CSS引入方式
三种写法：
- 内嵌式：css放在style标签内，一般style标签放在head标签内
- 外联式：css写在单独.css文件内，通过link标签引入
- 行内式：写在标签的style标签内，省略选择器和花括号
<!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>学习css</title>
<!-- 内嵌式引入css -->
<style>
/* css注释 */
h1 {
color: red;
font-size: 30px; /*x像素*/
background-color: blanchedalmond;
width: 400px;
height: 100px;
}
</style>
<!-- 外联式引入css-->
<link rel="stylesheet" href="my.css">
</head>
<body>
<p>这是一个p标签</p>
<h1>这是一级标题</h1>
<!-- 行内式引入css -->
<div style="color: green; font-size: 30px;">这是div标签</div>
</body>
</html>
P47～50-选择器
类型：
标签选择器
结构：标签名{css属性名:属性值:}
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：
- 标签选择器选择的是一类标签，而不是单独某一个
- 标签选择器无论嵌套关系有多深，都能找到对应的标签
类选择器
结构：.类名{css属性名:属性值;}
作用：通过类名，找到页面中带有这个类名的标签，设置样式
注意点：
- 所有标签上都有class属性，class属性的属性值成为类名
- 类名可以由数字，字母，下划线，中划线组成，但不能以数字或中划线开头
- 一个标签可以同时有多个类名，类名中间以空格隔开
- 类名可以重复，一个类选择器可以同时选中多个标签
id选择器
结构：#id属性值{css属性名:属性值;}
作用：通过id属性值，找到页面中带有id属性值的标签，设置样式
注意点：
- 所有标签上都有id属性
- id属性值类似于身份证号码，一个页面中是唯一的，不可重复
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签
- 是为了js而生，不是为了样式
通配符选择器
结构：*{css属性名:属性值;}
作用：找到页面中所有标签，设置样式
注意点：
- 开发中使用极少，只会在极特殊情况下使用
- 可用于去除标签默认的margin和padding
* {
margin: 0;
padding:0;
}
P51～54-文字基本样式
字体样式：
- 字体大小：font-size：数字+px;
chrome默认16px
- 字体粗细：font-weight
取值：
关键字或纯数字400正常normal；700加粗bold
9种粗细，100-900，实际可能只有正常和加粗两种
工作中推荐使用数字，注意没有单位
- 字体样式：font-style，控制是否倾斜
两种取值，默认normal，倾斜取值italic
- 字体类型：font-family
vscode，本机有无字体显示的颜色不一样；
一般会设置多个，最后写无衬线系列sans-serif
会逐个选择本机有的，保证一定是无衬线字体
- 字体类型：font属性连写
复合属性
写法：font:style wight size family;
空格隔开，只能省略前两个，即使用默认值。
如果连写和单独写一起用，要么把单独写在连写下面；要么单独写在连写里
P53-拓展-层叠性
样式的层叠性，同时设置了多个color，后面覆盖前面。
p{
color:red;
color:blue;
}
实际显示蓝色
