携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情
css写在style标签中，style标签一般写在head标签里面，title标签下面
css注释写法：/* */；快捷键：crl+/
结构：选择器{css属性}
CSS引入方式
内嵌式： CSS写在style标签中
·提示：style标签虽然可以写在页面任意位置，但是通常约定写head标签中
外联式：CSS写在一个单独的.CSS文件中
·提示：需要通过link标签在网页中引入
行内式：CSS写在标签的style属性中
·提示：基础班不推荐使用，之后会配合js使用
使用场景：
内嵌式：作用范围：当前页面 使用场景：小案例 位置：写在style标签中
外联式：作用范围：多个页面 使用场景：项目中 位置：写在单独的css文件，通过link标签引入
行内式：作用范围：当前标签 使用场景：配合js使用 位置：写在style标签中
选择器
标签选择器
结构：标签名{css属性名：属性值；}
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：
1.标签选择器选择的是一类标签，而不是单独某一个
2.标签选择器无论嵌套关系有多深，都能找到对应的标签
<style>
p{
color:red;
}
</style>
类选择器
结构：.类名{css属性名：属性值；}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
1.所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
2.类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3.一个标签可以同时有多个类名，类名之间以空格隔开
4.类名可以重复，一个类选择器可以同时选中多个标签
5.加.表示定义类。引用的时候不用加点
id选择器
结构：#id属性值{css属性名：属性值；}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：
1.所有标签上都有id属性
2.id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
3.一个标签上只能有一个id属性值
4.一个id选择器只能选中一个标签
通配符选择器
结构：*{css属性名：属性值；}
作用：找到页面中所有的标签，设置样式
注意点：
1.开发中使用极少，只会在极特殊情况下才会用到
2.在基础班小页面中可能会用于去除标签默认的margin和padding（后续讲解）
文字和文本样式
字体大小font-size
属性名：font-size
取值：数字+px
注意：
谷歌浏览器默认字体大小是16px
单位需要设置，否则无效
字体粗细font-weight
属性名：font-weight
关键字：
正常：normal
加粗：bold
纯数字：100~900的整百数：
正常 400
加粗 700
字体倾斜font-style
属性名：font-style
取值：正常：normal
倾斜：italic
\
字体选择font-family
属性名：font-family
常见取值：具体字体1，具体字体2，具体字体3，具体字体4..…字体系列
·具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……
·字体系列：sans-serif、serif、monospace等……
渲染规则：
1.从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
2.如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体注意点：
1.如果字体名称中存在多个单词，推荐使用引号包裹
2.最后一项字体系列不需要引号包裹
3.网页开发时.尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
ps：如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效
复合属性
一个属性冒号后面书写多个值的写法
注意点：如果需要同时设置单独和连写形式
·要么把单独的样式写在连写的下面
·要么把单独的样式写在连写的里面
文本缩进text-indent
属性名：text-indent
取值：
·数字px
·数字+em（推荐：1em=当前标签的font-size的大小）
文本水平对齐text-align
属性名text-align
取值：
属性值 效果
left 左对齐
center 居中对齐
right 右对齐
注意点：
·如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
text-align:center 能让哪些元素水平居中？
1.文本
2.span标签、a标签
注意点：
1.如果需要让以上元素水平居中，text-align:center需要给以上元素的父元素设置
如：
文本修饰text-decoration
取值：
属性值 效果
underline 下划线（常用）
line-through 删除线（不常用）
overline 上划线（几乎不用）
none 无装饰线（常用）
注意点：
·开发中会使用text-decoration:none；清除a标签默认的下划线
行高line-height
取值：
·数字+px
·倍数（当前标签font-size的倍数）
应用：
1.让单行文本垂直居中可以设置 line-height：文字父元素高度
2.网页精准布局时，会设置 line-height：1 可以取消上下间距
行高与font连写的注意点：
·如果同时设置了行高和font连写，注意覆盖问题
·font:style weight size/line-height family；
<style>
P{
/*line-height：50px；*/
/*自己字号的1.5倍*/
/*line-height：1.5；*/
/*66px宋体倾斜加粗行高是2倍*/
font:italic 7ee 66px/2；
}
</style>
扩展颜色取值问题
属性名
如文字颜色：color
背景颜色：background-color
属性值：
颜色表示方式 表示含义 属性值
关键词 预定义的颜色名 red、green，blue、yello.....
rgb表示法 红绿蓝三原色。每项取值范围：0-255 rgb（0，0，0）、rgb （255，255，255）、rgb （255，0，0）....
rgba表示法 红绿蓝三原色a表示透明度|取值范围是0～1 rgba（255，255，255， 0.5）、rgba（255，0， 0， 0.3）...
十六进制表示法 #开头，将数字转换成十六进制表示 #000000、#ff0000、 #e92322，简写：#000、#f00
扩展标签水平居中 margin:0 auto
如果需要让div、p、h（大盒子）水平居中？
·可以通过margin：0 auto；实现
注意点：
1.如果需要让 div、p、h（大盒子）水平居中，直接给当前元素本身设置即可
2.margin：0 auto一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度
