首页 > 博客列表 > css的模块化，css引入方式，简单选择器，上下文选择器，伪类选择器

博主信息

博文 22

粉丝 0

访问量 26734

专题推荐

更多>

css样表

style.css

h1 {
    color: violet;
}

footer {
    height: 80px;
    background-color: #555;
    color: white;
}

header.css

header {
    height: 50px;
    background-color: #ddd;
}

stylePublic.css

/* 导入公共页眉 */
/* @import url(css/header.css); */
@import url(./header.css);
/* 导入公共页脚 */
/* @import url(css/footer.css); */
@import url(./footer.css);
main {
    min-height: 500px;
    background-color: lightcyan;
}
/* css的模块化：
1.将公共样式部他进行分离，并创建一些独立的样式表来保存它
2.使用@import指令将这些独立的公共样式表引入到指定的css文档或标签中 */

css的基本语法之代码


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css的基本语法</title>
    <!-- 任何元素如果想引入到html文档中，必须要使用一个适当的标签，css也不例外 -->
    <style>
        /* 通过style标签引入的css规则，仅适用于当前的页面(html文档) */
        /* css: 层叠样式表，用来设置页面中元素的样式，布局 */
        h1 {
            color: violet;
        }
        /* h1: 选择器 */
        /* {...}：声明块，由一个或多个由分号分隔的样式声明构成 */
        /* h1 + {...}: 选择器 + 声明块 = 规则 */
    </style>
</head>
<body>
    <h1>php.cn</h1>
</body>
</html>

css引入方式:

内部样式之代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css引入方式:内部样式</title>
    <!-- 1.内部样式：在html文档内用<style>定义-->
    <style>
        h1 {
            /* 声明：属性和值组成 */
            color: violet;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <h1>php.cn中文网</h1>
</body>
</html>

外部样式表/公共样式表/共享样式表之代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css引入方式：外部样式表/公共样式表/共享样式表</title>
    <!-- 2.外部样式表/公共样式表/共享样式表：使用link标签引入外部公共样式表 -->
    <!-- <style>
        /* h1 {
            color: violet;
            border: 1px solid #000;
        } */
        /* @import url(css/style.css); */
    </style> -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>php.cn中文网</h1>
</body>
</html>

style属性设置样式之代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css引入方式：style属性设置样式</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>php.cn中文网</h1>
    <!-- 给第2个h1自定义样式 -->
    <!-- 3.通过style属性给指定元素自定义/定制样式 -->
    <h1 style="color: teal;">php.cn英文网</h1>
</body>
</html>
<!-- 
任何元素如果想引入到html文档中，必须要使用一个适当的标签，css也不例外
内部样式：仅对当前文档的元素有效，使用style标签
外部样式：适用于所有引入了这个css样式的html文档,使用link标签
行内样式：仅适用于当前的页面中指定的元素，使用style属性 
-->

样式表的模块化1 之代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式表的模块化</title>
    <style>
        header {
            height: 50px;
            background-color: #ddd;
        }
        main {
            min-height: 500px;
            background-color: lightcyan;
        }
        footer {
            height: 80px;
            background-color: #555;
            color: white;
        }
    </style>
</head>
<body>
    <header>页眉</header>
    <main>主体</main>
    <footer>页脚</footer>
</body>
</html>

样式表的模块化2 之代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式表的模块化</title>
    <link rel="stylesheet" href="./css/stylePublic.css">
</head>
<body>
    <header>页眉</header>
    <main>主体</main>
    <footer>页脚</footer>
</body>
</html>

选择器

简单选择器之代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器1：简单选择器</title>
    <style>
        /* 1.标签选择器，返回一组 */
        li {
            background-color: violet;
        }
        /* 2. 类选择器：返回组 */
        li[class="on"] {
            background-color: thistle;
        }
        /* class选择器可简化为 .  */
        .at {
            background-color: tomato;
        }
        /* 3.id选择器：返回一个（注意不是唯一 因为浏览器不检查id的唯一性，必须由开发者自行保证） */
        li[id="foo1"]{
            background-color: rebeccapurple;
        }
        /* id选择器使用 # 简化 */
        #foo2 {
            background-color: turquoise;
        }
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li class="on">item2</li>
        <li>item3</li>
        <li class="on">item4</li>
        <li class="at">item5</li>
        <li id="foo1">item6</li>
        <li id="foo1">item7</li>
        <li id="foo2">item8</li>
    </ul>
</body>
</html>

上下文选择器之代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器2：上下文选择器</title>
    <style>
        /* 因为html是一个结构化的文档：每一个元素在文档中有确切的位置 */
        /* 所以根据元素的上下文环境来选择是完全没有问题 */
        /* 1.后代选择器 */
        ul li {
            background-color: lightblue;
        }
        /* ----------------------------------------------------- */
        /* 2. 子元素选择器：仅父子层级 */
        body>ul>li {
            background-color: teal;
        }
        /* 3. 同级相邻选择器：仅选中与之相邻的第一个兄弟元素 */
        .start + li {
            background-color: thistle;
        }
        /* 4. 同级后面所有选择器：选中与之相邻的后面所有兄弟元素 */
        .end ~ li {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li class="start">item2</li>
        <li>item3</li>
        <li>item4
            <ul>
                <li>item4-1</li>
                <li>item4-2</li>
                <li>item4-3</li>
            </ul>
        </li>
        <li>item5</li>
        <li class="end">item6</li>
        <li>item7</li>
        <li>item8</li>
    </ul>
</body>
</html>

伪类选择器之代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器3：伪类选择器（结构相关，难点重点）</title>
    <style>
        /* 1.匹配任意位置的元素： ：nth-of-type(an+b)
        /* an+b: an步量，b是偏移量(第几个开始)，n = （0，1，2，3...） */
        /* 匹配第3个li */
        /* ul li:nth-of-type(0n+3){
            background-color: violet;
        } */
        /* 0乘以任何数都等于0，通常直接写偏移量就可以 */
        /* ul li:nth-of-type(3){
            background-color: violet;
        } */
        /* 选择所有元素 */
        /* ul li:nth-of-type(1n){
            background-color: violet;
        }  */
        /* 如果只是为了全选，这样做没意义，还不如标签选择器来得直接，但是一旦带上偏移量就完全不同了 */
        /* ul li:nth-of-type(1n+3) {
            background-color: violet;
        } */
        /* 1乘以任何数都等于自己，所以省去1 */
        /* ul li:nth-of-type(n+3) {
            background-color: violet;
        } */
        /* ul li:nth-of-type(n+8) {
            background-color: violet;
        } */
        /* ---------------------------------------------------------------------- */
        /* 2. 反向获取任意位置的元素：nth-last-of-type(an+b) */
        /* ul li:nth-last-of-type(-n+3) {
            background-color: violet;
        } */
        /* 我只选择倒数第3个，直接命中 */
        /* ul li:nth-last-of-type(3) {
            background-color: violet;
        } */
        /* ---------------------------------------------------------------------- */
        /* 3.选择所有索引为偶数的子元素，2，4，6，8... */
        /* ul li:nth-of-type(2n) {
            background-color: violet;
        } */
        /* 选择所有索引为奇数的子元素，1，3，5，7... */
        /* ul li:nth-of-type(2n-1) {
            background-color: violet;
        } */
        /* ul li:nth-of-type(2n+1) {
            background-color: violet;
        } */
        /* 偶数行：even */
        /* ul li:nth-of-type(even) {
            background-color: violet;
        } */
        /* 奇数行：odd */
        /* ul li:nth-of-type(odd) {
            background-color: violet;
        } */
        /* ---------------------------------------------------------------------- */
        /* 3. 选择第一个子元素: :first-of-type */
        /* :nth-of-type(1) 的语法糖 :first-of-type */
        /* ul li:first-of-type {
            background-color: violet;
        } */
        /* 4. 选择最后一个元素: :last-of-type */
        /* :nth-last-of-type(1) 的语法糖 :last-of-type */
        /* ul li:last-of-type {
            background-color: violet;
        } */
        /* :nth-of-type(an+b)这是最核心的一个选择器，其它的相关选择器都是它的语法糖 */
        /* :nth-of-type(),:first-of-type,:last-of-type,这些都是快捷方式 */
        /* ----------------------------------------------------------------------- */
        /* ul:last-of-type li:last-of-type {
            background-color: violet;
        } */
        /* 如果只想匹配父元素中唯一子元素，使用 :only-of-type就可快速实现 */
        ul li:only-of-type {
            background-color: violet;
        }
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
    </ul>
    <ul>
        <li>我是个程序员</li>
    </ul>
</body>
</html>

总结：

css引入方式

内部样式：仅对当前文档的元素有效，使用style标签
外部样式：适用于所有引入了这个css样式的html文档,使用link标签
行内样式：仅适用于当前的页面中指定的元素，使用style属性

选择器

简单选择器

标签选择器 ( li {} )
类选择器 ( li[class=”on”] {} 简化 .on {})
id选择器（ li[id=”foo1”]{} 简化 #foo1 {}）

上下文选择器

后代选择器 (只要后代有，无论深度)
子元素选择器 (仅父子层级)
同级相邻选择器 (仅选中与之相邻的第一个兄弟元素)
同级后面所有选择器 (选中与之相邻的后面所有兄弟元素)

伪类选择器

an+b: an步量，b是偏移量(第几个开始)，n = （0，1，2，3…）
匹配任意位置的元素: ：nth-of-type(an+b)
反向获取任意位置的元素: ：nth-last-of-type(an+b)
选择第一个子元素: :first-of-type
选择最后一个元素: :last-of-type
偶数行：:nth-of-type(even)
奇数行：:nth-of-type(odd)
如果只想匹配父元素中唯一子元素：:only-of-type
最核心的一个伪类选择器：:nth-of-type(an+b)这是最核心的一个选择器，其它的相关选择器都是它的语法糖

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

php之win运行环境，工具与运行原理

2020-12-08 19:59:37

css样表

style.css

footer.css

header.css

stylePublic.css

css的基本语法 之代码

css引入方式:

内部样式 之代码

外部样式表/公共样式表/共享样式表 之代码

style属性设置样式 之代码

样式表的模块化1 之代码

样式表的模块化2 之代码

选择器

简单选择器 之代码

上下文选择器 之代码

伪类选择器 之代码

总结：

css引入方式

选择器

简单选择器

上下文选择器

伪类选择器

css的基本语法之代码

内部样式之代码

外部样式表/公共样式表/共享样式表之代码

style属性设置样式之代码

简单选择器之代码

上下文选择器之代码

伪类选择器之代码