CSS基础

1 CSS书写位置

（1）行内：将style当作标签本身的一个属性，它的属性值为具体的样式
（2）内嵌：将以下代码写在HTML的head标签里，title标签下

<style type = "text/css">
   type属性text/css申明当前文档是css类型
   选择器 {
   		样式名：值；
   }
</style>

• 选择器：给哪些标签设置样式
• 样式名: 值，设置成什么样
  （3）外链：将以下代码写在HTML的head标签里，title标签下
  <link href = "css文件位置" rel = "stylesheet" type = "text/css" />，rel属性用于定义当前文件是一个样式表

权重：
按书写位置：行内 > 内嵌 = 外链
按选择器：id > 类名 > 标签名
!important 属性：定义一个 !important 属性，可以将优先级提至最高

2 选择器

2.1 选择器分类

（1）简单选择器：标签名选择器、类名选择器、id选择器
（2）复合选择器：后代选择器、并列选择器…

2.2 标签名选择器

<style type = "text/css">
  标签名 {
    CSS属性代码
  }
</style>

2.3 类名选择器

step1: 在需要被同时选中的元素身上设置class属性，同时给他们定义相同的class属性值（类名）。
class 命名规则：

• 不能以数字开头
• 不能是纯数字
• 不建议使用中文
• 不包含特殊字符（_-除外）
• 不采用保留字

step2: 设置css样式

<style type = "text/css">
  .类名 {
    CSS属性代码
  }
</style>

2.4 id选择器

step1: 在需要选中的元素上设置id属性，定义唯一的id属性值。id的命名规则同class

step2: 设置css样式

<style type = "text/css">
  # id名 {
    CSS属性代码
  }
</style>

2.5 后代选择器

<style type = "text/css">
祖先元素  后代元素1  后代元素2... {
  CSS属性代码
}
</style>

• 以某个元素为起点，这个元素可以通过标签名、class或id选择器选中
• 祖先元素与后代元素空格隔开，表示向下级查找
• 被查找的元素必须存在于祖先元素的树状分支上（必须是该祖先的后代，否则找不到）
• 组成后代选择器的每个位置上都可以由标签名、class或id选择器充当

2.6 并列选择器

适用于不同模块中的元素具有相同css样式的情况下

<style type = "text/css">
选择器1,选择器2...选择器n{
  CSS属性代码
}
</style>

2.7 复合选择器的优先级

给3种选择器定义一个数值来表示他们选中元素的能力：

• id选择器：100
• 类名选择器：10
• 标签名选择器：1

累加求和计算最终权重，权重的比较不受继承的影响

3 盒子模型

一个盒子的主要属性有：width, height, padding（内填充）, border(外边框), margin（外边距）

3.1 边框：border

语法：border：粗细 线型 颜色，省略颜色后默认为黑色，省略粗细和线型后不显示边框，线型： solid、dashed

边框的小属性：

• 上边框：border-top
• 左边框：border-left
• 右边框：border-right
• 下边框：border-bottom

3.2 内填充：padding

指盒子中间的内容到盒子边框的距离。

内填充的小属性：

• padding-top
• padding-bottom
• padding-left
• padding-right

简写属性：padding: 上 右 下 左
padding: 15px 12px 24px, 表示上为15，左右为12，下为24

3.3 外边距：margin

指盒子与盒子之间的距离。

外边距的小属性：

• margin-top
• margin-bottom
• margin-left
• margin-right

简写属性：margin: 上 右 下 左
margin: 15px 12px 24px, 表示上为15，左右为12，下为24

4 CSS3新特性

（1）圆角属性: border-radius：数值，简写属性： border-radius: 左上 右上 右下 左下

（2）渐变色背景: linear-gradient(to bottom,180deg,red 0%,blue 40%,yellow 100%)

• 第1个值：to right 从左到右，to bottom 从上到下
• 第2个值：90deg 90的渐变
• 第3-最后一个值：渐变颜色

（3）盒子阴影：box-shadow：水平方向阴影 垂直方向阴影 阴影大小 阴影颜色 , inset表示内阴影

（4）透明背景：background：rgba(红色色号，绿色色号，蓝色色号，透明度值)

（5）文字阴影：text-shadow：x y r color

• 前两个参数分别表示阴影在x轴y轴的偏移量，单位px，可设置负值，水平向右为正，垂直向下为负
• 第3个参数表示阴影的模糊程度，数值越大越模糊
• 第4个参数表示阴影的颜色