CSS样式

    本系列文章的绝大多数内容都来自 w3cschool, 再次感谢。

    前一篇介绍了CSS的基础语法,这一篇简单介绍一下CSS样式。本文只是简单说明CSS可以设置哪些样式,都能实现什么功能,至于这些属性的使用细节,本文不做介绍,请一定要再查资料。比如,下面会介绍background-attachment可以设置背景是否滚动,它有fixed, scroll, inherit三个可选值,但实际上,任何版本的ie浏览器都不支持inherit这个值。

1. CSS背景

  • background-color为元素设置背景色
  • background-image可以设置背景图像
  • background-repeat可以实现页面上对背景图像进行平铺
  • background-position 改变图像在背景中的位置
  • background-attachment设置背景是否滚动

2. CSS文本

  • text-indent 可以实现文本缩进
  • text-align 影响一个元素中的文本行互相之间的对齐方式
  • word-spacing可以改变字(单词)之间的标准间隔
  • text-transform处理文本的大小写
  • text-decoration提供了一些有趣的功能:none,underline,overline,line-through,blink,inherit
  • white-space会影响到用户代理对源文档中的空格、换行和 tab 字符的处理
  • direction影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。

3. CSS字体

  • font-family可以指定某种字体系列或者字体,可继承
  • font-size设置字体尺寸
  • font-style设置字体风格
  • font-variant以小型大写字体或者正常字体显示文本
  • font-weight设置字体的粗细
  • font-stretch对字体进行水平拉伸,但是CSS2.1已经删除了该属性

4. CSS列表

  • list-style-type 修改用于列表项的标志类型
  • list-style-image 用于为列表项设置图片
  • list-style-position设置列表中列表项标识的位置
  • list-style是对上述三个属性的合写,顺序随意,至少一个属性值

5. CSS表格

  • border设置表格边框宽度,颜色和线型
  • border-collapse 设置是否将表格边框折叠为单一边框
  • width 和 height 定义表格的宽度和高度
  • text-align 设置水平对齐方式
  • vertical-align 设置垂直对齐方式
  • td 和 th 元素的 padding 属性可以控制单元格中内容与边框的距离
  • border-spacing 设置分隔单元格的边框的距离
  • caption-side设置表格标题的位置
  • empty-cells设置显示表格中的空单元格
  • table-layout设置显示单元格,行,列的算法
  • background-color设置表格背景色
  • color设置表格内文本的背景色

6. 轮廓

  • outline-color 设置轮廓线颜色
  • outline-style 设置轮廓的样式
  • outline-width 设置轮廓的宽度
  • outline 同时设置以上三个属性
原文地址:https://www.cnblogs.com/yuepeng/p/2008721.html