css基础1

最新推荐文章于 2025-12-21 22:33:43 发布

原创最新推荐文章于 2025-12-21 22:33:43 发布 · 266 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

本文将深入讲解HTML和CSS的选择器基础，包括标签选择器、类选择器和ID选择器的应用，以及如何通过font属性控制字体样式，如大小、粗细和倾斜。此外，还会介绍文本对齐、文本修饰、行高和垂直居中等文本布局技巧。

#博学谷it技术支持#

引入方式
基础选择器
- 标签选择器
  - 结构：标签名{ css属性名：属性值}
  - 注意：
    - 标签选择器选择的是一类标签，而不是单独某一个
    - 标签选择器无论嵌套关系有多深，都能找到对应的标签
- 类选择器
  - 结构：.类名{css属性名：属性值}
  - 注意：
    - 所有标签上都有class属性，class属性的属性值成为类名
    - 一个标签可以同时有多个类名，类名之间以空格隔开
    - 类名可以重复，一个类选择器可以同时选中多个标签
- id选择器
  - 结构：#id属性值{css属性名：属性值}
  - 注意：
    - id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
    - 一个标签上只能有一个id属性
    - 一个id选择器只能选中一个标签
    - id选择器只能在文档中使用一次
- 通配符选择器
  - 结构：*{css属性名：属性值}
  - 作用：找到页面中所有的标签，设置样式
字体和文本样式
- 字体大小
  - 属性名：font-size
  - 取值：数字+px
  - 注意：
    - 谷歌浏览器默认文字大小是16px
    - 单位需要设置，否则无效
- 字体粗细
  - 属性名：font-weight
  - 取值：（100～900）
    - 400——normal——正常
    - 700——bold——加粗
- 文字倾斜
  - 属性名：font-style
  - 取值：
    - normal——正常（默认）
    - italic——倾斜
- 字体
  - 属性：font-family
  - 常见取值：字体1，字体2，字体3
- 样式的层叠问题
  - 如果给同一个标签设置类相同的属性，此时样式会层叠（覆盖），写在最下面的会生效
- 字体font相关属性的连写
  - 属性名：font（复合属性）
  - 取值：font：style weight size family；顺序不可更改
  - 省略要求：只能省略前两个，如果省略了相当于设置了默认值
- 文本缩进
  - 属性：text-indent
  - 取值：
    - 数字+px
    - 数字+em（em=当前标签的font-size的大小）
- 文本水平对齐方式
  - 属性：text-align
  - 适用范围：文本、span标签、a标签、input标签、img标签（需要给以上元素的父元素设置）
  - 取值
    - left——左对齐
    - center——居中对齐
    - right——右对齐
- 文本修饰
  - 属性名：text-decoration
  - 取值
    - underline——下划线
    - none——无装饰线
    - line-through——删除线
    - overline——上划线
- 行高
  - 属性名：line-height
  - 取值：数字+px ；或倍数（当前标签font-size的倍数）
  - font连写：font：style weight size/line-height family
- 垂直居中
  - 技巧：设置行高属性值=自身高度属性值（前提：文字是单行的）
选择器进阶
- 后代选择器
  - 选择器1 选择器2{ }（用空格隔开）
- 子代选择器
  - 父选择器>子选择器{ }
- 并集选择器
  - 语法：选择器1，选择器2{ }（用逗号分隔开）
  - 作用：同时选择多组标签，设置相同的样式
- 交集选择器
  - 语法：选择器1选择器2{ }（中间无标点符号）
  - 既又原则（既被选择器1选中，又被选择器2选中的标签，对其设置样式）
- hover伪类选择器
  - 语法：选择器：hover{ }
  - 作用：选中鼠标悬停在元素上的状态，设置样式
背景颜色
- 属性名：background-color （bgc）
- 属性值
  - 颜色取值
    - 关键字
    - rgb表示法、rgba表示法
背景图片
- 属性名：background-image（bgi）
- 属性值：background-image：url（‘图片路径’）；
- 注意点
  - 背景图片中url可以省略引号
  - 背景图片默认是在水平和垂直方向平铺的
  - 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
背景平铺
- 属性名：background-repeat（bgr）
- 属性值
  - repeat——（默认值）水平和垂直方向都平铺
  - no-repeat——不平铺
  - repeat-x——沿着x轴方向平铺
  - repeat-y——沿着y轴方向平铺