Web期末复习-CSS的样式

---

前言

本博客仅做学习笔记，如有侵权，联系后即刻更改

科普：

一、文本和字体样式

1. 字体样式

字体颜色 color

• color: brown

字体类型 font-family

• font-family: “Times New Roman”;
• 通用字体系列 - 有相似外观的字体系统组合（比如 “Serif” 或 “Monospace”）
• 特定字体系列 - 具体的字体系列（比如 “Times” 或 “Courier”）

字体栈 (font stack)

• font-family: “Trebuchet MS”, Verdana, sans-serif;
• 在指定不同的字体类型时，通常情况下无法保证你想在你的网页上使用的字体都是可用的，使用字体栈 (font stack)给浏览器提供多种选择
• 使用字体栈时，浏览器从列表的第一个开始检查，该字体在当前计算机浏览器中是否可用
• 指定的字体都不可用时，便会使用浏览器的默认字体

字体大小 font-size

• 分为绝对大小和相对大小
• 常用单位
  px像素，是一个绝对单位： font-size: 40px;
  em：px/16=em
  百分比： font-size:100%;

字体粗细 font-weight

• 设置的数值在100~900之间，100对应最细的字体
  设置值为lighter, bolder代表将当前元素的粗体设置为比其父元素粗体更细或更粗一步

字体风格 font-style

• normal - 文本正常显示
• italic - 文本斜体显示
• oblique - 文本倾斜显示

文本装饰 text-decoration

• none: 取消已经存在的任何文本装饰
• underline: 文本下划线
• overline: 文本上划线
• line-through: 贯穿文本的线
• blink：闪烁文本

2. 文本布局风格

文本对齐 text-align

• 不同的语言中默认的对齐方式不同
• left: 左对齐文本
• right: 右对齐文本
• center: 居中文字
• justify: 水平对齐，改变单词之间的差距，使所有文本行的宽度相同

行高 line-height

• 行高属性值不能为负
• normal：默认。设置合理的行间距；
• number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距；
• length：设置固定的行间距；
• %：基于当前字体尺寸的百分比行间距；
• inherit：从父元素继承 line-height 属性的值。

字符间距 letter-spacing

• normal：默认值，字符间没有额外的间隔；
• length：定义字符间的固定间隔（可以为负值）
• inherit：从父元素继承 letter-spacing 属性的值

字间距 word-spacing

• normal：默认；
• length：定义字之间的固定间隔；
• inherit：从父元素继承 word-spacing 属性的值。

二、背景样式

1. 背景颜色： background-color
2. 背景图片

• 设置背景图片：background-image
  属性值通过url指定图片链接
• 平铺背景图像：background-repeat
  默认背景图是平铺重复显示

1. 水平平铺重复 repeat-x
2. 垂直平铺重复 repeat-y
3. 不重复平铺 no-repeat

3. 背景定位和背景关联

• 背景定位：background-position
  top 、left、center、bottom、right两两组合
  如果值定义了一个关键词，那么第二个值将是"center"
  也可以使用百分比和长度值
• 背景关联：background-attachment
  背景图像不随页面滚动而改变位置：将其值设置为fixed

4. 简写背景

• 简化背景属性的书写
  我们可以将这些属性合并在同一个属性中
  使用简写属性时，属性值的顺序为：

1. background-color；
2. background-image；
3. background-repeat；
4. background-attachment；
5. background-position。

表格样式

表格分为：
- caption： 标题
- th：表格头部
- td：表格单元格
- tfoot：表格尾部

1. 表格边框:border

属性值可以按顺序设置的属性为：border-width、border-style和border-color
这样设置的表格有双边框。这是因为表格与th/td元素都有独立的边界

• border-style

1. dotted: 点状；
2. solid: 实线；
3. double: 双线；
4. dashed: 虚线。

2. 折叠边框：border-collapse

border-collapse:collapse; /设置折叠边框/

3. 表格宽高：width和height

总结

小小励志

有些事你现在不做，一辈子都不会做了。
如果你想做一件事，全世界都会为你让路。
《搭车去柏林》