博客列表 >CSS样式的引用和选择器的使用

CSS样式的引用和选择器的使用

手机用户701003573
手机用户701003573原创
2019年10月31日 16:46:34622浏览

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

    1.块级元素

        特点 :独自占据一行,可以设置有效宽高

        标签: div ,p, h,ul,

        实例:<p>项目团队优势</p>  <div>项目团队优势</div>

    2.行内元素

        特点:多个元素在一行内,显示无法设置有效宽高

        标签:a,input, span, em

        实例:<a href="">nihao</a>  <span> 你好</span>

    3.行内块元素

        特点:多个行内块在一行上显示可以设置有效宽高

        标签::input,img

        实例:<input type="button" value="保存">  <img src="hbsi.png">

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

        1.CSS:就是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(Cascading Stylesheet)。在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

            2.作用:在几乎所有的浏览器上都可以使用。使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。你可以轻松地控制页面的布局 。

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

        1.什么是CSS选择器:选择器可以帮助我们选中需要添加样式的标签

        2. 样式声明:选择器 + 样式声明

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的引用</title>
  <!--  <link rel="stylesheet" href="static/Css1.css">-->
    <style>
        @import "static/Css1.css";
        /*元素选择器*/
        p{
            color: #27ebff;
        }
        /*id选择器*/
        #id{
            color: #2641ff;
        }
        /*class选择器*/
        .yan{
            color: #ff7869;
        }
        /*群选择选择器 中间用逗号隔开*/
        .yan, h2{
            background-color:yellow;
        }

        /*通配符选择器*/
        /*将body中所有元素内的文本字体放大一倍, rem是指相对于html根元素的字体大小*/
        body * {
            font-size: 2rem;
        }
    </style>
</head>
<body>
<p >定了!php - Array to string conversion - Stack Overflow</p>
<p id="id">项目团队优势</p>
<p class="yan">项目进度:</p>

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

运行实例 »

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

1572508098133559.png

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下文选择器</title>
    <style>
        /*后代选择器*/
        section h2 {
            color: green;
        }
        /*父子选择器*/
        section>div>h2{
            color: #2937ff;
        }

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

<section>
    <div>
        <h2 id="item">项目团队优势</h2>
        <h2>项目进度</h2>
        <h2>今晚加班</h2>
    </div>
    <h2 id="id">公司管饭管打车</h2>
    <h2>Array</h2>
</section>
</body>
</html>

运行实例 »

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

QQ截图20191031160915.png

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*所有ul下面第二个子元素*/
        ul > :nth-child(2) {
            background-color: lightblue;
        }
        /*第一个ul下面第一个子元素*/
        ul:first-child > :nth-child(1) {
            background-color: #ee2413;
        }
        /*选中最后一个: 重要通知*/
        ul:first-child > :last-child {
            background-color: #13e1ff;
        }
        /*选中最后一个子元素中,类型为<li>的后代元素*/
        /*小红, 小华, 小明会更新背景色*/
        ul:first-child > :last-child li:nth-child(n+1) {
            background-color: #2bffd5;
        }
    </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>laravel实战</li>
            </ul>
        </li>
        <li>
            <h3>名字</h3>
            <ul>
                <li>小红</li>
                <li>小华</li>
                <li>小明</li>
            </ul>
        </li>
    </ul>
</body>
</html>

运行实例 »

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

QQ截图20191031163827.png

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单伪类选择器</title>
    <style>
        /*input框里背景*/
        input:enabled {
            background-color: #28ff5c;
        }
        /*选择禁用*/
        input:disabled {
            background-color: lightgray;
        }
        /*选择所有必选项*/
        input:required {
            background-color: yellow;
        }
    </style>
</head>
<body>
<h3>用户注册</h3>
<form action="" method="post">
    <p>
        <label for="user_name">账户:</label>
        <input type="text" name="user_name" required id="user_name" value="huang">
    </p>
    <p>
        <label for="password">密码:</label>
        <input type="password" name="password" id="password" placeholder="6-12位之间">
    </p>
    <p>
        <label for="email">邮箱:</label>
        <input type="email" name="email" id="email" disabled >

    </p>
    <p>
        <button type="button">注册</button>
    </p>
</form>
</body>
</html>

运行实例 »

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

QQ截图20191031164613.png

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