CSS基础2

文本

• 文字颜色color
  属性名color
  颜色的值可以采用3种方式
  1.预定义的颜色名字
  比如red,gray,white,black,pink
  2.rgb格式
  分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色
  3.16进制的表示 #00ff00 等同于 rbg(0,255,0)

  粉红色

• 对齐 text-align
  属性:text-align
  值：left,right,center
  div是块级元素，其默认宽度是100%，所以文本有对齐的空间前提。
  但是，span却看不出右对齐效果，为什么呢？
  因为span是内联元素其默认宽度就是其文本内容的宽度
  简单说就是文本已经粑在其边框上了，对齐是看不出效果来的

左对齐
 

右对齐
 

居中


span看不出右对齐效果 

• 文本修饰 text-decoration
  属性：text-decoration
  值： overline

上划线
删除效果
下划线
闪烁效果，大部分浏览器已经取消该效果
默认的超链
去掉了下划线的超链

• 行间距 line-height
  属性：line-height
  值：数字或者百分比

默认行间距
默认行间距
默认行间距
默认行间距


200%行间距
200%行间距
200%行间距
200%行间距

• 字符间距
  属性：letter-spacing
  值： 数字

 

abcdefg abcdefg 


abcdefg abcdefg

• 单词间距 word-spacing
  属性：word-spacing
  值： 数字

 

abcdefg abcdefg 
 

abcdefg abcdefg 

• 首行缩进 text-indent
  属性：text-indent
  值： 数字

没有缩进效果的一段文字没有缩进效果的一段文字


有缩进效果的一段文字有缩进效果的一段文字

• 大小写 text-transform
  属性：text-transform
  值： uppercase 全部大写 capitalize 首字母大写 lowercase 全部小写

 
abcD
 
abcD
 
abcD

• 空白格white-space
  属性：white-space值：
  normal 默认。多个空白格或者换行符会被合并成一个空白格
  pre 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器也不会换行。
  pre-wrap 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器，会换行。
  nowrap 一直不换行，直到使用br

字体

• 尺寸 font-size
  属性：font-size
  值：数字或者百分比

正常大小
30px大小的文字
50%比例的文字
0.5em 等同于 50%比例的文字

• 风格 font-style
  normal 标准字体
  italic 斜体

 
标准字体
标准字体
斜体

• 粗细 font-weight
  normal 标准粗细
  bold 粗一点

 
标准字体
标准字体
粗一点

• 字库 font-family

 
默认字库 font family:default 
设置字库 font-family: Times New Roman
设置字库 font-family: Arial
设置字库 font-family: 宋体, 这种字体是IE默认字体
设置字库 font-family: 黑体
设置字库 font-family: 楷体
设置字库 font-family: 微软雅黑, 这个字体是火狐默认字体

• font
  把大小，风格，粗细，字库都写在一行里面

 
默认字体
斜体的 粗体的 大小是30px的 "Times New Roman" 

鼠标样式

鼠标样式