• css(1)


    一个元素最多只能有一个id选择器,但是可以有多个类选择器。

    my.css中添加

    .style4{
    font-size:italic;
    text-decoration:underline;
    color:green;
    }

    .style1{
    font-weight:bold;
    font-size:30px;
    background-color:pink;
    }

    html文件中如何使用多个class选择器:

    <span class="style1 style4">新闻3</span>

    在引用多个class选择器的时候,用空格隔开,

    当class选择器发生冲突时,以在css文件中,最后出现的class选择器样式为准。

    优先级:id选择器(#style1{})>类选择器(.style2{})>hmtl选择器(body{})>通配符选择器(*{})

    html选择器和通配符选择器都是没有名字的,作用域可能就是html文件中的所有标签。

    在css文件中,如果多个类/id选择器它们有相同的部分,我们可以把相同的css样式放在一起。

    在有些css文件中,我们可以把多个类选择器或者id选择器共同的部分提取出来,写在一起。

    这样可以节省带宽,使css文件更加简洁。

    HTML <font> 标签

    定义和用法

    <font> 规定文本的字体、字体尺寸、字体颜色。

    写css文件的时候,优先选择类选择器,以防止后面修改时,可以添加id选择器,而且id选择器一个元素只能使用一次。需要对网页进行修改时,可以添加id选择器,因为它的优先级比较高。

    font-style表示字的风格,如italic

    font-style表示字的字体,如华文新魏.

    确实可以使用子类选择器让局部html元素标签的样式发生改变,而不需要像html选择器一样让所有元素的样式都发生改变。

    如:

    .style1{
    font-size:30px;
    }
    .style1 a{
    text-decoration:none;
    }

    但是hover,visited等属性却不知道怎么分别设置。

    <span class="style1"><a href="#">go to sohu1</a></span><br/>

    sohu1就没有下划线。

    练习题:

    exam.html:

    <!DOCTYPE html>
    <html>
    <head>
    <title>exam.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link href="exam.css" type="text/css" rel="stylesheet">

    </head>

    <body>
    <font class="s1">梁山排行榜</font><br/>
    <span class="s2">宋江</span><br/><br/>
    <span class="s3">卢员外</span><br/><br/>
    <span class="s4">吴用</span><br/><br/>
    <span class="s3">豹子头</span><br/><br/>
    <span class="s4">大刀关胜</span><br/><br/>

    <span class="style1"><a href="#">go to sohu1</a></span><br/>
    <a href="#">go to sohu2</a><br/>
    <a href="#">go to sohu3</a><br/>
    <a href="#">go to sohu4</a><br/>
    <a href="#">go to sohu5</a><br/>

    </body>
    </html>

    exam.css:

    .s1{
    font-size:30px;
    color:yellow;
    }

    .s2{

    font-style:italic;
    color:red;
    /*font-weight用来表示轻重的*/
    }

    .s3,.s2,.s4{
    font-weight:bold;
    background-color:gray;
    }
    .s4{
    font-style:italic;
    text-decoration:underline;
    }

    /* a:link{
    color:red;
    font-size:24px;
    font-family:华文新魏;
    text-decoration:none;
    } */
    .style1{
    font-size:30px;
    }
    .style1 span{
    text-decoration:none;
    }

    a:link{
    color:red;
    font-size:24px;
    font-family:"华文新魏";
    text-decoration:none;
    }
    a:hover{
    color:green;
    font-size:40px;
    font-family:宋体;
    text-decoration:underline;
    }
    a:visited{
    color:gray;
    }

  • 相关阅读:
    文摘
    Maximal Square leetcode
    Majority Element II
    Merge k Sorted Lists leetcode
    学习方法-暗时间
    4sum leetcode
    valid parentheses
    两道考研算法设计题- 2010 2013
    regular expression matching DP
    valid sudoku leetcode
  • 原文地址:https://www.cnblogs.com/liaoxiaolao/p/9728976.html
Copyright © 2020-2023  润新知