CSS中的文本格式化与表格

文本格式化

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;

命令显示图:

在这里插入图片描述

网页显示图:
在这里插入图片描述

表格

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. 算法较快,缺点是不够灵活

在这里插入图片描述

发布了29 篇原创文章 · 获赞 50 · 访问量 2551
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章