CSS 1 基本

用CSS来修改元素的样式

WAY1
在标签内部通过style属性来设置元素的样式
缺陷：若用内联样式 样式只能对一个标签生效
若希望影响到多个元素 必须挨个修改

WAY2(内部样式表）
将样式编写到head中的style标签
然后通过CSS的选择器来选中元素并为其设置各种样式
可同时为多个标签设置样式 且修改时只需要一处
更方便复用

WAY3（外部样式表）（BEST!）
可将CSS样式编写到一个外部的CSS文件中
然后通过link标签来引入外部的CSS文件
需要通过link标签引入 使样式可以在不同页面之间进行复用
将样式编写到外部CSS文件中 可以使用到浏览器的缓存机制 从而加快网页加载速度 提高用户体验

CSS基本语法

• style标签内部应遵循CSS规范编写
• /**/:CSS中的注释
• CSS基本语法：选择器 ：通过选择器可以选中页面中的指定元素
• 声明块：指定要为元素设置的样式
• p{
  color: red;
  font-size:40px;
  }
  P作用：选中页面中所有的P元素
  类选择器：
  作用：根据元素的class属性值选中一组元素
  语法：class属性值
  将class为red的div字体大小设置为30px

复合选择器

交集选择器
作用：选中同时满足多个条件的元素
语法：选择器1选择器2
div.red{
font-size:30px;
}
/将class为red的div字体的大小设置为30px/

并集选择器
同时选择多个选择器对应的元素
h1,span{
color:green
}

关系选择器

• 父元素：直接包含子元素的元素
• 祖先元素：直接或间接包含后代元素
• 后代元素
• 子元素：直接被父元素包含
• 兄弟元素：拥有相同父元素的元素
  子元素选择器：选中指定父元素的指定子元素
  语法：父元素>子元素

属性选择器

[属性名]选择含有指定属性的元素
[属性名=属性值]选择含有指定属性和属性值的元素
属性名^=属性值[选择属性值以指定值开头的元素]

p[title^=abc]{
color:orange;
}

伪类选择器

伪类（不存在的类，特殊的类）
用来描述一个元素的特殊状态
伪类一般情况下都是：开头
a:first-child 第一个子元素
a:last-child 最后一个子元素
a:nth-child() 选中第n个子元素
特殊值
n 第n个 n的范围0到正无穷
2n 表示选中偶数位的元素

以上这些伪类都是根据所有子元素排序

超链接的伪类
:link 用来表示没访问过的链接
:visited 用来表示访问过的链接
:active用来表示鼠标点击
:hover表示鼠标点击

伪元素选择器

表示页面中一些特殊的并不真实存在的元素
使用::开头
::first-letter第一个字母
::first-line 第一行
::section 选中的内容
::before 元素开始
::after 元素最后

继承

样式的继承：为一个元素设置的样式同时也会应用到他的后代元素上
继承发生在祖先和后代之间
继承的设计是为了方便我们的开发 利用继承可将通用样式统一设置到共同祖先元素上 只需设置一次就可统一样式
不是所有样式都被继承：背景、布局相关的不会被继承

选择器的权重

样式冲突：以不同选择器选中相同元素 并为相同样式设置不同的值时
发生样式冲突 应用那个样式 由选择器的权重决定
权重（从高到低排序）
内联样式1000
id选择器0100
类和伪类选择器0010
元素选择器0001
通配选择器0000
继承的样式无优先级
比较优先级时 需要将所有的选择器优先级相加 最后优先级越高 则越优先显示（分组选择器单独计算）选择器累加不会超过其最大数量级 类选择器再高也不会超过id选择器
如果优先级计算后相同 则优先使用靠下的样式
（慎）可在某一样式后添加！important 则此时该样式获取最高优先级 甚至超过内联样式