web(六)css的基本语法、取值与单位

时间:2024-08-22 18:36:32

css语法包含如下部分:

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

web(六)css的基本语法、取值与单位

css的基本语法规则

  • 忽略大小写(但在定义类选择器时识别大小写),建议使用小写。
  • 多重声明:使用多个属性以及取值同时渲染一组标签。
     p {
    text-align: center;
    color: black;
    font-family: arial;
    }
    <!--
    注意开始括号与结束括号的位置
    属性值要有一个tab键的缩进
    -->

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

  1. 长度类取值单位:用于修饰长度,例如高度宽度等。
    1. 绝对长度单位包括有: cm(厘米), mm(毫米), in(英寸), pt(点1pt = 1/72in ), pc(派卡1pc = 12pt ), px(像素)。

       <div style="width: 100px;background-color: yellow;">
      宽度为100px,背景色为黄色
      </div>
      <!--常用的单位取值为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,以颜色的英文名称表示颜色,但只能表示少量颜色

       <style type="text/css"><!--使用style标签包裹-->
      .container{/*先择器*/
      background-color: red;/*关键字*/
      color: hsl(30%,50%,50%);/*HSL*/
      color: rgb(128,128,128);/*RGB*/
      color: rgba(0,0,0,0.5);/*RGBA*/
      color: #00FFFF;/*HEX*/
      }
      </style>
  3. 文本类特殊取值:用于修饰文本的特殊取值。
    • inherit:声明当前元素的属性继承父容器属性,文本类属性的默认取值。

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

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