css

css的基本语法

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

css引入样式的三种方式

1.内联样式
2.外部样式
3.style属性样式

css内联样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css引入样式:内部样式表</title>
    <!-- 1、内部样式,通过style标签,只适用于当前 -->
    <style>
        h1{
            color: aqua;
        }
    </style>
</head>
<body>
    <h1>城南博客</h1>
</body>
</html>

css外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css引入样式:外部样式表,公共样式表,共享样式表</title>
    <!-- <style>
        h1{
            color: aqua;
        @import url("css/css.css");
        }
    </style> -->
    <!-- 2.使用 link标签引入外部公共样式表 -->
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
    <h1>城南博客</h1>
</body>
</html>

style属性设置样式

    <h1 style="color: cornflowerblue;">城南博客</h1>

css样式引用总结

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

css的模块化

1.将公共样式部分进行分离,并创建一些独立的样式表来保存它
2.使用@import 指令将这些独立的公共样式表引入到制定的css文档或标签中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css的模块化</title>
    <style>
        /* 导入公共页眉页脚 */
        @import url(css/public.css);
        /* @import 'css/public.css'; */
        main {
            background-color: #777;
            height: 800px;
        }
    </style>
    <!-- 对于一个网站来说,许多页面的页眉和页脚是相同的,可以考虑将他的样式剥离出来,实现模块化编程 -->
</head>

<body>
    <header>页眉</header>
    <main>主体</main>
    <footer>页脚</footer>

    css的模块化:
    1.将公共样式部分进行分离,并创建一些独立的样式表来保存它
    2.使用@import 指令将这些独立的公共样式表引入到制定的css文档或标签中
</body>

</html>

选择器

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器1:j简单选择器</title>
    <style>
        /* 1.标签选择器 返回一组 */
        li{
            background-color: cornflowerblue;
        }
        /* 2.类选择器,返回一组 */
        /* li[class="on"] {
            background: crimson;
        } */
        /* .on {
            background-color: darkgray;
        }
        li.on{
            background: darkgreen;
        } */

        /* 3.id选择器 理论返回一个 */
        /* li[id= "6"]{
            background-color: darkorange;
        } */
        /* 浏览器不检查ID的唯一性 必须由开发者自行保证 */
        /* 使用 # 简化 */
        #six{
            background: deeppink;
        }
    </style>
</head>
<body>
    <ui>
        <li>item1</li>
        <li class="on">item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li id="six">item6</li>
    </ui>
</body>
</html>
标签选择器
属性选择器:class(.) id(#)

上下文选择器

<!DOCTYPE html>
<html lang="en">
<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: deeppink;
        }

        /* 2.子元素选择器 : 仅父子层级 */
        body>ul>li{
            background: dimgray;
        }


        /* 3.同级相邻选择器:仅选中与之相邻的第一个兄弟元素 */
        .start + li{
            background: dodgerblue;
        }

        /* 4.同级所有选择器:选中后面所有元素 */
        .start ~ li{
            background:hotpink;
        }
    </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>
                <li>item4-4</li>
            </ul>
        </li>
        <li>item5</li>
        <li>item6</li>
    </ul>
</body>
</html>

上下文选择器:
1.空格 :所有UC鞥及
2.> 父子级
3. + 相邻的兄弟
4. ~ 所有的相邻兄弟

伪类选择器-结构伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器:结构伪类*</title>
    <style>
        /* 1.匹配任意位置的元素。':nth-of-type(an+b)'' */
        /* an+b:an起点,b偏移量 n=0+ 从0开始取值 */

        /* 匹配第三个li */
        /* ul li:nth-of-type(0n+3){
            background: indigo;
        } */
        /* 0乘以任何数都等于0,通常直接写偏移量就行 */
        /* ul li:nth-of-type(4){
            background: khaki;
        } */

        /* 选择所有元素 */
        /* ul li:nth-of-type(1n){
            background: lawngreen;
        } */

        /* 如果只是为了全选,这样做没意思,还不如标签选择器来的直接,但是一旦戴上偏移量就完全不同了。 */
        /* ul li:nth-of-type(1n+3){
            background: lightcoral;
        } */
        /* 1乘以任何数都等于自己,所以省去1 */
        /* ul li:nth-of-type(n+3){
            background: lightcoral;
        } */
        
        /* 2.反向获取任意位置的元素 nth-last-of-type(an+b)*/
        /* ul li:nth-last-of-type(-n+2){
            background: lightgreen;
        } */

        /*直选倒数第N个*/
        /* ul li:nth-last-of-type(3){
            background:lightseagreen;
        } */

        /* 3.选择所有索引为偶数的子元素 */
        /* ul li:nth-of-type(even){
            background: lightcoral;
        } */

        /* 4.选择所有索引为基数的子元素 */
        /* ul li:nth-of-type(odd){
            background: lightcoral;
        } */

        /* 偶数行2N,奇数行2N+1,偶数行也可以写even,奇数行odd */

        /* 3.选择第一个子元素:first-of-type */
        /* ul li:first-of-type{
            background: lightseagreen;
        } */

        /* 3.选中最后一个:last-of-type */
        /* ul li:last-of-type{
            background: lightseagreen;
        } */

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

        /* 如果只想匹配父元素中唯一子元素,使用:only-of-type 快速实现 */
        ul li:only-of-type{
            background: lightseagreen;
        }
    </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>i am is allen</li>
    </ul>
</body>
</html>

作业内容

  1. 实例演示css规则的三种引入到html文档中的方式;
  2. 实例演示标签选择器,class选择器,id选择器,上下文选择器, 结构伪类选择器,重点是结构伪类选择器

演示地址: https://php.gzj2001.com/day5/index.html

效果展示

image.png

作业代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1215作业内容</title>
    <style>
        /* 1.内联样式 */
        h1 {
            background: lightseagreen;
        }
        /* 属性选择器 */
        .class{
            background: #777;
        }
        /* id选择器 */
        #id{
            background-color:#548;
        }
        /* 后代选择器 */
        span p{
            background-color: mediumaquamarine;
        }
        /* 子元素选择器 */
        span>span{
            background-color: #6998;
        }
        /* 同级相邻选择器 */
        .class + p{
            font-style: oblique;
        }
        /* 同级所有选择器 */
        #id ~ span {
            font-size: 36px;
        }

        /* 结构伪类选择器 */
        /* 选择第一个 */
        ul li:nth-of-type(1){
            background-color: mediumaquamarine;
        }
        /* 选择最后一个 */
        ul li:nth-last-of-type(1){
            background-color: red;
        }
        /* 选择偶数 */
        ul li:nth-of-type(even){
            font-size: 24px;
        }

        /* 选择单数 */
        ul li:nth-of-type(odd){
            font-size: 12px;
        }

        /* 选择第N个 */
        ul li:nth-of-type(3){
            border: 1px solid #548;
        }
    </style>
    <!-- 2.外部样式 -->
    <link rel="stylesheet" href="css/1215.css">
</head>
<body>
    <h1>1.欢迎来到城南博客作业展示!【内联样式】</h1>
    <p>2.我的博客是gzj2001.com【外部样式】</p>
    <!-- 3.style定义属性样式 -->
    <p style="background: magenta;">3.祝您腰好腿好身体好!【style属性定义】</p>
    <p class="class">4.我是属性选择器class的结果</p>
    <p id="id">5.我是id选择器/8.我是同级相邻选择器</p>
    <hr>
    上下文选择器
    <span>
        <p>6.后代选择器/9.同级所有选择器</p>
        <p>6.后代选择器/9.同级所有选择器</p>
        <p>6.后代选择器/9.同级所有选择器</p>
        <span>7.子元素选择器</span>
    </span>
    <br>
  <hr>
  结构伪类选择器

  <ul>
      <li>1结构伪类选择器</li>
      <li>2结构伪类选择器</li>
      <li>3结构伪类选择器</li>
      <li>4结构伪类选择器</li>
      <li>5结构伪类选择器</li>
      <li>6结构伪类选择器</li>
  </ul>
</body>
</html>

其他信息

My Blog: https://www.gzj2001.com
My Blog In PHP.cn:https://www.php.cn/blog/linwx611.html