简介

这次主要介绍一些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

结束