简体中文(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 33
fans 0
comment 0
visits 19739
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
481 people have browsed it

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

1 按内容是否可替换

 置换元素
* 元素内容来自文档外部, 可以替换成不同的资源
* 该类元素都过特定属性实现资源的置换
* 由于这类元素不由文档直接提供,所以大小尺寸未知
* 此时,遵循最小化原则,尽可能最小的空间来显示它们
* 所以, 这类元素通常都是以*行内元素*身份出现(并非总是如此)
* 你可能已经猜到, 置换元素大多用*自闭合标签/空标签*来描述
* 实例: `<img>`, `<input>`都是这类元素
* `<img src="...">`: 以src属性指向引用的外部图片资源
* `<input type="...">`: type不同,替换成不同的类型

非置换元素

* 元素内容由文档直接提供, HTML中绝大多数元素,都属于此类
* 非置换元素的内容通常放在二个标签之间, 所以大多采用*双标签*
* 非置换元素, 有块元素与有行内元素, 只是提供者不同罢了
* 实例: `<h1><p><span><div><table><ul+li><a>...`

2 按元素是否独占一行

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

行内元素

* 遵循: *最小化原则*
* 总是在一行文本元素的内部生成, 它的宽高由所在行决定,不可以设置
* 例如: `<span>`,`<input>`, `<em>`,`<strong>`,`<a>`...

元素的显示方式

一切元素都是框任何元素都会在页面上占据一定的空间, 页面是以框的形式来显示它们块级框对应的是块级元素, 行内框对应的是行内元素行内框的宽高, 由它内部的内容决定,块级框的宽高, 是由它内部的子元素决定一般来说, 块级框内,可以嵌套行内框, 反过来就不允许(可用display改变)

  1. 内联元素。

     常用的内联元素有：
    <a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

     内联元素和其他元素都在一行
    元素的高度、宽度及顶部和底部边距不可设置
    元素的宽度就是它包含的文字或图片的宽度，不可改变。

     块级元素.

  2. 在html中<div>、 <p>、<h1>、<form>、<ul> 、 <li>就是块级元素。

        每个块级元素都从新的一行开始，并且其后的元素也另起一行,元素的高度、宽度、行高以及顶和底边距都可设置。元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。


实例

<!DOCTYPE html>
<body lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级元素内联元素演示</title>

</head>
<body>
<!--块级元素演示-->
<div>块级元素 一个块级元素独占一行 </div>
<p>块级元素 一个块级元素独占一行</p>
<ul> 块级元素 一个块级元素独占一行  </ul>
<!--内联元素演示<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>-->
<a href="/">内联元素a</a>

<span>内联元素sapn</span>
<strong>内联元素我们都在一行</strong>
</body>
</html>

运行实例 »

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

 1.jpg

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

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

主要作用：CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

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

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

举例演示CSS简单选择器

  1. 标签选择器，又称类型选择器（Type Selector），是最常见的CSS选择器，文档的元素就是选择器。

  2. 属性选择器,属性选择器可以根据元素的属性及属性值来选择元素

  3. 类选择器.类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用.

  4. id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

  5. 群组选择器。当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。

  6. 通配符选择器，它可以匹配任意类型的HTML元素

 

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS简单选择器</title>
    <style>
        /*1.标签选择器*/
        p {
            color: blue;
        }
        /*2.属性选择器*/
        p[class] {
            color: aliceblue;
        }
        p[class="blue"] {
            color: aquamarine;
        }
        p[id="red"] {
            color:blue ;
        }
        /*3.类选择器*/
        .red {
            color: deeppink;
        }
        /*4.ID选择器*/
        #blue {
            color: springgreen;
            background: cornflowerblue;
        }
        /*5.群组选择器*/
        .red, h3 {
            background: bisque;
        }
        /*6.通配符选择器*/
        body * {
            font-size: 2rem;
        }

    </style>
</head>
<body>
<p>CSS基础与选择器</p>
<p class="yellwo">CSS基础</p>
<p class="red" id="blue">CSS选择器</p>
<p class="red">前端学习</p>
<h3>php学习</h3>
</body>
</html>

运行实例 »

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

2.jpg

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

上下文选择器：基于祖先或者同胞元素选择一个元素

  1. 后代选择器:先找到祖先元素,再选择它下面的所有指定后代元素

  2. 父子选择器:先找到父级元素,再选择他下面所有直接后代元素

  3. 相邻选择器: 可选择紧接在另一元素后的元素，且二者有相同父元素

  4. 同级所有选择器

     

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下文选择器</title>
<style>
    /*后代选择器*/
    div p{background: red;}
    /*父子选择器:*/
 div > h1 {background: aqua;}
    /*同级相邻选择器*/
    h1 + span{background: antiquewhite;}
    /*同级所有选择器*/
span ~ a{ background: blue;}
</style>
</head>
<body>
<div>
<p>后代选择器</p>
    <h1 >父子选择器</h1>
        <span>同级相邻选择器  </span>
    <a href="">同级所有选择器</a>
    <a href="">同级所有选择器</a>
    <a href="">同级所有选择器</a>
</div>
</body>
</html>

运行实例 »

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

3.jpg

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

*:nth-child(n)`: 匹配父元素中指定索引的子元素
*:first-child`: 匹配父元素中的第一个子元素
*:last-child`: 匹配父元素中的最后一个子元素
*:nth-last-child(n)`: 匹配从父元素中倒数选择子元素

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS结构伪类选择器</title>
<style>
    
    /*选中页面所有的ul下面的子第一个子元素*/
    ul :nth-child(1){      background-color: grey;    }
    /*匹配父元素中的第一个子元素*/
    li:first-child {background: blue;}
    /*匹配父元素中的最后一个子元素*/
    li:last-child {background: antiquewhite;}
    /*匹配从父元素中倒数选择子元素*/
    li:nth-last-child(1){background: red;}
  
</style>

</head>
<body>
<div>
<div>
    <ul>

        <li>
        <h1>第一个子元素</h1>
        <ul>
            <li>第一个子元素第一</li>
            <li>第一个子元素第二</li>
            <li>第一个子元素第三</li></ul>
        </li>
        <li>
            <h1>第二个子元素</h1>
            <ul>
                <li>第二个子元素第一</li>
                <li>第二个子元素第二</li>
                <li>第二个子元素第三</li></ul>
        </li>


        <li>
            <h1>第三个子元素</h1>
            <ul>
                <li>第三个子元素第一</li>
                <li>第三个子元素第二</li>
                <li>第三个子元素第三</li></ul>
        </li>


    </ul>
    
</div>
</div>
</body>
</html>

运行实例 »

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

4.jpg

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

实例

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

    input:disabled{
        background-color: pink;
    }

    input:required{
        background-color: yellow;
    }</style>
</head>
<body>
<h2>用户登录</h2>
<form action="" method="">
    <p>
        <label for="email">邮箱：</label>
        <input type="email" name="email" id="email" required>
    </p>
    <p>
        <label for="pass">密码：</label>
        <input type="password" name="pass" id="pass">
    </p>
    <p>
        <label for="warning">警告：</label>
        <input type="text" value="不允许重复登录" id="warning" style="border:none;" disabled>
    </p>
    <p>
        <label for="save">保存密码：</label>
        <input type="checkbox" name="save" id="save" checked>
    </p>
</form>
</body>
</html>

运行实例 »

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

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