CSS散装知识点

网页分成三个部分:

• 结构(HTML)
• 表现(CSS)
• 行为(JavaScript)

CSS(层叠样式表)

网页实际上是一个多层的结构,通过CSS可以分别为网页的每一层来设置样式

而最终我们能看到的只是网页的最上边一层

总之一句话,CSS用来设置网页中元素的样式

使用CSS来修改元素的样式

• 第一种(内联样式,行内样式)
• 在标签内部通过style属性来设置元素的样式
• 问题:使用内联样式,样式只能对一个标签生效;如果希望影响到多个元素必须在每一个元素中都复制一遍;并且当样式发生变化时,我们必须要一个一个的修改,非常的不方便.
• 注意: 开发时绝对不要使用内联样式.
• 第二种(内部样式表)
• 将样式编写到head中的style标签里;然后通过CSS的选择器来选中元素并为其设置各种样式;可以同时为多个样式,并且修改是只需修改一处即可
• 内部样式表更加方便对样式进行复用
• 问题:
• 我们的内部样式只能对一个网页起作用,它里面的样式不能跨页面进行复用
• 第三种(外部样式表)  最佳实践
• 可以将CSS样式编写到一个外部的CSS文件中,然后通过link标签来引入外部的css文件;
• 外部样式表需要通过link标签进行引入,意味着只要想使用这些样式的网页都可以对其进行引用,是样式可以在不同页面之间进行复用;
• 将样式编写到外部的CSS文件中,可以使用到浏览器的缓存机制,从而加快网页的加载速度,提高用户的体验.

CSS的基本语法:

选择器 声明块

选择器, 通过选择器可以选中页面中的指定元素,比如p的作用就是选中页面中所有的p元素

声明块,通过声明块来指定要为元素设置的样式,声明块是一个名值对结构: 一个样式名对应一个样式值,名和值之间以:连接,以;结尾.

常用选择器

• 元素选择器:
• 作用: 根据标签名来选中指定的元素
• 语法: 标签名{}
• 例子:p{} h1{} div{}
• id选择器
• 作用: 根据元素的id属性值选中一个元素
• 语法: #id属性值{}
• 例子: #box{} #red{}
• 类选择器:
• 作用: 根据元素的class属性值选中一组元素
• 语法: .class属性值{}
• 通配选择器:
• 作用: 选中页面中的所有元素
• 语法: *{}

复合选择器

• 交集选择器
• 作用: 中同时复合多个条件的元素
• 语法: 选择器1选择器2选择器3选择器n{}
• 注意: 交集选择器中如果有元素选择器,必须使用元素选择器开头
• 选择器分组(并集选择器)
• 作用: 同时选择多个选择器对应的元素
• 语法: 选择器1,选择器2,选择器3,选择器n{}
• 例子: #b1,.p1,h1,span,div.red{}

关系选择器

父元素: 直接包含子元素的元素叫做父元素

子元素: 直接被父元素包含的元素是子元素

祖先元素: 直接或间接包换后代元素的元素叫做祖先元素, 一个元素的父元素也是它的祖先元素

后代元素: 直接或间接被祖先元素包含的元素叫做后代元素, 子元素也是后代元素

兄弟元素: 拥有相同父元素的元素是兄弟元素

• 子元素选择器
• 作用: 选中指定父元素的指定子元素
• 语法: 父元素 > 子元素
• 后代选择器
• 作用: 选中指定元素内的指定后代元素
• 语法: 祖先 后代
• 下一个兄弟选择器:
• 语法: 前一个+下一个
• 选择下边的所有兄弟
• 语法: 兄~弟

属性选择器

[属性名] 选择含有指定属性的元素

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

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

[属性名$=属性值] 选择属性值以指定值结尾的元素

[属性名*=属性值] 选择属性值中含有某值的元素的元素

伪类选择器(不存在的类,特殊的类)

伪类用来描述一个元素的特殊状态

• 比如: 第一个子元素, 被点击的元素, 鼠标移入的元素....

伪类一般情况下都是使用:开头

• :first-child 第一个子元素
• :last-child 最后一个子元素
• :nth-child() 选中第n个子元素
  特殊值:
      n 第n个 n的范围是0到正无穷
      2n\even 表示选中偶数位的元素
      2n+1\odd 表示选中奇数位的元素
  以上这些伪类都是根据所有的子元素进行排序的
• :first-of-type
• :last-of-type
• nth-of-type()
  这几个伪类的功能和上述的类似,不同点是他们是在同类型元素中进行排序的
  解决的问题类型:ul中第一个子元素是span但是ul > li:first-child{color: red;}第一个li并不会变红,但是first-of-type会
• :not() 否定伪类
      将符合条件的元素从选择器中去除(规则与:first-child类似,括号里面也是放这玩意)

a的伪类选择器

• :link 用来表示没访问过的链接(正常的链接)
• :visited 用来表示访问过的链接(PS: 由于隐私的原因, visited这个伪类只能修改链接的颜色)
• :hover 用来表示鼠标移入的状态
• :active 用来表示鼠标点击

伪元素,表示页面中一些特殊的并不真实的存在的元素(特殊的位置)
    伪元素使用::开头

• ::first-letter 表示第一个字母
• ::first-line 表示第一行
• ::selection 表示选中的内容
• ::before 元素的开始
• ::after 元素的最后
  (PS: before 和 after 必须结合content属性来使用)
  例:
  CSS: p::before{content: 'abc'}
  html: <p>Hello</p>
  显示: abcHello