CSS

作者: AssertDo | 来源:发表于2019-07-03 10:41 被阅读0次

    引入

    内部样式

    内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:

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

    type="text/CSS" 在html5中可以省略, 写上也比较符合规范, 所以这个地方可以写也可以省略。

    行内样式

    内联样式,又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式,其基本语法格式如下:

    <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
    

    外部样式表(外链式)

    链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式如下:

    <head>
      <link href="CSS文件的路径"  rel="stylesheet" />
    </head>
    

    注意: link 是个单标签哦!!!

    该语法中,link标签需要放在head头部标签中,并且必须指定link标签的三个属性,具体如下:

    href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
    type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。
    rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。
    

    标签选择器

           <style>
                div{
                    color: black;
                }
            </style>
    

    类选择器

            <style>
                .className{
                    color: red;
                }
            </style>
    

    id选择器

    id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下:

    #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
    

    通配符选择器

    * {
      margin: 0;                    /* 定义外边距*/
      padding: 0;                   /* 定义内边距*/
    }
    

    相关文章

      网友评论

        本文标题:CSS

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