简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS基础1作业-九期线上
Blogger Information
Blog 16
fans 0
comment 0
visits 12269
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基础1作业-九期线上
wenbin0209
Original
755 people have browsed it

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

分为块级元素和行内元素

块级元素：独占一行，并自动充满父级元素的内容区，不允许两边有任何元素，自带换行

                块级元素在没有内容撑开的情况下，需要设置宽高。

                例如：<div>,<ul+li><table>,<p>,<h1-h6>

行内元素：总是在一个快级元素内，它的宽高由所在的行决定，不能设置

                  例如：<span><input><em><strong><a>

 2， CSS是什么? 它的主要作用是什么?

        层叠样式表(英文全称：Cascading Style Sheets)

        用来设置HTML元素在文档中的不布局与显示方式

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

         选择器，用来选择页面中的标签

         由选择器和样式声明组成，其中样式声明由键值对组成，键为属性，值为样式规则。

4，举例演示CSS简单选择器(全部)

1，元素选择器 

通过<P>标签元素，改变页面中<p>的颜色

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS基础2</title>
    <style>
           /* 元素选择器,也叫标签选择器 */
         p{
             color: red;
         }
    </style>
</head>
<body>
    <p style="color:royalblue">php中文网1</p>
    <p>php中文网2</p>
    <p>php中文网3</p>
    <p>php是世界上最好的编程语言</p>
</body>
</html>

运行实例 »

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

2，属性选择器

选择并改变属性值为php的class的内容

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS基础2</title>
    <style>
         /* 属性选择器 */
         /*class*/
         .php{
             color: rosybrown;
         }
         /*id*/
         #php1 {
                 color: blue;
         }
    </style>
</head>
<body>
    <p class="php">php中文网2</p>
    <p id="php1">php中文网3</p>
    <p>php是世界上最好的编程语言</p>
</body>
</html>

运行实例 »

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

上述实例中使用的选择其中优先级： id>class>元素选择器

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

1，后代选择器

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下文选择器/结构选择器</title>
    <style>
        /*后代选择器*/
        section h2 {
            color: blue;
        }
    </style>
</head>
<body>
<section>
    <div>
        <h2 id="php1">淘宝网</h2>
        <h2 id="php2">京东</h2>
        <h2 id="php3">拼多多</h2>
    </div>
    <h2>HTML中文网</h2>
    <h2>Python中文网</h2>
</section>
</body>
</html>

运行实例 »

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

2，父子选择器

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下文选择器/结构选择器</title>
    <style>
        /*父子选择器*/
        section > h2 {
            color: blue;
        }
    </style>
</head>
<body>
<section>
    <div>
        <h2 id="php1">淘宝网</h2>
        <h2 id="php2">京东</h2>
        <h2 id="php3">拼多多</h2>
    </div>
    <h2>HTML中文网</h2>
    <h2>Python中文网</h2>
</section>
</body>
</html>

运行实例 »

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

3,同级相邻选择器

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下文选择器/结构选择器</title>
    <style>
        /*同级相邻选择器*/
        #php1 + h2 {
            background: aqua;
        }
    </style>
</head>
<body>
<section>
    <div>
        <h2 id="php1">淘宝网</h2>
        <h2 id="php2">京东</h2>
        <h2 id="php3">拼多多</h2>
    </div>
    <h2>HTML中文网</h2>
    <h2>Python中文网</h2>
</section>
</body>
</html>

运行实例 »

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

4, 同级所有选择器

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下文选择器/结构选择器</title>
    <style> 
        /*同级所有选择器*/
        #php1 ~ *{
            background: blueviolet;
        }
    </style>
</head>
<body>
<section>
    <div>
        <h2 id="php1">淘宝网</h2>
        <h2 id="php2">京东</h2>
        <h2 id="php3">拼多多</h2>
    </div>
    <h2>HTML中文网</h2>
    <h2>Python中文网</h2>
</section>
</body>
</html>

运行实例 »

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

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
        /*非限定类型伪类*/

        /*选中所有ul下面的第二个子元素*/
        ul > :nth-child(2) {
            background: aqua;
        }

        /*选中第一个ul中的第二个子元素*/
        ul:first-child > :nth-child(2) {
            background: red;
        }

        /*最后一个子元素*/
        ul:first-child > :last-child {
            background: blue;
        }

        /*选中最后一个子元素类型为p的元素*/
        ul:first-child > :last-child > p:nth-child(n+1){
            background: greenyellow;
        }

        /*选中最后一个子元素中 li所有的元素*/
        ul:first-child > :last-child  li:nth-child(n+1){
            background: green;
        }

    </style>
<!--    <link rel="stylesheet" href="/static/css/style4.css">-->
</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>
        </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>
</ul>
</body>
</html>

运行实例 »

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

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单伪类选择器</title>
    <style>
        input:enabled {
            background-color: red;
        }

        input:disabled {
            background-color: bisque;
        }

        input:required {
            background-color: salmon;
        }
    </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="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>

运行实例 »

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




Correction status：unqualified

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！