欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS中的文本格式化与表格

程序员文章站 2022-05-29 14:46:14
...

文本格式化

1. 字体属性

1. 指定字体系列
属性: font-family
取值: value1,value2,... ...
注意:
 字体取值包含中文或特殊符号,使用""引起来 
ex(例子):
 font-family:"宋体","微软雅黑",Arial;
2. 字体大小
属性: font-size 
取值: px或pt或em
ex(例子):
    font-size:24px;
3. 字体加粗
 属性:font-weight
 取值:
    1. normal : 正常体
    2. bold : 粗体
     3. 400~900
     400 : normal
     900 : bold
4. 字体样式
属性:font-style
取值:
  1. normal : 正常体
  2. italic : 斜体
  3.
5. 小型大写字母
作用: 针对英文字符,将小写字符变成大写字符,
     但是大小与小写一样
属性: font-variant
取值:      
  1. normal
  2. small-caps
6. 字体属性
属性: font
取值: style variant weight size family
注意: 使用简写属性时,必须要设置 family
  的值,否则无效;
ex(例子):
   font:12px;/*无效*/
   font:12px "微软雅黑";/*通过*/

2. 文本属性

1.文本属性
属性:color
取值:任意合法颜色
2. 文本排列方式
作用: 指定当前元素中的文本,行内元素,
 行内块元素的水平对齐方式
属性:text-align
取值: left / center / right
3. 文字修饰
作用:指定文本的线条样式
属性:text-decoration
取值:
  1. none
     没有线条显示
  2. underline
     下划线
  3. overline
     上划线
  4. line-through
     删除线<s></s>
4. 行高

作用:

  指定元素中一行数据的高度。如果行高的高度高于文字高度本身,
  那么该行文本将在行高的范围内呈现出垂直居中的显示效果

场合:
1. 控制一行文本垂直居中对齐
2. 设置行间距
属性:
line-height
取值:
以px为单位的数值

5. 首行文本缩进
属性:  text-indent
取值:缩进的距离,以px为单位的数值
6. 文本阴影
属性: text-shadow
取值: h-shadow v-shadow blur color;

命令显示图:

CSS中的文本格式化与表格

网页显示图:
CSS中的文本格式化与表格

表格

1. 表格的常用属性

1. 边距属性: padding 
2. 尺寸属性: width , height
3. 文本格式化属性“
   font-*
   text-align,color,text-indent,... ...
4. 背景属性
   背景色,背景图,渐变
5. border属性
6. vertical-align
   作用: 在单元格中,设置文本的垂直对齐方式
   取值:
     top / middle / bottom

2. 表格的特有属性

1. 边框合并
 属性: border-collapse
 取值:  
   1. separate
      默认值,即分离边框模式
   2. collapse
      边框合并效果
2. 边框的边距
作用: 单元格之间的距离
属性: border-spacing
取值:  
  1. 指定一个值
     表示单元格间水平和垂直见聚师相同的
  2. 指定两个值
     第一个值: 单元格间的水平间距
     第二个值:单元格间的垂直间距
 注意: 
    仅限于边框分离状态时使用,即
    border-collapse:separate; 
3. 标题位置
属性: caption-side
取值:  
  1. top: 默认值,标题显示在表格之上
  2. bottom: 标题显示在表格之下
4. 显示规则
作用: 指定表格的布局方式
  默认布局方式为自动表格布局,即单元格的宽度实际上是由内容来决定的,
  与设定的值无关。
属性: table-layout
取值: 
  1. auto
    默认值,即自动表格布局
  2. fixed
    固定表格布局,即单元格的宽度以设定的值为主,而不取决于内容
    自动表格布局 VS 固定表格布局 

1. 自动表格布局

1. 单元格大小会适应内容大小
2. 缺点: 表格复杂时,加载速度慢
3. 适用于不确定梅列大小的情况下使用
4. 虽然算法较慢,但是能体现传统表格特点

2. 固定表格布局

1. 单元格大小取决于td中设置的值
2. 优点: 加载速度较快
3. 确定每列大小时,可以使用固定表格布局
4. 算法较快,缺点是不够灵活

CSS中的文本格式化与表格