前端基础笔记04-CSS笔记

前端基础笔记04-CSS笔记

1.CSS扩展选择器

• 包含选择器

• 形式：标签名或类名之间用空格隔开，如下

  div span{color:red;}
  

  包含选择器会作用于所有符合条件的后代，包括儿子，孙子，孙子的孙子… ，color属性会作用于div下的所有span标签

• 子代选择器

• 形式：使用大于号>相隔

  div>span{color:red;}
  

  color属性会作用于div下的子代span标签，无法作用于再往下级如孙子代span

• 组合选择器

• 形式：使用逗号相隔

  div,span{color:red;}
  

  作用是两个标签是同级，通常用于不同的标签有相同的样式

• 伪类选择器

• 形式：

  伪类选择器:nth-of-type(n){规则属性}
  

  作用：匹配父类元素的第n个子元素

2.超链接不同状态

超链接的字体颜色，如果想要给超链接设置字体颜色，样式必须直接作用在超链接上的，它不能继承样式

<style>
div{
  color: red;
}
/* 默认为被点击的状态 */
a:link{
  color: red;
}
/* 访问之后的状态 */
a:visited{
  color: darkgoldenrod;
}
/* 处在活动状态 */
a:active{
  color: brown;
}
/* 鼠标悬浮时的状态 */
a:hover{
  color: aqua;
}
</style>

:hover鼠标悬浮状态可以用于所有的标签上

/* 默认的原始状态 */
div{
  width: 200px;
  height: 200px;
  background-color: #B8860B;
}
/* 悬浮状态 */
div:hover{
  background-color: mediumslateblue;
}

3.选择器优先级

当多个选择器进行组合使用的时候，无论是顺序还是本身的优先级大小，最终到底是哪个样式生效，如果想要对样式进行覆盖又该怎么做

!important>行内样式>id选择器>类选择器>标签选择器

4.通配符

*通配符，可以作用在任意的标签上

*{
  color:red;
  font-size:20px;
}

思考：使用通配符和使用选择器有什么区别

开发不建议使用通配符，通配符相当于是作用在了所有的标签上，某些属性并不是所有的标签都能识别，只要加了属性不论是否生效，浏览器都会对属性进行解析然后渲染，这样比较消耗性能

5.常用样式属性

样式名	描述
text-align	行元素水平方向居中
text-decoration	控制下划线 none没有 underline有
line-hight	行高
font-size	设置字体大小
font-weight	设置字体粗细的
font-famliy	设置字体样式
letter-spacing	设置中文字体之间的间距
word-spacing	设置英文单词之间的间距

font字体的复合属性，简写时要求顺序为加粗、大小、类型