前端学习记录6-CSS-外观属性
CSS外观属性color(文本颜色)text-align(文本水平对齐)line-height(行间距,也可以叫行高)text-indent(首行缩进)text-decoration(文本装饰)
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(首行缩进)
属性值说明数值具体的数 或者像素 例如4pxem字符宽度1em 为两个字符 也就是一个汉字相对浏览器窗口宽度百分比 %可为负数
text-decoration(文本装饰)
属性值说明none无装饰blink闪烁underline下划线line-through删除线overline上划线
a{
text-decoration:none
;
}
通常使用此方法清除链接标签中默认存在的下划线
对于想要强调的词语, 例如公司的名称,或者需要在搜索引擎中着重强调的词语 可以使用<em></em>(斜体标签)来做
em{
text-decoration:none
;
}
同样使用此方法清除em标签中默认的斜体样式
