8-CSS的常见属性

CSS的常见属性

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

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、虚拟主机、营销软件、网站建设、青州网站维护、网站推广。

• 可继承属性

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

• 不可继承属性

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

可继承属性

    
    

    



    
我是div
    我是span
    
我是段落

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

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

所有标签可继承

visibility

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

    
    

    



    

    111111

上图：当前的设计样式

visibility: hidden;

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

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

cursor

cursor设计光标类型

    
    

    



    

    111111

代码：新增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（这两个属性可以被所有标签继承）

内联标签可继承

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

    
    

    



    

    111111

    
我是段落

代码：新增p标签，新增p标签设计给字体加粗。

上图：字体已被加粗

        p{

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

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

上图：

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

我是超链接

代码：新增超链接

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

        a{
            text-decoration: none;
        }

代码：新增插连接设计，将下划线去掉

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

块级标签可继承

text-indent、text-align

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

            background-color: yellowgreen;
            width: 500px;
            text-indent: 20px;
        }

    
我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落

上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;
        }

123123123

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

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

列表标签可继承

    

        
我是列表
        
我是列表
        
我是列表
        
我是列表
    

代码：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

上图：增加一张图片

   



    
123123123
    111111

    
我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落

    我是超链接

    

        
我是列表
        
我是列表
        
我是列表
        
我是列表
    

    
我是MT我是MT我是MT我是MT我是MT我是MT我是MT我是MT我是MT我是MT我是MT

代码：新增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

• 最终代码

    
    

    



    
123123123
    111111

    
我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落

    我是超链接

    

        
我是列表
        
我是列表
        
我是列表
        
我是列表
    

    
我是MT我是MT我是MT我是MT我是MT我是MT我是MT我是MT我是MT我是MT我是MT