*css相关

<div style="width:100px;height:100px;background:red;"></div>   <!--行内样式写法-->

<style type="text/css">
#div{width:100px;height:100px;background:red;}              /*内连样式写法,写在<title>下面*/
</style>

<link rel="stylesheet" type="text/css" href="ccss.css">     <!--外连样式写法,rel属性定义当前文档与被链接文档之间的关系-->

#div{width:100px;height:100px;background:red;}              //.css文件中直接写

 

css的优先级

 

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。

2. 作为style属性写在元素内的样式

3. id选择器

4. 类选择器

5. 标签选择器

6. 通配符选择器

7. 浏览器自定义或继承

 

更加精准的选择

思路：使用元素+类 || +id选择器 注意：精确选择时，俩个选择器中间不能有空格，要紧挨着，否则不生效

<style> 
p.blue{   
  color:blue;
}
 
</style>
 
<p class="blue">class=blue的p</p>
 
<span class="blue">class=blue的span</span>

 

如何使用百分比？

如果想使用百分比，那就要先给它父容器的width:100%;然后在设置子元素的width:50%才会生效

        （括号里的是官方定义）
        http://www.w3school.com.cn/cssref/index.asp     //文档


        <!--尺寸相关 宽高间距等-->
        width:33.3%;        <!--宽-->
        height: 250px;      <!--高-->
        top:50%;            <!--上边和其他元素的距离（定位元素的上外边距边界与其包含块上边界之间的偏移）-->
        left: 50%;          <!---->
        <!--内外边距规律都是：上右下左-->
        margin：2cm 4cm 3cm 4cm              <!--外边距-->
        Padding：10px 5px 15px 20px; <!--内边距-->

        <!--元素相关 隐藏、浮动、定位等-->
        overflow: hidden;   <!--当内容溢出元素框：隐藏-->
        float: left;        <!--浮动：左-->
        clear:both;         <!--清除浮动（元素的哪一侧不允许其他浮动元素）-->
        background: #0E774A;<!--背景颜色-->
        border-radius: 2px; <!--圆角边框-->
        border: 1px solid #d6d6d6; <!--边框-->
        display:block;      <!--显示/隐藏（应该生成的框的类型）可选值：none -->
        position: relative;     <!--相对定位-->
        transform: translateX(-50%)translateY(-50%); <!--图片同等比例缩放（2D 或 3D 转换）-->

        <!--文字相关 颜色、位置等-->
        line-height: 38px;  <!--行高-->
        text-align: center; <!--元素中的文本：居中-->
        font-size：100%；   <!--字体大小-->
        font-weight：bold；	<!--字体加粗-->
        color   <!--文本颜色-->
        text-overflow <!--文本溢出包含元素时发生的事情-->

        <!--特殊的-->
        box-sizing: border-box; <!--并排放置多个框（以特定的方式定义 匹配 某个区域的特定元素）。要配合width才能出效果。-->