web（六）css的基本语法、取值与单位

标签：enter   定义   关键字   其他   contain   div   多重   back   pre   

css语法包含如下部分：

• 　选择器:用于选择需要添加样式的元素。
•     属性（property）:样式的属性名称,例如color代表颜色。
•  　取值与单位：属性对应的值以及单位。
• 　语法规则：css的某些固定语法。
• 　注释：用户对css的程序描述，不执行。

css的基本语法规则

• 忽略大小写（但在定义类选择器时识别大小写），建议使用小写。
• 多重声明：使用多个属性以及取值同时渲染一组标签。

  1 p {
  2 text-align: center;
  3 color: black;
  4 font-family: arial;
  5 }
  6 <!--
  7 注意开始括号与结束括号的位置
  8 属性值要有一个tab键的缩进
  9 -->

   

css的取值与单位：css通过取值与单位对属性进行描述，可分为如下三类

1. 长度类取值单位：用于修饰长度，例如高度宽度等。

   1. 绝对长度单位包括有： cm（厘米）, mm（毫米）, in（英寸）, pt（点1pt = 1/72in ）, pc（派卡1pc = 12pt ）, px（像素）。

      1 <div style="width: 100px;background-color: yellow;">
      2         宽度为100px，背景色为黄色
      3 </div>
      4 <!--常用的单位取值为px-->

       

   2. 相对长度单位：按照一定比例换算后计算长度，em,rem,%都是相对长度单

      <!--常用的单位取值为rem（css3标准），%-->

      • em（相对于当前标签内文本的字体尺寸）

        <div style="width: 10em>
        <div style="width: 8em; font-size: 12px;">
        </div>
        </div>
        <!--浏览器的默认字体大小为16px，字体属性具备继承特性，可继承父容器的字体属性值-->
        <!--浏览器都有最小字体限定，例如chrome最小字体为12px，通过特殊属性可以调节-->

         

      • rem（相对于html标签内文本的字体尺寸）

        html {
            font-size: 30px;
        }
        <div style="width: 10rem; ">
        </div>
        <!--rem是css3标准单位，因此在低版本的pc浏览器中无法兼容-->
        <!--rem常用在手机端开发，根据不同屏幕给html设定不同的字体
        在其他标签中使用rem作为长度单位，从而完成响应式布局-->

         

      • 百分比（相对于父容器相同属性的比例）

        <div style="width: 50%; ">
                <div style="width: 50%; ">
                </div>
        </div>
        <!--百分比是css2的取值单位，可以在pc端完成响应式布局-->

         

        　　

2. 颜色类取值单位：用于修饰字体、背景等属性

   • HEX:#ffffff：以16进制表示颜色，但是不能表示透明(最常用) 。

   • RGBA: rgba(0,0,0,0.5)，由光的三原色红色(R)、绿色(G)、蓝色(B)以及透明组合而成。优点是支持透明。（css3标准）

   • HSL:hsl(30%,50%,50%)，由色调(H)、饱和度(S)、亮度(L)三个颜色通道，按百分比组合而成。

   • RGB:rgb(128,128,128)，由光的三原色红色(R)、绿色(G)、蓝色(B)，按比例组合而成。

   • 关键字：color:red，以颜色的英文名称表示颜色，但只能表示少量颜色

     1 <style type="text/css"><!--使用style标签包裹-->
     2     .container{/*先择器*/
     3         background-color: red;/*关键字*/
     4         color: hsl(30%,50%,50%);/*HSL*/
     5         color: rgb(128,128,128);/*RGB*/
     6         color: rgba(0,0,0,0.5);/*RGBA*/
     7         color: #00FFFF;/*HEX*/
     8     }
     9 </style>

      

3. 文本类特殊取值：用于修饰文本的特殊取值。

   • inherit：声明当前元素的属性继承父容器属性，文本类属性的默认取值。

   • initial ：声明当前元素的属性为浏览器的默认值。（css3,在IE中不兼容）

     <div style="font: ‘微软雅黑‘ bold 30px;">
         <div style="font: inherit;">
             微软雅黑
         </div>
         <div style="font: initial;">
             默认字体
         </div>
     </div>

      

web（六）css的基本语法、取值与单位

标签：enter   定义   关键字   其他   contain   div   多重   back   pre   

原文地址：http://www.cnblogs.com/-maji/p/7466885.html