CSS样式（背景、文本、字体）学习笔记

来源：互联网发布：netstat安装 centos 编辑：程序博客网时间：2024/05/16 18:00

仅仅是自己对着W3CSchool整理的一些 CSS 基础知识点，敲一遍加深下印象也方便以后复习。

CSS背景
- 背景色
  - 使用background-color属性为元素设置背景色

例如：

p{background-color: gray}

增加内边距使背景色使背景色从元素中的文本向外延伸

p{background-color: gray; padding: 20px;}

background-color不能继承
background-color默认值为transparent（透明）

背景图像
- 使用background-image属性为元素设置背景图片
- 例如：应用于body

body {background-image :url(/i/eg_bg_04.gif);}

或应用于段落

p.flower{background-image: rul(a.jpg);}

background-image也不能继承
background-image默认值为none

背景重复
- 使用background-repeat属性对背景图像平铺
- 默认值为repeat表示垂直水平方向重复
- repeat-x或repeat-y可以设置平铺方向
- no-repeat不允许图像在任何方向上平铺
背景定位
- 使用background-position改变图像在背景中的位置
- 属性值可以用不同类型
  - 关键字：center,top,right等

例如 background-position:center;

百分数值

例如 background-position:50% 50%;

百分数值同时应用于元素和图像，它使得图像中心和元素50% 50%（中心）对齐

长度值

长度值指的是元素内边距区左上角的偏移，偏移点是图像的左上角。

背景关联
- 使用background-attachment设置背景是否随内容滚动
- 例如：背景不随内容滚动

background-attachment :fixed;

默认值:scroll即背景随内容滚动

CSS文本
- 缩进文本
  - 使用text-indent属性使得段落首行缩进
  - 例如 p{text-indent: 2em}
  - 该属性只对块级元素有效，对行级元素无效

行级元素可以通过左内边距实现相同效果

使用负值

该属性可以设置为负值形成悬挂缩进的效果

为了避免超出浏览器窗口左边界，建议同时设置一个内或外边距

使用百分比值

该百分比值是相对于父元素的相应属性值

继承

text-indent属性可以被子元素继承

水平对齐
- text-align属性可以影响元素在文本行相互之间的对齐方式
  - left,right,center会导致文本左对齐、右对齐和居中
  - justify可以实现水平对齐
字间隔
- 使用word-spacing属性改变字（单词）之间的标准间隔
- 默认值为normal即 0
- 值可以是 px,em，可以使负值
字母间隔
- 使用letter-spacing属性修改字符或字母之间的间隔
- 默认值为normal即 0
- 值可以是px,em，可以使用负值
字符转换
- 使用text-transform属性处理文本的大小写
- 属性包括四个值
  - none
  - uppercase
  - lowercase
  - capitalize:对首字母大写
- 例如:h1{text-transform:uppercase}
文本装饰
- 使用text-decoration属性装饰文本
- none:关闭应用到元素上的所有装饰，例如去除超链接的下划线
- underline:下划线
- overline:上划线
- line-through:中划线（删除线）
- blink:闪烁？
处理空白符
- 使用white-space属性影响用户代理对空格、换行和tab字符处理
- 默认属性normal即把所有空格合并为一个功课，忽略元素中的换行
- pre:浏览器会注意额外的空格，甚至回车
- nowrap:防止元素除了使用br元素以外的换行
- pre-wrap:保留空白符序列，正常换行
- pre-line:合并空白符序列，正常换行
文本方向
- 使用direction属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向
- 默认值ltr:显示从左到右的文本
- rtl:显示从右到做的元素

CSS字体
- CSS字体系列
  - 通用字体系列-拥有相似外观的字体系统组合（共5种）
    - Serif字体
    - Sans-serif字体
    - Monospace字体
    - Cursive字体
    - Fantasy字体
  - 特定字体系列-具体的字体系列（比如"Times"或"Courier"）
- 指定字体系列
  - 使用font-family属性定义文本的字体系列
    - 使用通用字体系列（不关心哪一种具体字体）
      - 例如：body {font-family: sans-serif;}
      - 用户代理会从sans-serif字体系列中选择一个字体，并将其应用到body元素中。（包括body的继承）
    - 使用特定字体系列（设置更具体的字体）
      - 例如：h1{font-family: Georgia}
      - 如果用户代理没有相应字体，会使用其默认字体显示
    - 组合使用
      - 例如：h1{font-family: Georgia,serif}
      - 如果用户没有指定的具体字体，但安装了该系列中的一种字体，用户代理就会使用同系列字体
    - 指定一系列字体
      - 例如：p{ font-family: Times, TimesNR,'New Century Schoolbook',Georgia,'New York',serif;}
      - 用户代理会根据该列表顺序查找，如果都不可用，则使用最后指定的通用字体中的某一个
    - 使用引号
      - 当字体名中有空格、#或$之类的符号是，需要在声明中加引号
      - 单引号和双引号皆可，但在style中不能和style本身的引号冲突
  - 字体风格
    - 使用font-style规定斜体文本
      - normal -文本正常显示
      - italic -文本斜体显示
      - oblique -文本倾斜显示
    - italic和 oblique的区别
      - italic对每个字母的结构改动来反映外观变化
      - oblique则是对正常数值的文本进行倾向
      - 通常在浏览器中看不出区别
  - 字体变形
    - font-variant设定小型大写字母
    - 小型大写字母不是一般的大写字母，也不是小写字母
    - 例如：p{font-variant:small-caps;}
  - 字体加粗
    - font-weight属性设置文本的粗细
    - 使用bold关键字将文本设置为粗体
    - 使用100~900为字体指定9级加粗都
      - 100对应最细
      - 900对应最粗
      - 400对应normal
      - 700对应bold
    - bolder会比继承值更粗
    - lighter会比继承值更细
    - 例如：
      - p.normal{font-weight: normal;}
      - p.thick{font-weight: bold;}
      - p.thicker{font-weight:900}
  - 字体大小
    - font-size属性设置文本的大小
    - 使用绝对值
      - 将文本设置为指定的大小
      - 不允许用户在浏览器中改变文本大小（不利于可用性）
      - 绝对大小在确定了输出的物理尺寸时很有用
    - 使用相对值
      - 相对于周围的元素来设置大小
      - 允许用户在浏览器中改变文本大小
    - 若未规定大小，普通文本的默认大小为16px，即1em
    - 使用像素设置文本大小，例如:
      - h1{font-size:60px;}
      - h2{font-size:40px;}
      - p{font-size:14px}
    - 使用em来设置字体大小（W3C推荐）
      - 1em等于当前字体的尺寸
      - 例如：h1{font-size:3.75em}
    - 结合使用百分比和EM
      - 在所有浏览器中均有效的方案是为body元素（父元素）以百分比设置默认的font-size值
      - 例如：

body{font-size:100%;}

h1{font-size:3.75em;}

h2{font-size:2.5em;}

p{font-size:0.875em;}

0 0