🌻CSS 基本样式

type
status
date
slug
summary
tags
category
icon
password
☀️
点击带三角形的标题可以展开收缩内容。

文字属性

  • font-family：字体族
    • font-family: Microsoft YaHei, Heiti SC, sans-serif;
    • 各个字体名用逗号隔开，执行顺序是从左向右依次查找
  • font-size：字体大小
    • 30px
  • font-wight：字体粗细
    • 0-700
  • font-style：是否倾斜
    • normal
    • italic
  • text-indent：文本缩进
    • 20px
    • 1.2em（推荐：1em = 当前标签的字号大小）
  • text-align：水平对齐方式
    • left：默认，左对齐
    • center：居中对齐
    • right：右对齐
    • text-align本质是控制内容的对齐方式，属性要设置给内容的父级。
  • text-decoration：文本修饰线
    • none：无
    • underline：下划线
    • line-through：删除线
    • overline：上划线
  • color：文本颜色
    • red 、green、blue
    • rgb(r,g,b,a)，RGB各自取值 0-255，a 指透明度，取值 0-100，a 可不写
    • #RRGGBB
  • line-height：行高
    • 30px
    • 2（字体大小的倍数）
    • 行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。
垂直居中技巧：行高属性值等于盒子高度属性值
注意：该技巧适用于单行文字垂直居中效果

文字复合属性

复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。
注意：字号和字体值必须书写，否则 font 属性不生效 。
font: 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）

背景属性

  • background-color：背景色
  • background-image：背景图
    • url(./images/1.png)
  • background-repeat：平铺方式
    • no-repeat：不平铺
    • repeat：平铺（默认）
    • repeat-x：水平方向平铺
    • repeat-y：垂直方向平铺
  • background-position：背景图位置
    • left：左侧
    • right：右侧
    • center：居中
    • top：顶部
    • bottom：底部
    • 50px -100px
      • 水平：正数向右；负数向左
      • 垂直：正数向下；负数向上
      • 可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中
  • background-size：背景图大小
    • cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
    • contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
    • 百分比：根据盒子尺寸计算图片大小
    • 数字 + 单位（例如：px）
  • background-attachment：背景不会随着元素的内容滚动。
    • fixed

背景复合属性

属性名：background（bg）
属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）
🌻
欢迎在下方留言讨论~
CSS 基本选择器CSS 布局-显示模式
Loading...
目录