CSS 基础与选择器学习笔记#

Link 标签#

引入外部 CSS 文件或网页图标：

1
<link rel="stylesheet" href="styles.css">
2
<link rel="icon" href="baidu.com">

类选择器#

选择指定 class 的元素：

1
.class{
2
  Xxx
3
}

基础选择器优先级#

Id 选择器 > 类选择器 > 标签选择器 > 全局选择器

后代元素选择器#

选择祖先元素的后代元素：

1
祖先 后代{
2
  属性:属性值;
3
}

示例（box 内所有 a）：

1
.box a{
2
  font-size:10px;
3
}

子元素选择器（仅子元素生效）：

1
.box>a{
2
  color:red;
3
}

兄弟选择器#

1
前一个兄弟+后一个兄弟{
2
  属性:属性值;
3
}

1
A~b{
2
  属性:属性值;
3
}

并集选择器 & 交集选择器#

1
选择器1,选择器2…{
2
}

1
选择器1选择器2选择器3…{
2
}

字体样式#

• font-size：字体大小
• font-weight：字体粗细
• font-family：字体，多字体用逗号分隔
• font-style：是否斜体

后代元素会继承父元素样式，自身有样式则不继承。

颜色表示方式#

• 英文单词：red、black
• RGB：rgb(0-255,0-255,0-255)
• 十六进制（最常用）：#aabbcc，可简写如 #fff
• RGBA：带透明度，rgba(r,g,b,0-1)

文本设置#

• text-align：对齐方式（left/center/right）

• 1
  text-decoration
  

  ：文本装饰

  • underline：下划线
  • overline：上划线
  • none：无装饰
  • line-through：删除线

背景样式#

• background-color：背景颜色

• background-image：背景图片

• 语法：

  1
  background-image: url(地址);
  

  背景图片默认是左上角开始显示,默认会平铺,直到弄满元素位置,这意味着默认情况下会产生重复

• 1
  background-repeat
  

  ：平铺方式

  • repeat：默认全平铺
  • repeat-x：X 轴平铺
  • repeat-y：Y 轴平铺
  • no-repeat：不平铺

• background-size：背景大小（宽 高 /cover/contain）

• background-position：背景位置

• background-attachment：背景是否随滚动条滚动