css部分元素的的使用

最新推荐文章于 2022-05-18 22:00:31 发布

因渺小而伟大

最新推荐文章于 2022-05-18 22:00:31 发布

阅读量154

点赞数

分类专栏： HTML 文章标签： css元素使用

本文链接：https://blog.csdn.net/qq_43205282/article/details/103411680

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

css的样式优先级

高----------------->低

css内容属性

content属性通常是和：before和：after伪元素选择器配合使用的，用于插入生成的内容

属性	含义
:before	插入在前
:after	插入在后

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Framaeset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <title>Web技术社区</title>
    <style>
        h1:before{
            content: "Hello";
         }
        h2:after{
            content: url("https://www.w3school.com.cn/i/html5_new_note.png");
        }

    </style>

</head>
<body>
     <h1>World</h1>
     <h2>HTML</h2>
</body>
</html>

结果
在这里插入图片描述

overflow属性的使用

值	含义
visible	默认值
auto	如果内容被修剪，自动添加滚动条
hidden	会自动将超出的内容裁减掉，且裁剪掉的内容不可见
scroll	设置一直显示滚动条

     <p class="abc" style="width:200px;height:50px ;overflow:visible">
         较高级复杂的劳动，<br>是这样一种劳动力的表现，这种劳动力比较普通。。。。。。
     </p>
     <br>
     <hr>
     <p class="abc" style="width:200px;height:50px ;overflow:auto">
         较高级复杂的劳动，<br>是这样一种劳动力的表现，这种劳动力比较普通。。。。。。
     </p>
     <br>
     <hr>
     <p class="abc" style="width:200px;height:50px ;overflow:hidden">
         较高级复杂的劳动，<br>是这样一种劳动力的表现，这种劳动力比较普通。。。。。。
     </p>
     <br>
     <hr>

     <p class="abc" style="width:200px;height:50px ;overflow:scroll">
         较高级复杂的劳动，<br>是这样一种劳动力的表现，这种劳动力比较普通。。。。。。
     </p>
     <hr>

结果：

在这里插入图片描述

display属性

display用于设置元素如何显示

none 该值用于让元素隐藏，通常用于预先做好，动态显示
block 该值将显示为块级元素，元素前后会有换行符，，可以设置它的宽高和上右下左的内外边距
inline 该值会显示为内联元素，元素前后没有换行符，也无法设置宽高和内外边距
inline-block 该值会被认为是行内块元素，这种值既具有block值，可以设置width和height属性的特性，又保持了inline值的不换行的特性
inherit 继承父元素的display设置

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Framaeset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <title>Web技术社区</title>
    <style>
        span.inline_box{
            border: solid 1px #1fa8b4;
            display: inline-block;
            width: 100px;
            text-align: center;
        }
        .inline{
            display: inline;
        }
    </style>

</head>
<body>
     <p style="display: none" id="demo">大家好。。。。。</p>
     <button onclick="document.getElementById('demo').style.display=''">显示</button>
     <button onclick="document.getElementById('demo').style.display='none'">隐藏</button>
     <p><span style="display: block">hello</span> word</p>
     <div class="inline">hello </div>
     <div class="inline">world</div>
     <br>
     <span class="inline_box"> HTML</span>
     <span class="inline_box"> CSS</span>
     <span class="inline_box"> JQuery</span>
</body>
</html>