简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS基本与选择器－第九期(191030)
Blogger Information
Blog 19
fans 0
comment 0
visits 13395
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基本与选择器－第九期(191030)
feng
Original
624 people have browsed it

* 元素按显示方式分为哪几种, 并举例, 正确描述它们

分为行块级元素和行内元素，行内元素的宽高由其内部内容决定，无法自行调整；

块级元素的宽高由其内部的子元素撑起，而且独占一行，如果没有子元素又没设置宽高，则无法感知。

行内元素有：<span>,<input>,<em>,<strong>,<a>等。块级元素有：<div>,<ul+li>,<table>,<p>,<h1-h6>等。


* CSS是什么? 它的主要作用是什么?

CSS是层叠样式表，用来设置HTML元素在文档中的布局和显示方式。


* 什么是CSS选择器,它的样式声明是哪二部分组成?

CSS选择器用来选择文档中的标签，用来设置其布局和显示方式。

CSS的样式声明由选择器和样式声明组成。


* 举例演示CSS简单选择器

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>如何将CSS作用到当前页面上</title>
    <style>
        body *{
            font-size: 12px;
        }
        p {
            color: green;
        }
        p[align="center"]{
            color: blue;
        }
        .aa{
            color: aqua;
        }
        #bb{
            color: brown;
        }
        h2,#yellow{
            color: yellow;
        }
    </style>
</head>
<body>

<h2>下面为段落</h2>
<p align="center">腾讯将成NBA新赛季全国独播平台,已推出宣传片!</p>
<p class="aa">定了！12月1日商合杭高铁北段正式开通</p>
<p id="bb">马英九为救韩国瑜放大招！直击蔡当局要害气氛瞬间火爆</p>
<p id="yellow">62岁葛优坐出租车：现在年轻人，都不认识我了</p>
<p>62岁葛优坐出租车：现在年轻人，都不认识我了</p>

</body>
</html>

运行实例 »

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

demo1.png

* 举例演示CSS上下文选择器(全部)

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下文选择器</title>
    <style>
        section h2{
            color: yellow;
        }
        section>h2{
            color: black;
        }
        #item + *{
            color: blue;
        }
        #item1 ~ *{
            color: red;
        }
    </style>
</head>
<body>
<section>
    <div>
        <h2 id="item">PHP中文网</h2>
        <h2>phpStudy V8</h2>
        <h2>小皮控制面板</h2>
    </div>
    <h2>小皮控制面板1</h2>
    <h2 id="item1">HTML中文网</h2>
    <h2>Python中文网</h2>
    <h2>Python中文网1</h2>
</section>
</body>
</html>

运行实例 »

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

demo2.png

* 举例演示常用CSS结构伪类选择器(不少于四种)

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
        ul>:nth-child(3){
            color: red;
        }
        ul:first-child>:nth-child(1){
            color: blue;
        }
        ul:first-child>:nth-child(2) p:first-child{
            color: yellow;
        }
        ul:first-child > :last-child p:nth-child(n+1){
            color: green;
        }
        ul:first-of-type>:last-of-type h3:nth-of-type(n+1){
            color: orange;
        }
    </style>
</head>
<body>
<ul>
    <li>
        <h3>购物车</h3>
        <ul>
            <li>MacBook Pro 笔记本一台</li>
            <li>iPhone X Max 手机一部</li>
            <li>SONY A7M3 相机一部</li>
        </ul>
    </li>
    <li>
        <h3>工作计划</h3>
        <ul>
            <li>准备录制前端开发实战课程</li>
            <li>Laravel项目开发全程实录</li>
            <li>编写前端开发实例大全电子书</li>
            <p>yellow1</p>
            <p>yellow2</p>
        </ul>
    </li>
    <li>
        <h2>重要通知</h2>
        <p>今天开始,为了赶项目,全公司开始进入加班模式,具体安排如下:</p>
        <ul>
            <li>开发部: 19:00 - 24:00</li>
            <li>市场部: 19:00 - 23:00</li>
            <li>销售部: 19:00 - 22:00</li>
        </ul>
        <p>凡加班人员, 提供免费晚餐, 滴滴补助, 不愿回家,可报住宿费200/人</p>
    </li>
    <li>
        <h2>重要通知</h2>
        <p>今天开始,为了赶项目,全公司开始进入加班模式,具体安排如下:</p>
        <ul>
            <li>开发部: 19:00 - 24:00</li>
            <li>市场部: 19:00 - 23:00</li>
            <li>销售部: 19:00 - 22:00</li>
        </ul>
        <p>凡加班人员, 提供免费晚餐, 滴滴补助, 不愿回家,可报住宿费200/人</p>
        <h3>test1</h3>
        <h3>test1</h3>
        <h3>test1</h3>
    </li>
</ul>
</body>
</html>

运行实例 »

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

demo3.png

* 举例演示常用CSS表单伪类选择器(不少于三种)

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单伪类选择器</title>
    <style>
        input:enabled{
            background-color: green;
        }
        input:read-only{
            background-color: yellow;
        }
        input:required{
            background-color: blue;
        }
    </style>
</head>
<body>
<h2>用户登录</h2>
<form action="" method="post">
    <p>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" required placeholder="example@email.com">
    </p>

    <p>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required placeholder="不得少于6位">
    </p>
    <p>
        <label for="text">文本:</label>
        <input type="text" id="text" name="text"  placeholder="text框">
    </p>
    <p>
        <label for="readonly">只读框:</label>
        <input type="text" id="readonly" name="readonly" readonly placeholder="此框是只读">
    </p>

    <p>
        <label for="save" >保存密码:</label>
        <input type="checkbox" id="save" name="save" checked readonly>
    </p>

    <p>
        <label for="save_time">保存期限:</label>
        <select name="save_time" id="save_time">
            <option value="7" selected>7天</option>
            <option value="30">30天</option>
        </select>
    </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>


    <script>
        document.querySelector('[type="hidden"]').value = new Date().getTime()
    </script>
</form>
</body>
</html>

运行实例 »

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

demo4.png

手操作业： 

手操作业1.jpg

手操作业2.jpg

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！