2015作业-css的基本语法及三种样式引入方式，选择器的应用

css的基本语法及三种样式引入方式

任何元素如果想引入到html文档中,必须要使用一个适当的标签,css也不例外通过style标签引入的css规则,仅适用于当前的页面(html文档) css: 层叠样式表,用来设置页面中元素的样式,布局

2.h1: 选择器 {…}: 声明块,由一个或多个由分号分隔开的样式声明构成 h1 + {…}: 选择器 + 声明块 = 规则

css引入方式
1.style为css引入方式:内部样式>为css引入方式:内部样式标签

内部样式代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>css引入方式:内部样式</title>
    <!-- 1. 内部样式 <style> -->
    <style>
        h1 {
            /* 声明: 属性和值组成 */
            color: violet;
        }
    </style>
</head>
<body>
    <h1>css引入方式:内部样式</h1>
    <p>style为css引入方式:内部样式 标签</p>
</body>
</html>

2.css引入方式:外部样式表/公共样式表/共享样式表
使用link 标签引入外部公共样式表

标签引入外部公共样式表代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>css引入方式:外部样式表/公共样式表/共享样式表</title>
    <!-- 使用link 标签引入外部公共样式表 -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h3>css引入方式:外部样式表/公共样式表/共享样式表</h3>
</body>
</html>

3.css引入方式:style属性设置样式
通过style属性给指定元素自定义/定制样式

style属性设置样式代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>css引入方式:style属性设置样式</title>
</head>
<body>
    <h1>css引入方式:style属性设置样式</h1>
    <!--通过style属性给指定元素自定义/定制样式 -->
    <h1 style="color:teal">css引入方式:style属性设置样式</h1>
</body>
</html>

样式表的模块化:公共部分进行分离
@import用于引入模块化样式表

例如：

导入公共页眉 @import url(css/header.css);
导入公共页脚 @import 'css/footer.css';

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

选择器1: 简单选择器

标签选择器, 返回一组

    li{
        background-color: chartreuse;
    }

类选择器: 返回一组

    .li{
        background-color: chocolate;
    }

id选择器: 返回一个

    #app3{
        background-color: crimson;
    }
    /* 属性选择器: class, id  */

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器1: 简单选择器</title>
    <style>
        /* 1. 标签选择器, 返回一组 */
        li{
            background-color: chartreuse;
        }
        /* 2. 类选择器: 返回一组 */
        .li{
            background-color: chocolate;
        }
        /* 3. id选择器: 返回一个 */
        #app3{
            background-color: crimson;
        }
        /* 属性选择器: class, id  */
    </style>
</head>
<body>
       <ul>
           <li>app1</li>
           <li class="li">app2</li>
           <li id="app3">app3</li>
           <li>app4</li>
           <li class="li">app5</li>
           <li class="li">app6</li>
           <li>app7</li>
           <li>app8</li>
           <li>app9</li>
           <li>app10</li>
       </ul>
</body>
</html>

选择器2:上下文选择器

因为html是一个结构化的文档:每一个元素在文档中有确切的位置
所以根据元素的上下文环境来选择是完全没有问题的

后代选择器: 所有层级

    ul li {
        background-color: lightblue;
    }

子元素选择器: 仅父子层级
body>ul>li {
background-color: teal;
}
同级相邻选择器: 仅选中与之相邻的第一个兄弟元素

    .li+li {
        background-color: lightgreen;
    }

同级所有选择器: 选中与之相邻的后面所有兄弟元素

    .li~li {
        background-color: yellow;
    }

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>选择器2:上下文选择器</title>
    <style>
        /* 因为html是一个结构化的文档:每一个元素在文档中有确切的位置 */
        /* 所以根据元素的上下文环境来选择是完全没有问题的 */
        /* 1. 后代选择器: 所有层级 */
        ul li {
            background-color: lightblue;
        }
        /* 2. 子元素选择器: 仅父子层级 */
        body>ul>li {
            background-color: teal;
        }
        /* 3. 同级相邻选择器: 仅选中与之相邻的第一个兄弟元素 */
        .li+li {
            background-color: lightgreen;
        }
        /* 4. 同级所有选择器: 选中与之相邻的后面所有兄弟元素 */
        .li~li {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li>app1</li>
        <li class="li">app2</li>
        <li id="app3">app3</li>
        <li>app4</li>
        <li class="li">app5</li>
        <li class="li">app6</li>
        <li>app7</li>
        <li>app8</li>
        <li>app9</li>
        <li>app10</li>
    </ul>
</body>
</html>
<!-- 上下文选择器: 
1. 空格: 所有层级
2. > : 父子级
3. + : 相邻的兄弟
4. ~ : 所有相邻兄弟 -->

伪类选择器: 结构相关,难点重点

匹配任意位置的元素: :nth-of-type(an+b)
an+b: an起点,b是偏移量, n = (0,1,2,3…)

选择所有元素

    ul li:nth-of-type(1n) {
        background-color: violet;
    }

1乘以任何数都等于自己,所以省去1

    ul li:nth-of-type(n+3) {
        background-color: violet;
    }

反向获取任意位置的元素: 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;
    }

选择所有索引为偶数的子元素, 2,4,6,8…

    ul li:nth-of-type(2n) {
        background-color: violet;
    }

计算方式

选择所有索引为奇数的子元素, 1,3,5,7,9…

    ul li:nth-of-type(2n-1) {
        background-color: violet;
    }

这里用2n+1也是对的,大家考虑一下为什么?

偶数行: even

    ul li:nth-of-type(even) {
        background-color: rgb(250, 9, 250);
    }

奇数行: odd

    ul li:nth-of-type(odd) {
        background-color: rgb(32, 7, 255);
    }

选择第一个子元素: :first-of-type */

    /* :nth-of-type(1) 的语法糖 :first-of-type */
    ul li:first-of-type {
        background-color: rgb(24, 245, 98);
    }

选中最后一个: :last-of-type

    ul li:last-of-type {
        background-color: rgb(20, 20, 20);
    }

:nth-of-type(an+b)这是最核心的一个选择器,其它的相关选择器都是它的语法糖 */
:nth-last-of-type(), :first-of-type, :last-of-type,这些都是快捷方式

    ul:last-of-type li:first-of-type {
        background-color: rgb(99, 5, 99);
    }

如果只想匹配父元素中唯一子元素,使用 :only-of-type就可快速实现

    ul li:only-of-type {
        background-color: rgb(230, 111, 13);
    }

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器: 结构相关,难点重点</title>
    <style>
        /* 1. 匹配任意位置的元素: `:nth-of-type(an+b)` */
        /* an+b: an起点,b是偏移量, n = (0,1,2,3...) */
        /* 选择所有元素 */
        ul li:nth-of-type(1n) {
            background-color: violet;
        }
        /* 1乘以任何数都等于自己,所以省去1 */
        ul li:nth-of-type(n+3) {
            background-color: rgb(112, 110, 112);
        }
        /* 2. 反向获取任意位置的元素: `nth-last-of-type(an+b)` */
        ul li:nth-last-of-type(-n+3) {
            background-color: rgb(250, 187, 250);
        }
        /* 我只选择倒数第3个,直接命中 */
        ul li:nth-last-of-type(3) {
            background-color: rgb(8, 0, 8);
        }
        /* 选择所有索引为偶数的子元素, 2,4,6,8... */
        ul li:nth-of-type(2n) {
            background-color: violet;
        }
        /*
        计算方式
        2*0 = 0
        2*1 = 2
        2*2 = 4
        2*3 = 6 */
        /* 选择所有索引为奇数的子元素, 1,3,5,7,9... */
        ul li:nth-of-type(2n-1) {
            background-color: violet;
        }
        /* 这里用2n+1也是对的,大家考虑一下为什么? */
        /* 偶数行: even  */
        ul li:nth-of-type(even) {
            background-color: rgb(250, 9, 250);
        }
        /* 奇数行: odd  */
        ul li:nth-of-type(odd) {
            background-color: rgb(32, 7, 255);
        }
        /* 3. 选择第一个子元素: :first-of-type */
        /* :nth-of-type(1) 的语法糖 :first-of-type */
        ul li:first-of-type {
            background-color: rgb(24, 245, 98);
        }
        /* 3. 选中最后一个: :last-of-type */
        ul li:last-of-type {
            background-color: rgb(20, 20, 20);
        }
        /* :nth-of-type(an+b)这是最核心的一个选择器,其它的相关选择器都是它的语法糖 */
        /* :nth-last-of-type(), :first-of-type, :last-of-type,这些都是快捷方式 */
        ul:last-of-type li:first-of-type {
            background-color: rgb(99, 5, 99);
        }
        /* 如果只想匹配父元素中唯一子元素,使用 :only-of-type就可快速实现 */
        ul li:only-of-type {
            background-color: rgb(230, 111, 13);
        }
    </style>
</head>
<body>
    <ul>
        <li>app1</li>
        <li class="li">app2</li>
        <li id="app3">app3</li>
        <li>app4</li>
        <li class="li">app5</li>
        <li class="li">app6</li>
        <li>app7</li>
        <li>app8</li>
        <li>app9</li>
        <li>app10</li>
    </ul>
    <ul>
        <li>1</li>
    </ul>
</body>
</html>

相关文章