简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css基础知识总结--Php培训第九期线上班
Blogger Information
Blog 19
fans 1
comment 0
visits 13308
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基础知识总结--Php培训第九期线上班
涤尘
Original
683 people have browsed it

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

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

块级元素

遵循: 最大化原则， 总是独占一行显示, 自动充满父级元素的内容区，块级元素二边不允许有任何其它元素,也就是它总是自带换行的， 块级元素在没有内容撑开的情况下, 需要设置宽高,否则无法感知存在，如：div,p,h1等。

行内元素

遵循: 最小化原则，总是在一行文本元素的内部生成, 它的宽高由所在行决定,不可以设置，如：span,input等。

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

css：层叠样式表，用来设置页面中的元素样式和布局的

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

css选择器是一种模式，用于选择需要添加样式的元素，样式声明部分由属性和属性值组成

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单选择器</title>
    <style>
        /*元素选择器*/
        p {
            color: green;
        }

        /*属性选择器*/

        p[class] {
            color: lightgray;
        }

        p[class="red"] {
            color: red;
        }

        p[id="blue"] {
            color: blue;
        }

         /*类选择器, 对应标签中的class属性*/
        .red {
            background-color: yellow;
        }

        /*ID选择器, 对应标签中的id属性*/
      
        #blue {
            background-color: lightgray;
        }

        /*群级选择器:*/
          
        .red, h2 {
            background-color: lightcyan;
        }

        /*通配符选择器*/
        body * {
            font-size: 3rem;
        }

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

<h2>今晚加班,公司管饭管打车</h2>

</body>
</html>

运行实例 »

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

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下文选择器</title>
    <style type="text/css">
            /*后代选择器*/
            section h2 {
                color: blue;
            }

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

            /*同级相邻选择器*/
            .xl + * {
                background-color: lightblue;
            }

            /*同级所有选择器*/
            #item ~ * {
                background-color: lightpink;
            }
    </style>
</head>
<body>

<section>
    <div>
        <h2 id="item">PHP中文网</h2>
        <h2>phpStudy V8</h2>
        <h2>小皮控制面板</h2>
    </div>
    <h2 class="xl">HTML中文网</h2>
    <h2>Python中文网</h2>
</section>
</body>
</html>

运行实例 »

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

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style type="text/css">
       :root{
             background: yellow;   
        }
        ul > :nth-child(2) {
    background-color: lightblue;
        }
       ul:first-child > :last-child {
    background-color: red;
        }
        ul:first-child > :nth-child(2) {
    background-color: lightgreen;
        }
    </style>
</head>
<body>
<ul>
    <li>
        <h3>短歌行</h3>
    
        <ul>
            <li>白日何短短，百年苦易满。</li>
            <li>苍穹浩茫茫，万劫太极长。</li>
            <li>麻姑垂两鬓，一半已成霜。</li>
        </ul>
    </li>
    <li>
        <h3>短歌行二</h3>
    
        <ul>
            <li>吾欲揽六龙，回车挂扶桑。</li>
            <li>苍穹浩茫茫，万劫太极长。</li>
            <li>李白</li>
        </ul>
    </li>
    <li>
        <h3>短歌行</h3>
        <ul>
            <li>白日何短短，百年苦易满。</li>
            <li>苍穹浩茫茫，万劫太极长。</li>
            <li>麻姑垂两鬓，一半已成霜。</li>   
        </ul>
        
    </li>
    <p>一鸟死，百鸟鸣。一兽走，百兽惊。</p>
</ul>

</body>
</html>

运行实例 »

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

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

实例

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

<head>
    <meta charset="UTF-8">

    <title>表单伪类</title>
    <style type="text/css">
            input:enabled {
            background-color: red;
        }

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

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

<body align="center">
<h2>网站用户注册</h2>
<form>
<p>
    <label for="username">账号：</label>
    <input type="text" name="username" id="username" value="zhangsan" required>
</p>
<p>
<label for="password">密码：</label>
<input type="password" name="password" placeholder="必须在8到12位之间" required>
</p>
<p>
<label>邮箱：</label>
<input type="email" name="email" id="email" placeholder="example@email.com">
</p> 
    <p>
        <label for="warning">警告:</label>
        <input type="text" id="warning" value="一天内仅允许注册三次" style="border:none" disabled>
    </p>
    <p>
        <button type="button">注册</button>
    </p>

</form>


</body>

</html>

运行实例 »

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

PS：手抄代码如下

1.jpg

2 (1).jpg

3.jpg

4.jpg

5.jpg

6.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！