简介
这次主要介绍一些css常用属性
内容
1. 颜色属性：
** color**
- HEX（十六进制色：color: #FFFF00 --> 缩写：#FF0）
- RGB（红绿蓝，使用方式：color:rgb(255,255,0)或者 color:rgb(100%,100%,0%)）
- RGBA（红绿蓝透明度，A是透明度在0~1之间取值。使用方式：color:rgba(255,255,0,0.5)）
- HSL（CSS3有效,H表示色调，S表示饱和度，L表示亮度，使用方式：color:hsl(360,100%,50%)）
HSLA（和HSL相似，A表示Alpha透明度，取值0~1之间。）
** transparent**
全透明，使用方式：color: transparent;
** opacity**
元素的透明度，语法：opacity: 0.5;
属性值在0.0到1.0范围内，0表示透明，1表示不透明。
示例:
-css: .colorHEX {
color: #B0F566;
}
.colorRGB {
color: RGB(74, 242, 161);
}
.colorRGBA {
color: RGBA(74, 242, 161, .5);
}
.colorHSL {
color: HSL(200, 86%, 63%);
}
.colorHSLA {
color: hsla(200, 86%, 63%, .5);
}
-html:
<div class="colorHEX">color: #B0F566</div>
<div class="colorRGB"> color: RGB(74, 242, 161)</div>
<div class="colorRGBA"> color: RGBA(74, 242, 161, .5) </div>
<div class="colorHSL">color: HSL(200, 86%, 63%);</div>
<div class="colorHSLA"> color:HSLA(200, 86%, 63%, .5)</div>
color.png
2. 字体属性:
** font-style: 用于规定斜体文本**
- normal 文本正常显示
- italic 文本斜体显示
- oblique 文本倾斜显示
示例:
-css:
.normal {
font-style: normal;
}
.italic {
font-style: italic;
color: HSL(200, 86%, 63%);
}
.oblique {
font-style: oblique;
color: RGB(74, 242, 161);
}
-html:
<div class="normal"> font-style: normal</div>
<div class="italic"> font-style: italic</div>
<div class="oblique"> font-style: oblique</div>
font-style.png
font-weight: 设置文本的粗细
- normal（默认）
- bold（加粗）
- bolder（相当于<strong>和<b>标签）
- lighter （常规）
- 100 ~ 900 整百（400=normal，700=bold）
示例:
-css:
.bold {
font-weight: bold;
color: HSL(200, 86%, 63%);
}
.bolder {
font-weight: bolder;
color: HSL(200, 86%, 63%);
}
.lighter {
font-weight: lighter;
color: HSL(200, 86%, 63%);
}
._100 {
font-weight: 100;
color: HSL(200, 86%, 63%);
}
._600 {
font-weight: 600;
color: HSL(200, 86%, 63%);
}
-html:
<div class="">font-weight:normal</div>
<div class="bold">font-weight:bold</div>
<div class="bolder">font-weight:bolder</div>
<div class="lighter">font-weight:lighter</div>
<div class="_600">font-weight:600</div>
<div class="_100">font-weight:100</div>
font-weight.png
font-size: 设置字体的大小
- 默认值：medium
- <absolute-size>可选参数值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
- <relative-size>相对于父标签中字体的尺寸进行调节。可选参数值：smaller、 larger
- <percentage>百分比指定文字大小。
- <length>用长度值指定文字大小，不允许负值。
示例:
-css:
.xx-small {
font-size: xx-small;
}
.xx-large {
font-size: xx-large;
}
._200 {
font-size: 200%;
}
.length_30px {
font-size: 20px;
}
-html:
<div class="">font-size: medium</div>
<div class="xx-large">font-size: xx-large</div>
<div class="xx-small">font-size: xx-small</div>
<div class="_200">font-size: 200%</div>
<div class="length_30px">font-size: 20px</div>
font-size.png
3. 文本属性:
white-space: 设置元素中空白的处理方式
- normal：默认处理方式。
- pre：保留空格，当文字超出边界时不换行
- nowrap：不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签
- pre-wrap：保留空格，当文字碰到边界时换行
- pre-line：不保留空格，保留文字的换行，当文字碰到边界时换行
示例:
-css:
.pre {
white-space: pre;
}
.nowrap {
white-space: nowrap;
}
.pre-wrap {
white-space: pre-wrap;
}
.pre-line {
white-space: pre-line;
}
-html:
<div class="box "> white-space: normal; 任何值得做的，就把它做好。</div>
<div class="box pre"> white-space: pre; 任何值得做的，就把它做好。</div>
<div class="box nowrap"> white-space: nowrap;任何值得做的，就把它做好。</div>
<div class="box pre-wrap"> white-space: pre-wrap; 任何值得做的，就 把 它 做 好。</div>
<div class="box pre-line"> white-space: pre-line; 任何值得做的， 就 把 它 做 好。</div>
white-space.png
text-align: **文本的水平对齐方式 **
- left
- center
- right
-css:
.text-left {
text-align: left
}
.text-center {
text-align: center
}
.text-right {
text-align: right
}
-html:
<div class="box text-left">text-left</div>
<div class="box text-center">text-center</div>
<div class="box text-right">text-right</div>
text-align.png
vertical-align: **文本的垂直对齐方式 **
可详见web开发笔记之vertical-align
