1、初试css

1什么是css

• Cascading Style Sheets,层叠样式表

2、CSS 的作用

• 内容与表现分离
• 网页的表现统一，容易修改
• 丰富的样式，使得页面布局更加灵活
• 减少网页代码量，增加网页的浏览速度，节省网络宽带
• 运用独立于页面的css，有利于网页被搜索引擎收录

2、css的引入方式

• 嵌入式
  • 在标签中添加style属性，在该属性值中编写样式

<标签名 style="属性值：属性值">

• 内部式
  • 在head标.签中添加style标签，在该标签中编写样式

<style>
  选择器{
      属性名：属性名
  }
</style>

• 外部式
  • 新建一个css文件，通过link标签引入该文件

<link rel="stylesheet" href="文件路径名">

3、CSS的选择器

1、基本选择器

• 标签选择器
  • 以标签名字作为选择器
• 类选择器
  • 第一步：在标签中添加class属性
  • 第二步：选择器部分：类名
• ID选择器
  • 第一步：在标签中添加id属性
  • 第二步：选择器部分：#id

2、层次选择器

• 后代选择器
  • 父元素 子元素{}
• 子代选择器
  • 父元素>子元素{}
• 相邻兄弟选择器
  • 元素+兄弟元素（后面的兄弟{}
• 通用兄弟选择器
  • 元素~兄弟元素{}

3、伪类选择器

• :hover 鼠标悬浮时
• :first-child 选中父元素中第一个子元素
• :last-child 选中父元素中最后一个子元素
• :nth-child(N) 选中父元素中第N个子元素

4、属性选择器

• 元素[属性名]
  • 举例：input[name]: 选中所有包含name属性的input元素
• 、元素[属性名=属性值]
  • 举例：input[name = gender] : 选中所有name值为gender的input元素

5、分组选择器(并集选择器)

• 元素1，元素2{}

6、通用选择器

• *{}：选中页面所有元素

7、结构化标签div与span

div与span标签的异同点
    相同点:都是结构化标签，都是作为容器使用
    不同点：1、span标签一般用于包裹文本，div标签一般用于包裹元素
           2、span标签是行内元素，div是块状元素

4、CSS的基本样式

1、字体样式

• font-style：字体风格
• font-weight：字体粗细
• font-size：字体大小
• font-family：字体类型、

【简写形式】font：风格 粗细 大小 类型

2、文本相关样式

• color：文本颜色
• text-ailgn：文本水平方向的对齐方式（left、center、right）
• text-indent：文本首行缩进
• line-height：行高
• letter-spacing：字间距（字符间的距离）
• word-spacing：字间距（单词间的距离）
• text-transform：单词大小写转换
• text-decoration：文本装饰（overline、underline、line-through、none）

3、背景相关样式

• background-color：背景颜色
• background-image：背景图片
• background-repeat：用来设置背景图片的重复方式
• background-position：用来设置背景图片的位置

【简写方式】background:背景颜色 背景图片 背景平铺方式 背景位置

5、盒模型

1、什么是盒模型

• 所有HTML元素可以看作盒子，封装周围的HTML元素
• 它包括：边距（margin），边框（border），填充（padding），和实际内容（content）

2、边框样式

• border-width：边框粗细
• border-style：边框风格
• border-color：边框颜色
• border-radius：边框圆角
  • 当有一个属性值，表示四个角度的圆角程度
  • 当有2个属性值，分别表示左上和右下，右上和左下
  • 当有3个属性值，分别表示左上，右上和左下、右下
  • 当有4个时，表示左上、右上、右下、左下

【简写形式】border：边框粗细 边框风格 边框颜色

• 边框的几个方向
  • border-top：上边框
  • border-bottom：下边框
  • border-left：左边框
  • border-right：右边距

3、内外边距

• 外边距指当前元素的边框与边框之间的距离
• 内边距则是指边框和内容直接的距离
• 在css中设置内外边距：
  • 当有一个属性值，表示四个边
  • 当有2个属性值，分别表示上和下，右和左
  • 当有3个属性值，分别表示上，右和左、下
  • 当有4个时，表示上、右、下、左

4、其他常用样式

• box-size
  • 属性值content-box（默认）：会被内容撑大
  • 属性值border-box：不会被内容撑大
• box-shadow：水平阴影距离 垂直阴影距离 阴影大小 模糊程度 阴影颜色