简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css样式（第三课）
Blogger Information
Blog 29
fans 0
comment 1
visits 19533
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
728 people have browsed it

10月30日 作业
* 元素按显示方式分为哪几种, 并举例, 正确描述它们

实例

1.1 按内容是否可替换

1.1.1 置换元素

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

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

1.2.1 块级元素

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

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

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

运行实例 »

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



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

答：css是层叠样式表，如同给人穿衣服一样，也可以比做衣服，可以给元素穿上不同的衣服，显示不同的属性。作用是用于布局和现实。


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

实例

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

        /**
        属性选择器
        属性由属性名和值二部分组成,对应的语法也有二种
        */

        p[class] {
            color: lightgreen;
        }

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

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

        /*几乎所有的元素都可以添加class和id属性,所以css针对这二个属性创建了二个快捷方式*/

         /*类选择器, 对应标签中的class属性
         第二,三行文本前景色更新为红色, 表示类选择器优先级高于元素选择器
        */
        .red {
            background-color: black;
        }


        /*
        ID选择器, 对应标签中的id属性
        第三行文本前景色更新为蓝色, 表示ID选择器优先器高于类选择器
        */
        #blue {
            background-color: lightgreen;
        }

        /*
        群级选择器:
        多个选择器之间用逗号分隔, 用于将样式应用到一组元素上
        将有class="red"的元素和<h2>元素选中,并将背景色设置为黄色
        第三行.red背景未改变,是因为它还有一个id属性, 而该属性优先级高于类属性
        */
        .red, h2 {
            background-color: lightcyan;
        }

        /*通配符选择器*/
        /*将body中所有元素内的文本字体放大一倍, rem是指相对于html根元素的字体大小*/
        body * {
            font-size: 2rem;
        }

    </style>
</head>
<body>
<p>吃了4碗面 付了1001264元!店主傻眼</p>
<p class="red">中国赢得漂亮:联合国关键位置打败美</p>
<p class="red" id="blue">身价万亿女总裁 为何却让14亿人揪心</p>
<p>美新航母二号舰下水 首舰仍无法作战</p>

<h2>今晚吃鸡，是鸡腿，不是游戏!</h2>

</body>
</html>

运行实例 »

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



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

实例

<!--a.css/里面填写css样式

/*后代选择器*/section h2 {    color: green;}
/*父子选择器*//*div中的三个h2标签并非是section的直接子元素,所以未匹配*/section > h2 {    color: red;}
/*同级相邻选择器*/#item + * {    background-color: lightblue;}
/*同级所有选择器*//*只会选择中与#item同级的, 不会选中div外部元素*/#item ~ * {    background-color: lightpink;}

-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下文选择器</title>
    <link rel="stylesheet" href="/css/a.css">
</head>
<body>

<section>
    <div>
        <h2 id="item">你赢了</h2>
        <h2>你输了</h2>
        <h2>很遗憾平局</h2>
    </div>
    <h2>奇迹啊！</h2>
    <h2>你真棒！</h2>
</section>
</body>
</html>

运行实例 »

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












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


实例

<!--
伪类选择器

伪类, 顾名思义, 仍然是"class"级别的选择器, 优先级小于id,大于标签

为了与传统的类选择器相区别, 伪类采用冒号:, 而不是点.

伪类之前常用在链接标签上<a>,非常简单大家可自行度度, 不再多说

我们重点放在伪类最重要的应用场景:

结构伪类: 根据子元素的位置特征进行选择
表单伪类: 根据表单控制状态特征进行选择
7.1 结构伪类

结构性伪类通常用于后代选择器中, 在父元素上调用,选择子元素集合中匹配的元素

 非限定类型

所谓非限定类型, 是指只关注子元素的位置, 忽略子元素类型(当然也可以指定类型)

:nth-child(n)是最主要的非限定类型,其它四个只是它的某种行为快捷方式罢了

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

所谓限定类型, 是指既关注子元素的位置, 也关注子元素类型(当然也可以忽略类型)

selector:nth-of-type(n)是最主要的限定类型,其它四个只是它的快捷方式

selector:nth-of-type(n): 匹配父元素中指定索引的子元素

selector:first-of-type: 匹配父元素中的第一个子元素

selector:last-of-type: 匹配父元素中的最后一个子元素

selector:nth-last-of-type(n): 匹配从父元素中倒数选择子元素

selector:only-of-type: 匹配父元素中的唯一子元素

非限定到限定的转换规则, 将child 用 of-type替换即可

常规语法: [selector]::nth-of-type(n)

 非限定与限定之间的转换

非限定,如:nth-child(n)前面加上选择器, 则自动转换为限定类型
限定类型, 如selector::nth-of-type(n),省略前面选择器, 则转为非限定类型
因为二者并无本质区别, 且可互相转换, 具体使用哪个都不会影响结果,效率也相同
这二种伪类选择器, 只是关注点不同罢了, 大家不必想得太复杂, 理解设计初衷就好
个人推荐首选限定类型选择器, 语义化更强烈
 结构伪类的参数

伪类中的参数n有二种类型, 它对应的初值并不相同
当n为字面量,则从1开始, 如(1,2,3...)
当n为表达式时, 如(2n, 2n+1, 2n-1...), 则从0开始,如果计算结果为0或负数,不会匹配
当n为负值是, 表示从反方向开始计算,如(-3), 即倒数三个
为奇偶索引,创建了二个快捷参数: (odd)奇数, (even)偶数
 表单伪类



:enabled: 选择每个启用的 <input> 元素

:disabled: 选择每个禁用的 <input> 元素

:checked: 选择每个被选中的 <input> 元素

:required: 包含required属性的元素

:optional: 不包含required属性的元素

:valid: 验证通过的表单元素

:invalid: 验证不通过的表单 : :read-only: 选择只读表单元素
-->




实例/*后代选择器*/
section h2 {
    color: green;
}

/*父子选择器*/
/*div中的三个h2标签并非是section的直接子元素,所以未匹配*/
section > h2 {
    color: red;
}

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

/*同级所有选择器*/
/*只会选择中与#item同级的, 不会选中div外部元素*/
#item ~ * {
    background-color: lightpink;
}
运行实例 »点击 "运行实例" 按钮查看在线实例

运行实例 »

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


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <link rel="stylesheet" href="/css/c.css">
</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>
        <h2>人员任命书</h2>
        <p>为了迎合公司发展，现将以下人员任命:</p>
        <ul>
            <li>张三：市场部经理职位</li>
            <li>张四：市场部区域总监职位</li>
            <li>张五：取消市场部经理职位</li>
        </ul>
        <p>凡以上人员适用试用期为3个月，到期后进行就职演讲，通过后将转为正式岗位。</p>
    </li>
</ul>
</body>
</html>

运行实例 »

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








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

实例

<!-- required 为必选标签；disabled禁用元素-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单伪类选择器</title>
    <link rel="stylesheet" href="static/css/style5.css">
</head>
<body>
<h2>用户登录</h2>
<form action="" method="post">
    <p>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" required placeholder="e1@q.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">COOKIE周期:</label>
        <select name="save_time" id="save_time">
            <option value="12" selected>12H</option>
            <option value="24">24H</option>
        </select>
    </p>

    <p>
        <input type="hidden" name="login_time" value="登陆时间戳">
    </p>
    
    <p>
        <label for="warning">警告:</label>
        <input type="text" id="warning" value="24小时只能登录1次" style="border:none" disabled>
    </p>


    
</form>
</body>
</html>

运行实例 »

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



webwxgetmsgimg (1).jpg

webwxgetmsgimg (3).jpg

webwxgetmsgimg (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！