这是我参与[第五届青训营]伴学笔记创作活动的第1天

1.CSS（Cascading Style Sheets）是什么？

• 定义页面元素的样式
• 设置字体和颜色
• 设置位置和大小
• 添加动画效果

2.选择器

2.1 写法

选择器名称 { 属性名：属性值；}

2.2 选择器的定义形式

2.2.1 外联式（单独一个 css 文件）

<link rel="stylesheeet" href="style.css">

2.2.2嵌入式（写在html文件头部）

<style>
li {margin:0;}
</style>

2.2.3内联式（写在标签内）

<p style="margin:1em 0">内联式</p>

2.3选择器的使用方法

• 按照标签名类名或id
  
• 按照属性
  
• 按照 DOM树中的位置
  

2.3.1基础选择器

名称	定义	说明	使用
通配符选择器	*	全部应用	自动应用
id选择器	#	唯一	id=“ ”
类选择器	.	可以应用多次	class=" "
标签选择器	标签名		自动应用

2.3.2 属性选择器

定义	说明	使用
[属性名]		自动应用
标签名[属性名=“属性值”]	特定值	自动应用
标签名[属性名^=" "]	以双引号内容开头的属性值	自动应用
标签名[属性名 $=" "]	以双引号内容结尾的属性值	自动应用

2.2.3 伪类选择器

• 状态性伪类
  

  • 超链接伪类：
    a:link 默认状态
    a:hover 悬停状态
    a:active 点击状态
    a:visited 已访问状态
    
• 结构性伪类
  

  • li:first-child 如果 li 是父标签的第一个孩子
    
  • li:last-child 如果 li 是父标签的最后一个孩子

2.2.4 复合选择器

2.2.5 选择器组

A,B,C{ } 给 A、B、C 同样的样式

3.颜色

3.1RGB

#XXXXXX X 取值为 A~F
rgb( X,X ,X) X 取值为 0~255

3.2HSL

3.3 英文

3.4 alpha 透明度

0 为透明，1 为不透明

4.文字属性

4.1 字体

font-family

• 设置 font-family 时，在最后加一个通用字体族，如果对方电脑上没有一开始设置的字体，就使用通用字体族显示。
• 中英文混排时，先写英文字体再写中文字体。
  

@font-face {
font-family: ;
src:url( ) format( );
}

4.2 字号

font-size:20px
font-size:2em 父级的 2 倍
font-size:80% 父级的 80%

4.3 字体样式

font-style：normal 正常
font-style：italic 斜体

4.4 字体粗细

font-weight 取值 100~900
normal=400 bold=700

4.5 行高

line-height：1.6em 自己字体大小的 1.6 倍

4.6 简写

font：font-style font-weight fontsize/line-height font-family;
注意：只能省略前两个，顺序不能换。

4.7 空白 white-space

nomal：碰到边缘自动换行，多个空格只显示一个
nowrap：强制不换行
pre:换行，空格正常显示
pre-wrap：自动换行，空格和自己手敲的换行都正常显示。
pre-line：自动换行，空格合并，自己手敲的换行正常显示。

5.调试 CSS

• 右击页面/检查
• ctrl+shift+I