博客列表 >第二天CSS基础 - 九期线上班

第二天CSS基础 - 九期线上班

云外
云外原创
2019年10月31日 20:17:46561浏览

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

块级框对应的是块级元素,

行内框对应的是行内元素

行内框的宽高, 由它内部的内容决定

块级框的宽高, 是由它内部的子元素决定

一般来说, 块级框内,可以嵌套行内框, 反过来就不允许(可用display改变)

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

CSS: 层叠样式表(Cascading Style Sheets)

CSS是用来设置页面中的元素样式和布局的

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

CSS选择器:根据元素的标签名称和属性来选择元素, 是最朴素,最直观的方式

样式声明=属性+属性值

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>举例演示CSS简单选择器</title>
    <style>
        /*元素选择器*/
        p {
            color:red;
            background-color: azure;
        }
        /*属性选择器*/
        /*属性由属性名和值二部分组成,对应的语法也有二种*/
        p[class] {
            color: black;
        }
        p[class="cs"]  {
            color: aliceblue;
        }
        p[id="bl"] {
            color: aqua;
        }
        /*几乎所有的元素都可以添加class和id属性,所以css针对这二个属性创建了二个快捷方式*/
        /*类选择器, 对应标签中的class属性*/
        /*类选择器优先级高于元素选择器*/
        .cs{
            background-color: brown;
        }
        /*ID选择器, 对应标签中的id属性*/
        /*ID选择器优先器高于类选择器*/
        #bl{
            background-color: blue;
        }
        /*
       群级选择器:
       多个选择器之间用逗号分隔, 用于将样式应用到一组元素上
       将有class="cs"的元素和<h3>元素选中,并将背景色设置为绿色
       第三行.rcs背景未改变,是因为它还有一个id属性, 而该属性优先级高于类属性
       */
        .cs,h3{
            background-color: green;
        }
    </style>
</head>
<body>
<p>文能挂机喷队友,武能越塔送人头</p>
<p class="cs">进可孤身一挑五,退可坐等二十投</p>
<p class="cs" id="bl">前能飞脚救残敌,后能放墙堵队友</p>
<p>静则百年不见人,动则千里送超神</p>
<h3>问君能有几多愁,恰似五人四坑20投</h3>
</body>
</html>

运行实例 »

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

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

 

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         /*后代选择器*/
         /*body内所有p元素的颜色为green*/
        body p {
           color: green;
        }
        /*父子选择器*/
        body > p {
            background-color: blue;
        }
        /*同级相邻选择器*/
        #tj+* {
            color: azure;
        }
         /*同级所有选择器*/
        #tj ~ * {
            background-color: brown;
        }
    </style>
</head>
<body>
    <div>
    <p id="tj">英勇闪现送一血</p>
    <p>卖起队友不回头</p>
    <p>顺风浪,逆风投。</p>
    </div>
    <p>商女不知亡国恨</p>
    <p>出门还买多兰盾</p>
</body>

</html>

运行实例 »

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

6,举例演示常用CSS结构伪类选择器

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
        /*非限定类型*/
        /*选中页面所有的ul下面的子第二个子元素*/
        ul > :nth-child(2) {
            background-color: brown;
        }
        /*如果只想选中第一个ul中的第二个子元素*/
        /*会匹配到工作计划*/
        ul:first-child > :nth-child(2) {
            background-color: blue;
        }
        /*选中最后一个: 注意事项*/
        ul:first-child > :last-child{
            background-color: green;
        }
        /*选中最后一个子元素中,类型为<p>的元素*/
        /*参数是表达式时, n从0开始, n+1, 表示的索引是: 1,2,3,4...*/
        ul:first-child > :last-child > p:nth-child(n+1) {
            background-color: yellow;
        }
        /*选中最后一个子元素中,类型为<li>的后代元素*/
        /*开发部, ***部, 销售部会更新背景色*/
        ul:first-child > :last-child li:nth-child(n+1) {
            background-color: lightgray;
        }

        /*************************************************/

        /*使用限定类型伪类来改写上面案例*/
        /*仅以改写最后二个为例, 其它的改写方式相同*/

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

        /*选中最后一个子元素中,类型为<li>的后代元素*/
        /*开发部, ***部, 销售部会更新背景色*/
        ul:first-child > :last-child li:nth-child(n+1) {
            background-color: lightsalmon;
        }

    </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>
        <h2>注意事项</h2>
        <p>每天工作注意事项如下:</p>
        <ul>
            <li>早起给老婆做饭</li>
            <li>早上给员工开会</li>
            <li>晚上陪客户吃饭</li>
        </ul>
        <p>每月完成30W目标收入</p>
    </li>
</ul>
</body>
</html>

运行实例 »

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

7,举例演示常用CSS表单伪类选择器

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>举例演示常用CSS表单伪类选择器</title>
    <style>
        /*表单伪类选择器*/

        /*选择所有有效的input表单元素*/
        /*下拉列表虽有效,但不是input,所以未选中*/
        /*警告信息是禁用项, 所以未选中*/
        /*保存密码项实际上选中的, 通过检查元素可以查询*/
        input:enabled {
            background-color: blanchedalmond;
        }

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

        /*选择所有必选项*/
        input:required {
            background-color: yellow;
        }    
    </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>

运行实例 »

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

手写代码部分

新.jpg

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议