首页 > 代码库 > 前端CSS

前端CSS

2024-11-14 06:35:02   203人阅读

CSS规则由两个主要的部分构成：选择器以及一条或多条声明

selector {

　　　　property:value;

　　　　property:value;

　　　　property:value;

　　　　……

}

CSS的四种引入方式

1.行内式

行内式是在标记的style属性中设定CSS样式，这种方式没有体现出CSS的优势

    <div style="color: blue;font-size: 20px;font-weight: 900">DIV</div>

2.嵌入式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
        color: red;
        background: blue;
        }
        div{
        color: blue;
        font-size: 20px;
        font-weight: 900;
        }
    </style>

3.链接式

将一个.css文件引入到HTML文件中

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href=http://www.mamicode.com/"test.css">
</head>

4.导入式

将一个.css文件你导入到HTML文件中，写在<head></head>标签下的<style></style>标签对中

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import"test.css";
    </style>
</head>

注意：

　　导入式会在整个网页加载完成后再加载CSS文件，因此这就导致了一个问题，如果网页比较大则会出现先显示无样式的页面，停顿之后才会出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会在加载网页内容之前先加载CSS文件，因此在延迟后显示带有样式的网页，不会像导入式那样先显示无样式的网页然后再显示有样式的网页，这是链接式的优点

CSS选择器

技术分享

组合选择器

<body>
    <div class="c1">c1</div>

    <div class="OUTER">Div
        <p>p1</p>
        <div class="INNER">
            <p>p3</p>
        </div>
        <p>p2</p>
        <a href=http://www.mamicode.com/"">click</a>
    </div>
    <a href=http://www.mamicode.com/"">ck</a>
    <p>p5</p>
    <p class="p4">p4</p>

    <ul class="item">
        <li>x</li>
    </ul>
    
    <ol class="item">
        <li>y</li>
    </ol>
    
    <ul>
        <li>z</li>
    </ul>
</body>

 

E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号隔开

.inner p,.p4{
                   color: red;

}

E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔

.INNER p{
            color: red;
}

E>F 子元素选择器，匹配所有E元素的子元素F

.OUTER p{
            color: red;
}

E+F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F

.OUTER + p{
                  color:red;
}

E~F 普通兄弟选择器（以波浪号分割）

.OUTER ~ p{
                 color: red;
}
ul.item li{
         color: red;
}
div.c1{
        color: red;
}

关于标签嵌套：

一般，块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其他内联元素，需要注意的是p标签不能包含块级标签

前端CSS


联系
我们