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>

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

时间： 2024-08-11 05:26:44

8-CSS的常见属性

可继承属性

所有标签可继承

visibility

cursor

内联标签可继承

块级标签可继承

列表标签可继承

不可继承属性

8-CSS的常见属性的相关文章

CSS的常见属性

css常见属性

css常见属性和属性值

CSS基础【2】：CSS常见属性

CSS3新增的常用方法以及CSS常见属性整理

CSS border边框属性教程(color style)

CSS中display属性：block、inline和inline-block的区别

css常用文本属性

css的一些属性及其属性值