zoukankan html css js c++ java

Web前端(8)_css样式

1、类选择器

相同的样式类选择器的权重比标签选择器权重高

同种样式在相同选择器的情况下，下面的属性比上面的属性权重高

类选择器可以重复利用的

优先级，id选择器>类选择器>标签选择器

很多时候需要轮流用，很复杂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级标签</title>
    <style>
        li{
            color:red;
            font-size: 28px;
            font-family: 华文行楷;
        }
        .blue{
            color: blue;
        }
    </style>
</head>
<body>

    <div>
        <ul>
            <li>家用电器</li>
            <li class="blue">各类图书</li>
            <li>手机数码</li>
            <li>日用百货</li>
        </ul>
    </div>
</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级标签</title>
    <style>
        li{
            color:red;
            font-size: 28px;
            font-family: 华文行楷;
        }
        #yellow{
            color:yellow;
        }
        .blue{
            color: blue;
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li>家用电器</li>
            <li id="yellow">各类图书</li>
            <li class="blue">手机数码</li>
            <li>日用百货</li>
        </ul>
    </div>
</body>
</html>

View Code

^{2、三种引入css的样式}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级标签</title>
    <style>
        li{
            color:red;
            font-size: 28px;
            font-family: 华文行楷;
        }
        #yellow{
            color:yellow;
        }
        .blue{
            color: blue;
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li>家用电器</li>
            <li id="yellow">各类图书</li>
            <li class="blue">手机数码</li>
            <li style="color: antiquewhite">日用百货</li>
        </ul>
    </div>
</body>
</html>

View Code

3、link引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级标签</title>
    <link type="text/css" rel="stylesheet" href="test.css" />
    <style>
        li{
            color:red;
            font-size: 28px;
            font-family: 华文行楷;
        }
        .blue{
            color: blue;
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li>家用电器</li>
            <li id="yellow">各类图书</li>
            <li class="blue">手机数码</li>
            <li style="color: antiquewhite">日用百货</li>
        </ul>
    </div>
</body>
</html>

4、CSS实现内容与样式的分离

样式复用，方便日后维护

查看全文

相关阅读:
[openjudge] 2797最短前缀 Trie
[poj]1050 To the Max dp
[openjudge] 1455:An Easy Problem 贪心
 [poj] Catch That Cow--bfs
= =
dinic算法实现
 Dinic
走进链式前向星的秘密
 树链剖分前传
 树链剖分

原文地址：https://www.cnblogs.com/sunnybowen/p/10526415.html