简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css基础与选择器
Blogger Information
Blog 16
fans 0
comment 0
visits 16844
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基础与选择器
HTML基础标签
Original
533 people have browsed it

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

       1.隐      藏:    div , p , h , ul...    

                             独占一行 可以设置有效宽高 , 当发生嵌套,子元素没有设置宽高 , 子等于父宽

         2.块级元素:   div , p , h , ul...                             

                             独占一行 可以设置有效宽高 , 当发生嵌套,子元素没有设置宽高 , 子等于父宽

         3.行内元素:   span , em , a , strong...

                             多个元素在一行内显示 , 无法设置有效宽高,宽度由容器的内容决定 

         4.行内块元素:input, img...

                             多个行内块元素在一行上显示 , 可以设置有效宽高

css是什么? 它的作用是什么?

        css 是层叠样式表 , 用来设置 HTML元素在文档中的布局和显示方式

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

        css选择器是一种模式 , 用于选择需要添加样式的元素 , 用来确定HTML的树形结构中的

          DOM(文档对象模型)元素节点

          样式声明:  选择器 {(样式规则=属性:属性值;) }  两部分组成 

css简单选择器  实例

          选择器优先级:id>class>元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css简单选择器 有五种</title>
    <style>
        /*1.元素选择器*/
        p{
            color:#ff0000;
        }
        /*2.属性选择器*/
        p[class]{
            color:#ffffff;
        }
        .blue{
            background-color: #0000ff;
        }
        /*3.ID选择器*/
        #yellow{
            color:#ffff00;
        }
        /*4.群级选项器*/
        .gray , h3{
            background-color:#808080;
        }
        /*5.通配符选择器*/
        body * {
            font-size: 2rem;
            /*将body里字体放大两倍*/
        }
    </style>

</head>
<body>
    <p>今天是2019年10月31日</p>
    <p class="blue">天气晴朗 阳光很暖</p>
    <p id="yellow">开始崭新的一天</p>
    <p class="gray">继续完成复习与作业</p>
    <h3>加油吧 多看多敲</h3>
</body>
</html>

运行实例 »

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

css上下文选择器 实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css上下文选择器</title>
    <style>
         /*1.后代选择器*/
        div p{
            color:#ff0000;
        }
        /*2.父子选择器*/
        div > h5{
            background-color:#808080;
        }
        /*3.同级相邻选择器*/
        #peer + *{
            color:#0000ff;
        }
        /*4.同级所有选择器*/
        #peer ~ *{
            background-color:#ffff00;
        }
    </style>
</head>
<body>
    <div>
        <h5>
          <p>今天是2019年10月31日</p>
          <p>天气晴朗 阳光很暖</p>
        </h5>
    </div>
    <p id="peer">开始崭新的一天</p>
    <p>继续完成复习与作业</p>
    <h3>加油吧 多看多敲</h3>
</body>
</html>

运行实例 »

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

css结构伪类限制器 实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css结构伪类选择器</title>
    <style>
        /*非限定类型 关注子位置 忽略子类型(可以指定)*/
         h2 > :nth-child(2){
             background-color:#ffff00;
         }
         h2 > :first-child{
             color:#ffff00;
         }
        /*限定类型  关注子位置与类型(也可忽略)*/
         h3 > :nth-last-of-type(1){
             background-color:#ff0000;
         }
         h4 > :nth-of-type(2){
             background-color:#0000ff;
         }

    </style>
</head>
<body>
    <ul>
      <h2>
        <li>耐克</li>
        <li>阿迪</li>
        <li>彪马</li>
      </h2>
    </ul>
    <ul>
      <h3>
        <li>美国</li>
        <li>德国</li>
        <li>德国</li>
      </h3>
    </ul>
    <ul>
      <h4>
        <li>成立于1972</li>
        <li>成立于1949</li>
        <li>成立于1948</li>
      </h4>
    </ul>
</body>
</html>

运行实例 »

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

css表单伪类选择器 实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css表单伪类选择器</title>
    <style>
        /*选择启用每个input元素*/
         input:enabled{
             background-color:#808080;
         }
        /*选择禁用每个input元素*/
         input:disabled{
             background-color:#0000ff;
         }
         /*选择每个被选中的input元素*/
         input:checked{
             background-color:#ff0000;
         }
    </style>
</head>
<body>
    <form action="" method="post">
        <label for="username">账号:</label>
        <input type="text" name="username" id="username" value="">
        <hr>
        <label for="password">密码:</label>
        <input type="password" name="password" id="password" value="">
        <hr>
        <label for="email">邮箱:</label>
        <input type="email" name="email" id="email" value="">
        <hr>
        <button>提交</button>
    </form>
</body>
</html>

运行实例 »

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


手写笔记

1572522394474172.jpg

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