码迷,mamicode.com
首页 > Web开发 > 详细

8-CSS的常见属性

时间:2019-10-25 23:38:24      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:是什么   ros   修改   超出   follow   指针   ***   har   ref   

CSS的常见属性

CSS有N多属性,根据继承性,主要可以分为2大类:

  • 可继承属性

父标签的属性值会传递给子标签
一般是文字控制属性

  • 不可继承属性

父标签的属性值不能传递给子标签
一般是区块控制属性
父标签私有的属性,是不能被继承的。

可继承属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可继承的属性</title>

    <style>
        body{
            font-size: 30px;
            color: red;
        }
    </style>

</head>
<body>
    <div>我是div</div>
    <span>我是span</span>
    <p>我是段落</p>
</body>
</html>

代码:将body中的子标签继承body标签的设计。

技术图片

上图:子标签继承了body标签的设计样式。 span嵌套在div中,所以看起来是在一行。

所有标签可继承

visibility

http://www.w3school.com.cn/c***ef/pr_class_visibility.asp
连接用来讲解visibility

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常用属性</title>

    <style>
        div{
            background-color: red;
            width: 500px;
            height: 200px;

        }
        span{
            background-color: green;
        }
    </style>

</head>
<body>
    <div></div>
    <span>111111</span>
</body>
</html>

技术图片

上图:当前的设计样式

visibility: hidden;

代码:在div设计中增加visibility: hidden;

技术图片

上图:
可以看到div的颜色内容被隐藏了,但宽度、高度还是在的。
如果用display:none的话,整个都会被隐藏。

cursor

cursor设计光标类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常用属性</title>

    <style>
        div{
            background-color: red;
            width: 500px;
            height: 200px;
            /*visibility: hidden;*/
            /*display: none;*/
            cursor: pointer;
        }
        span{
            background-color: green;
        }
    </style>

</head>
<body>
    <div></div>
    <span>111111</span>
</body>
</html>

代码:新增cursor: pointer;设计样式,将鼠标放在上面会变成小手的样子。

http://www.w3school.com.cn/c***ef/pr_class_cursor.asp
该链接中有很多改变指针的样式。

url
需使用的自定义光标的 URL。

注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。

default 默认光标(通常是一个箭头)
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针(一只手)
move 此光标指示某对象可被移动。(页面内容拖动可以用move)
e-resize 此光标指示矩形框的边缘可被向右(东)移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize 此光标指示矩形框的边缘可被向上(北)移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize 此光标指示矩形框的边缘可被向下移动(南)。
w-resize 此光标指示矩形框的边缘可被向左移动(西)。
text 此光标指示文本。

所有标签可继承
visibility、cursor(这两个属性可以被所有标签继承)

内联标签可继承

技术图片

上图:红色的属性是关注重点,其他了解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常用属性</title>

    <style>
        div{
            background-color: red;
            width: 500px;
            height: 200px;
            /*visibility: hidden;*/
            /*display: none;*/
            cursor: pointer;
        }
        span{
            background-color: green;
        }
        p{
            font-weight: bolder;
        }
    </style>

</head>
<body>
    <div></div>
    <span>111111</span>

    <p>我是段落</p>
</body>
</html>

代码:新增p标签,新增p标签设计给字体加粗。

技术图片

上图:字体已被加粗

        p{

            font-weight: bolder;
            text-decoration: underline;
        }

代码:新增text-decoration: underline; 下划线

上图:

技术图片

上图:可以看到字体下面有下划线

<a href="#">我是超链接</a>

代码:新增超链接

技术图片

技术图片

上2图:增加的超链接默认带有下划线,但看购物网站中的超链接是不带有下划线的。

        a{
            text-decoration: none;
        }

代码:新增插连接设计,将下划线去掉

技术图片

上图:超链接去掉了下划线

块级标签可继承

text-indent、text-align

        p{
            font-weight: bolder;
            text-decoration: underline;

            background-color: yellowgreen;
            width: 500px;
            text-indent: 20px;
        }
    <p>我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>

上2代码:修改p标签内容; p标签设计新增颜色、宽度和首行缩进的设计;
text-indent: 20px;用于缩进设计。

技术图片

上图:首行已经缩进

/*text-indent: 20px;*/
text-indent: 5%;

代码:p标签设计,将缩进改成百分比缩进,这个百分比缩进可以根据页面的大小自动改变大小,始终是页面大小的5%。

        div{
            background-color: red;
            /*width: 500px;*/
            /*height: 200px;*/
            width: 30%;
            height: 20%;
            /*visibility: hidden;*/
            /*display: none;*/
            cursor: pointer;
        }
<div>123123123</div>

上2代码:修改div标签内容和div标签的设计,将div的宽度、高度设计改成百分比。

技术图片

上图:宽度改变了,但高度没改变,这是因为百分比是随着内容多少而自动变化的,当前内容较少,所以看不出来。

列表标签可继承

技术图片

    <ul>
        <li>我是列表</li>
        <li>我是列表</li>
        <li>我是列表</li>
        <li>我是列表</li>
    </ul>

代码:body中增加列表标签

技术图片

上图:列表的默认样式

        ul{
            list-style: circle;
        }

代码:对ul进行设计,会被列表标签继承; 设计其列表格式。

技术图片

上图:列表左边的实心点,变成了空心点。

http://www.w3school.com.cn/c***ef/pr_list-style.asp

        ul{
            /*list-style: circle;*/
            list-style: none;
        }

代码:实际当中,列表常用的是none,也就是什么都没有。

技术图片

不可继承属性

技术图片

上图:红色表示常用

div{
            /*background-color: red;*/
            /*width: 500px;*/
            /*height: 200px;*/
            width: 30%;
            height: 300px;
            /*visibility: hidden;*/
            /*display: none;*/
            /*cursor: pointer;*/

            background: url("https://box.bdimg.com/static/fisp_static/common/img/searchbox/logo_news_276_88_1f9876a.png");

        }

代码:当前div设计样式; 修改height: 300px; 新增background: url

技术图片

上图:当前图片效果是平铺的效果


background: url("https://box.bdimg.com/static/fisp_static/common/img/searchbox/logo_news_276_88_1f9876a.png") no-repeat;

代码:修改为 no-repeat(不使用平铺)

技术图片

http://www.w3school.com.cn/c***ef/pr_background-size.asp

技术图片

上图:增加一张图片

   <style>
        div{
            /*background-color: red;*/
            /*width: 500px;*/
            /*height: 200px;*/
            width: 50%;
            height: 400px;
            /*visibility: hidden;*/
            /*display: none;*/
            /*cursor: pointer;*/

            /*background: url("https://box.bdimg.com/static/fisp_static/common/img/searchbox/logo_news_276_88_1f9876a.png") no-repeat;*/
            background: url("images/img_02.jpg");
            background-size: cover;
        }

代码:将图片拉伸

技术图片

上图:图片拉伸后已经占据整个空间(设计的宽度和高度的整个空间)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常用属性</title>

    <style>
        /*div{*/
        /*    !*background-color: red;*!*/
        /*    !*width: 500px;*!*/
        /*    !*height: 200px;*!*/
        /*    width: 50%;*/
        /*    height: 400px;*/
        /*    !*visibility: hidden;*!*/
        /*    !*display: none;*!*/
        /*    !*cursor: pointer;*!*/

        /*    !*background: url("https://box.bdimg.com/static/fisp_static/common/img/searchbox/logo_news_276_88_1f9876a.png") no-repeat;*!*/
        /*    background: url("images/img_02.jpg");*/
        /*    background-size: cover;*/
        /*}*/
        span{
            background-color: green;
        }
        p{
            font-weight: bolder;
            text-decoration: underline;

            background-color: yellowgreen;
            width: 500px;
            /*text-indent: 20px;*/
            text-indent: 5%;

        }
        a{
            text-decoration: none;
        }
        ul{
            /*list-style: circle;*/
            list-style: none;
        }
        div.test1{
            background-color: red;
            width: 200px;
            height: 20px;
        }
    </style>

</head>
<body>
    <div>123123123</div>
    <span>111111</span>

    <p>我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>

    <a href="#">我是超链接</a>

    <ul>
        <li>我是列表</li>
        <li>我是列表</li>
        <li>我是列表</li>
        <li>我是列表</li>
    </ul>

    <div class="test1">我是MT我是MT我是MT我是MT我是MT我是MT我是MT我是MT我是MT我是MT我是MT</div>

</body>
</html>

代码:新增div内容和div设计

技术图片

上图:图中给div设计了红色背景,但因为设计了宽度和高度,所以部分内容超出了颜色的范围。

        div.test1{
            background-color: red;
            width: 200px;
            height: 20px;

            overflow: hidden;
        }

代码:新增overflow: hidden;

技术图片

上图:将超出高度的内容给隐藏了。

        div.test1{
            background-color: red;
            width: 200px;
            height: 60px;

            /*overflow: hidden;*/
            overflow: scroll;
        }

代码:修改overflow: scroll; height: 60px;

技术图片

上图:超出的部分是可以通过滚动来查看的。

http://www.w3school.com.cn/c***ef/pr_pos_overflow.asp

  • 最终代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常用属性</title>

    <style>
        /*div{*/
        /*    !*background-color: red;*!*/
        /*    !*width: 500px;*!*/
        /*    !*height: 200px;*!*/
        /*    width: 50%;*/
        /*    height: 400px;*/
        /*    !*visibility: hidden;*!*/
        /*    !*display: none;*!*/
        /*    !*cursor: pointer;*!*/

        /*    !*background: url("https://box.bdimg.com/static/fisp_static/common/img/searchbox/logo_news_276_88_1f9876a.png") no-repeat;*!*/
        /*    background: url("images/img_02.jpg");*/
        /*    background-size: cover;*/
        /*}*/
        span{
            background-color: green;
        }
        p{
            font-weight: bolder;
            text-decoration: underline;

            background-color: yellowgreen;
            width: 500px;
            /*text-indent: 20px;*/
            text-indent: 5%;

        }
        a{
            text-decoration: none;
        }
        ul{
            /*list-style: circle;*/
            list-style: none;
        }
        div.test1{
            background-color: red;
            width: 200px;
            height: 60px;

            /*overflow: hidden;*/
            overflow: scroll;
        }
    </style>

</head>
<body>
    <div>123123123</div>
    <span>111111</span>

    <p>我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>

    <a href="#">我是超链接</a>

    <ul>
        <li>我是列表</li>
        <li>我是列表</li>
        <li>我是列表</li>
        <li>我是列表</li>
    </ul>

    <div class="test1">我是MT我是MT我是MT我是MT我是MT我是MT我是MT我是MT我是MT我是MT我是MT</div>

</body>
</html>

8-CSS的常见属性

标签:是什么   ros   修改   超出   follow   指针   ***   har   ref   

原文地址:https://blog.51cto.com/daimalaobing/2445592

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!