CSS的书写规范+三大特性+盒子模型

CSS的书写规范

空格规范

.d1 {		/*【强制】 选择器 与 { 之间必须包含空格*/
         color: red;
        }

CSS背景

<style>
        body {
            /*    !*background-color: pink;*!*/
            /*    background-image: url("../img/品如.jpg");*/
            /*    color: red;*/
            /*    !*background-repeat: no-repeat;*!*/
            /*    !*background-position: 50px top ;*!*/

            /*    !* scroll : 　背景图像是随对象内容滚动*/
            /*        fixed : 　背景图像固定   *!*/
            /*    background-attachment: fixed;*/
            /*    height: 3000px;*/
            /*}*/


            /*background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置*/
            /*background: rgba(0,191,255,0.8) url("../img/品如.jpg") repeat-y scroll 50% 0;*/

            /*background: rgba(0,191,255,0.8);*/


            background: url("img/16.jpg") no-repeat scroll 10px 20px/50px 60px ,
                        url("img/17.png") no-repeat scroll 150px 120px  ;
        ;
            background-size: contain ;
        }

    </style>

凹凸文字效果

<style>
        body {
            background-color: #ccc;
        }
        div {
            color: #ccc;
            font: 700 80px "微软雅黑";
        }
        div:first-child {
            /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
            text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
        }
        div:last-child {
            /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
        }
        a {
            text-decoration: line-through;
        }

    </style>
<div>我是凸起的文字</div>
<div>我是凹下的文字</div>

CSS的三大特性

层叠

浏览器解析CSS是从上至下，当CSS冲突时以最后定义的CSS为准。
层叠性是指多种CSS样式的叠加。例如，当使用内嵌式CSS样式表定义

标记字号大小为12像素，链入式定义<p>标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。

继承

继承就是子标签继承了上级标签的CSS样式的属性
继承性是指书写CSS样式表时，子标记会继承父标记的某些样式.
文本相关属性：font-family, font-size, font-style,font-weight, font, line-height,text-align,color 继承特殊性: 无法继承父类的颜色 原因: 自己默认有颜
h 标题标签不能继承父类设置文字大小

优先级

权重会叠加
在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
所有都相同时，声明靠后的优先级大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

优先级从高到低：行内选择符、ID选择符、类别选择符、元素选择符。
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
important > 内联 > ID > 伪类|类 | 属性选择 > 标签 > 伪对象 > 通配符 > 继承

盒子模型

<div class="d3">
        <div class="d1">
            盒子模型
        </div>
        <div class="d2">
            关注她关注的所有东西。

            　　她开心我就开心，她不开心我也跟着不开心。

            　　听她的每一句话，仔细地想她需要什么，我应该做什么。

            　　不断地暗示她，嘴上说着再也不喜欢她了，心里还是开开心心的。

            　　她饿了给她送爱心便当，水果沙拉。

            　　会给她做爱心早餐。

            　　听她吐槽生活中的坏人，恨不得把坏人抓来狠狠揍一顿。

            　　偶尔给她旁敲侧击地讲讲面对坏人时她做得哪里不妥。

            　　喜欢看她穿新衣服的样子，夸她漂亮。

            　　从来不和她生大气，从来不记仇，一切让着她。

            　　无论何时收到她的消息都第一时间回复。

            　　打游戏的时候听到她的电话，马上去接电话。

            　　每天早上按照她预定的时间喊她起床。

            　　喜欢看她的笑脸喜欢听她的笑。

            　　对说过的感情要负责，履行所有说过的承诺。        </div>
    </div>
    <hr/>

    <table>
        <tr>
            <td>ss</td>
            <td>sa</td>
            <td>sd</td>
        </tr>
        <tr>
            <td>wa</td>
            <td>ws</td>
            <td>wd</td>
        </tr>
        <tr>
            <td>as</td>
            <td>aw</td>
            <td>ad</td>
        </tr>
    </table>