前端学习记录6-CSS(外观属性)

CSS外观属性

color(文本颜色)

四种表现形式
属性	属性值	解释	特殊点
预定义颜色值	red,green,blue,skyblue,gray等等等	最基本的英语表述颜色
十六进制色彩	#FFFFFF,#000000	使用取色工具获取,总共六位取值范围为十六进制中0-F的任意值组合排列	当出现重复字符是 例如#CCCCCC 可表示为#CCC 要注意十六进制色彩 实质为#(RRGGBB) 所以要注意缩写项目必须是 相同的R 相同的G 相同的B 其他情况 例如#F1F1FF 不可缩写
RGB色彩	rgb(0,0,0),rgb(255,255,255)	使用取色工具可获取,三个属性取值范围为0-255 也同样表述为 rgb(r,g,b) 每一位就代表对应的R 对应的G 对应的B	在rgb()中可使用百分比属性,例如:rgb(100%,95%,5%)此表示方法效果呈现如同使用字符表示 百分比对应的就是此数值*255的结果
RGBA色彩(rgba)	rgb(0,0,0,0.0),rgb(255,255,255,1.0)	基本含义与rgb相同 但不同的是在rgb中加入了alpha(透明度)	alpha缩写为a,取值范围为0.0-1.0之间的任意值 注意此样式为CSS3中的样式 在ie9版本以下的浏览器不兼容 会无法调用 alpha中的属性

text-align(文本水平对齐)

属性值	说明
left	左对齐(默认值)
center	居中对齐
right	右对齐

line-height(行间距,也可以叫行高)

属性值	说明
px	绝对长度单位 像素
em	相对长度单位
%	相对长度单位 百分比

文字的行高在样式中可具体理解为下面的内容

html标签

<div>我爱你</div>

css样式

div{
	width:50px;
	text-align:center;
	line-height:50px;
}

此时div标签中的文字显示效果为水平垂直居中显示;

-容器边界
■line-height的边距
文字内容
■ line-height的边距
-容器边界

line-height样式中的数值如果大于容器宽度则会向下显示

-容器边界
■line-height的边距
文字内容
-容器边界	■ line-height的边距

小于容器宽度则会向上显示

-容器边界	■line-height的边距
文字内容
■ line-height的边距
-容器边界	

等于容器宽度则会垂直居中显示

-容器边界	
■line-height的边距
文字内容
■ line-height的边距
-容器边界	

text-indent(首行缩进)

属性值	说明
数值	具体的数 或者像素 例如4px
em字符宽度	1em 为两个字符 也就是一个汉字
相对浏览器窗口宽度百分比 %	可为负数

text-decoration(文本装饰)

属性值	说明
none	无装饰
blink	闪烁
underline	下划线
line-through	删除线
overline	上划线

a{
	text-decoration:none;
}
通常使用此方法清除链接标签中默认存在的下划线

对于想要强调的词语,
例如公司的名称,或者需要在搜索引擎中着重强调的词语
可以使用<em></em>(斜体标签)来做

em{
	text-decoration:none;
}
同样使用此方法清除em标签中默认的斜体样式