web开发笔记-css常用属性(1)

简介

这次主要介绍一些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:
color: #B0F566
 color: RGB(74, 242, 161)
 color: RGBA(74, 242, 161, .5) 
color: HSL(200, 86%, 63%);
 color:HSLA(200, 86%, 63%, .5)

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:
        
 font-style: normal
        
 font-style: italic
        
 font-style: oblique

font-style.png

font-weight: 设置文本的粗细

• normal（默认）
• bold（加粗）
• bolder（相当于和标签）
• 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:
 
font-weight:normal
 
font-weight:bold
 
font-weight:bolder
 
font-weight:lighter
font-weight:600
 
font-weight:100

font-weight.png

font-size: 设置字体的大小

• 默认值：medium
• 可选参数值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
• 相对于父标签中字体的尺寸进行调节。可选参数值：smaller、 larger
• 百分比指定文字大小。
• 用长度值指定文字大小，不允许负值。
  示例:

-css:
 .xx-small {
            font-size: xx-small;
        }
        
        .xx-large {
            font-size: xx-large;
        }
        
        ._200 {
            font-size: 200%;
        }
        
        .length_30px {
            font-size: 20px;
        }
-html:
    
font-size: medium
    
font-size: xx-large
    
font-size: xx-small
    
font-size: 200%
    
font-size: 20px

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:
    
 white-space: normal; 任何值得做的，就把它做好。
    
 white-space: pre; 任何值得做的，就把它做好。
    
 white-space: nowrap;任何值得做的，就把它做好。
    
 white-space: pre-wrap; 任何值得做的，就 把 它 做 好。
    
 white-space: pre-line; 任何值得做的， 就 把 它 做 好。

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:
    
text-left
    
text-center
    
text-right

text-align.png

vertical-align: **文本的垂直对齐方式 **
可详见web开发笔记之vertical-align

结束