CSS基础

作者: Recalcitrant | 来源:发表于2019-06-06 17:43 被阅读0次

    一、CSS基本语法

    1.基本语法

    /*注释*/
    selector {属性1:属性值1;属性2:属性值2;......}
    

    2.语法说明

    (1)选择器

    HTML标记名、自定义标识符。

    (2)属性键值对

    {属性1:属性值1;属性2:属性值2;属性3:属性值3;......}
    属性与属性值之间以冒号连接,每个属性键值对之间以分号分隔。

    (3)复合属性

    在CSS中,有些属性可以表示多个属性的值。
    示例:

    /*以下两种写法等效:*/
    p { font-size: italic; font-size: 20px; font-family: 黑体; }
    p { font: italic 20px 黑体; }
    

    3.注释

    /*单行注释*/
    
    
    /*
    
    多行注释
    
    */
    

    二、CSS定义与引用

    1.内联样式表(行内样式表)(Inline Style Sheet)

    <标记 style="属性: 属性值; 属性: 属性值;…">
    

    2.内部样式表(Internal Style Sheet)

    <style type="text/css">
        选择器1 { 属性1:属性值1;属性2:属性值2;...... }
        选择器2 { 属性1:属性值1;属性2:属性值2;...... }
        选择器3 { 属性1:属性值1;属性2:属性值2;...... }
        .........
    </style>  
    

    示例:

    <head>
        <style type="text/css">
            .div1,.div3{background:#99ffff;width:200px;height:100px;}   
             #div2{background:#00cc00;width:200px;height:100px;}
            p,h1{font-size:18px; color:#003366;}
        </style>  
    </head>
    

    3.链接外部样式表(Link External Style Sheet)

    <link type="text/css" rel="stylesheet" href="外部样式表的文件名称"/ >
    

    4.导入外部样式表(Import External Style Sheet)

    <style type="text/css">
        @import url("外部样式表的文件1名称");
        @import url("外部样式表的文件2名称");
        .........
        选择器1 { 属性1:属性值1;属性2:属性值2;...... }
        选择器2 { 属性1:属性值1;属性2:属性值2;...... }
        选择器3 { 属性1:属性值1;属性2:属性值2;...... }
        .........
    </style>
    

    三、CSS选择器

    1.CSS选择器类型

    (1)标记选择器

    (2)类选择器

    (3)id选择器

    (4)伪类选择器

    (5)属性选择器

    2.CSS选择器声明

    (1)集体声明

    (2)全局声明

    (3)派生选择器(上下文选择器)

    四、CSS继承与层叠

    相关文章

      网友评论

          本文标题:CSS基础

          本文链接:https://www.haomeiwen.com/subject/bcslzqtx.html