简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 第三课-css基础与选择器
Blogger Information
Blog 10
fans 1
comment 0
visits 9801
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第三课-css基础与选择器
弋兮
Original
552 people have browsed it

本次课程主要学习了css的定义和css的使用方法以及css选择器的使用

一、HTML元素的定义

   1.元素是什么？

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

   2.元素按显示方式分为哪几种？

元素按显示方式分为块级元素和行内元素两种。

块级元素例如：<div>、<p>、<h>、<table>等，遵循最大化原则，块级元素独占一行，两步不允许有元素出现，自动充满父级的内容区，亦会被块级元素内的内容扩充撑开，若其内无内容且块级元素又没有设置高宽，则浏览器中无法显示感知。

行内元素例如:<input>、<span>、<em>、<strong>,它出现在一行文本元素中，遵循最小化原则，行高和宽度由其所在行决定，不允许设置。

元素的显示方式可以用display来改变。


二、css定义

   1.什么是css

  css是层叠样式表（Cascading Style Sheets）

    2.css的作用

   css用来设置html元素的布局与显示。

三、css选择器

  1.什么是css选择器？

css选择器指明了样式将要作用于哪个对象。它的样式生命规则是：选择器{属性:属性值;}。css选择分为四大类，如下：

a.简单选择器

规则是：选择器+样式声明。根据元素的标签名称和属性来选择元素, 是最朴素,最直观的方式

常用的简单选择器又分为5种:

元素选择器: div {...};

属性选择器: tag[property...];

类/class选择器: .active {...};

ID选择器: #main {...};

群组选择器: p, .active, div {...};

通配符选择器: *, 表示全部元素, 通常用在上下文选择器。

选择器是有优先级之分的，当元素选择器, 类选择器, ID选择器同级共存时:tag < 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>css简单选择器</title>
    <style>
        /* 元素选择器 */
        div{
            color: blue;
        }

        /* 属性选择器 */
        p[class="red"]{
            color: red;
        }

        /* 类选择器 */
        .red{
            color: red;
        }

        /* id选择器 */
        #red{
            color: coral;
        }

        /* 群组选择器 */
        p,div,.red{
            color: black;
        }

        /* 通配符选择器 */
        body * {
            color: brown;
        }


    </style>
</head>
<body>
    <div>元素选择器</div>
    <p class="red">属性选择器</p>
    <h1 id="red">id选择器</h1>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手抄：

图片.png

b.上下文选择器

所谓上下文, 是指元素之间的结构关系,如层级,包含等,主要有四个选择器 : * 后代选择器: `空格`, 如 `div p`, `body *`  * ;

父子选择器: `>`, 如 `div + h2`  * ;

同级相邻选择器: `+`, 如 `li.red + li`  * ;

同级所有选择器: `~`, 如 `li.red ~ li`.

实例

<!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>上下文选择器</title>
    <style>
        /* 后代选择器 */
        section h2{
            color: brown;
        }

        /* 父子选择器 */
        section > h2{
            color: burlywood;
        }

        /* 同级相邻选择器 */
        #item + *{
            color: cyan;
        }

        /* 同级所有选择器 */
        #item ~ *{
            color: darkgray;
        }
    </style>
</head>
<body>
<section>
    <div>
        <h2 id="item">例子</h2>
        <h2>同级相邻</h2>
        <h2>同级所有</h2>
    </div>
    <h2>子级1</h2>
    <h2>子级1</h2>
</section>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手抄：

7327227211c572e5c9c1f77cee56fe0.jpg

c.伪类选择器

伪类, 顾名思义, 仍然是"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>结构伪类选择器</title>
    <style>
        /* 结构伪类选择器 */
        .item:first-child{   /*选择父元素div的第一个子元素*/
            color: darkgray;
        }

        /* 非限定类型 */
        div > :nth-child(2){   /*选择页面中所有div下的第二个子元素*/
            color: darkmagenta;
        }
        div:first-child >:nth-child(2){  /*选择第一个div下的第二个子元素*/
            color: darkviolet;
        }    

        /* 非限定到限定的转换规则, 将`child` 用 `of-type`替换即可 */
        /* 限定类型 */
        div:first-of-type >:nth-of-type(2){  
            color: darkviolet;
        }    

        /* 表单伪类 */
        
/* * `:enabled`: 选择每个启用的 `<input>` 元素
* `:disabled`: 选择每个禁用的 `<input>` 元素
* `:checked`: 选择每个被选中的 `<input>` 元素
* `:required`: 包含`required`属性的元素
* `:optional`: 不包含`required`属性的元素
* `:valid`: 验证通过的表单元素
* `:invalid`: 验证不通过的表单
: `:read-only`: 选择只读表单元素 */
        input:enabled {
    background-color: blanchedalmond;
}

/*选择禁用元素*/
input:disabled {
    background-color: lightgray;
}

/*选择所有必选项*/
input:required {
    background-color: yellow;
}


        
    </style>
</head>
<body>
    <div class="item">
        <p>1</p>
        <p>2</p>
        <p>3</p>

    </div>
    <div class="item">
            <p>1</p>
            <p>2</p>
            <p>3</p>
    
        </div>
        <form action="">
                <p>
                        <label for="email">邮箱:</label>
                        <input type="email" id="email" name="email" required placeholder="example@email.com">
                </p>
                <p>
                            <label for="save" >保存密码:</label>
                            <input type="checkbox" id="save" name="save" checked readonly>
                </p>
                <p>
        <label for="save" >保存密码:</label>
        <input type="checkbox" id="save" name="save" checked readonly>
                </p>
                <p>
                        <input type="hidden" name="login_time" value="登陆时间戳">
                </p>

                <p>
                        <label for="warning">警告:</label>
                        <input type="text" id="warning" value="一天内仅允许登录三次" style="border:none" disabled>
                </p>
        </form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手抄：

a51a396e610546ab22f513ddef04e09.jpg


四、总结

本次课程主要学习对象是css即层叠样式表，它的作用对象时html，设置HTML的布局和显示，如果将HTML比作一张画布，那么css就是画笔，拿起画笔可以在这块HTML画布上天马行空。


Correction status：qualified

Teacher's comments：写得很认真, 望坚持下去
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！