多个:<元素...">
美文网首页
第三章CSS基础(上)

第三章CSS基础(上)

作者: 恰我年少时 | 来源:发表于2020-11-09 20:50 被阅读0次

    3.1css根据声明位置不同有三种使用方式:内联、外联、外部
    <元素名 style="属性名:属性值">
    多个:
    <元素名 style=“属性名1:属性值 ; 属性名2:属性值2;……属性名n:属性值n"
    例如为某标题设置样式
    <h1 style="color:blue ; backgroud-color:yellow">标题<h1>

    3.1.2内联样式表
    位于<head>内部,例如
    <style>
    选择器{color:red}
    </style>
    3.1.3外部样式表
    后缀名.css
    <link rel="stylesheet" href="样式文件的路径">
    除了不用写<style></style>外和内联一样

    3.2css选择器
    元素选择器、ID选择器、类选择器、属性选择器
    3.2.1元素选择器
    例p{backgroud:gray}
    3.2.2ID选择器
    在声明时要在id名前加上#。

    id名{属性名1:属性值1;属性名2:属性值2……;}

    test{color:red}

    <p if="test" >这是一个段落</p>
    3.2.3类选择器
    类选择器可以将不同的元素定义为共同的样式。类选择器在声明时在前面加“ . "。
    为了和指定的元素关联使用,需要自定义一个class名称。
    .class名{属性名1:属性值1;属性名2:属性值2;……}
    例如:
    .red{color:red}
    使用:
    <h1 class = "red">这是标题,字体是红色</h1>
    <p class="red">这是段落,字体是红色</p>
    一个段落元素也可以用多个类样式

    3.2.4属性选择器
    属性选择器允许基于元素所拥有的属性进行匹配。
    元素名 [元素属性] { 属性名1:属性值1;属性名2:属性值2……;}
    例如,只对带有href属性的超链接元素<a>设置CSS样式
    a [ href] ={ color:red; }表示将所有带有href 属性的超链接元素设置字体颜色为红色。
    也可以根据具体的属性值进行CSS样式设置:
    a [ href ]="http://www.baidu.com"]{
    color:red;
    }将属性值为百度的超链接设置为红色样式
    如果不确定属性值的完整内容,可以用 [ attribute~=value关键词 ] 查找
    a[ href = "baidu" ] {
    color:red }
    CSS注释: /*********************************/快捷键:"Ctrl"+"/"

    相关文章

      网友评论

          本文标题:第三章CSS基础(上)

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