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实现内容与样式的分离

样式复用，方便日后维护

查看全文

相关阅读:
JS 和 CSS 的位置对其他资源加载顺序的影响
 How browsers workBehind the scenes of modern web browsers
Gruntjs入门 (2)
Superhero.js – 构建大型 JavaScript 应用程序的最佳资源
 利用位反操作来简化 indexOf 判断
 Gruntjs入门 (1)
js和css的顺序关系
 (翻译)理解JavaScript函数调用和"this"（by Yehuda Katz）
秒，微秒，毫秒
 您试图从目录中执行 CGI、ISAPI 或其他可执行程序，但该目录不允许执行程序

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