CSS（Cascading Style Sheets，层级样式表）

内容和格式分离

使用方式

外部样式表（保存在外部 .css ）
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

css语法

选择器、属性、值

p { font-family: times; }

选择器

类选择器用于指定一组元素的样式

类选择器使用 HTML类属性，并使用“.”定义

id 选择器用于为单个唯一元素指定样式

id 选择器使用 HTML元素的id属性，并使用“＃”定义

简单的元素选择器

p { color: blue }

派生选择器

#main img { border: solid black 5px; } //id为main中的img控制

css定位

CSS定位属性（ top 、 bottom 、 left 、right ）：定位元素
有四种不同的定位方法

静态定位

默认情况下， HTML元素定位为静态，始终根据页面的正常流定位静态定位元素（按照内容顺序进行显示）
静态定位元素不受 top 、left 、bottom 、right属性的影响

相对定位

相对定位的元素相对于其正常位置定位
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留

<style type="text/css">

    #div-before, #div-after {
        background-color:#aee;
        color:#000;
        width:400px;
    }

    #div-1 {
        width:400px;
        background-color:#000;
        color:#fff;
        position: relative; //相对定位
        left: 120px; //
        top: 30px; //
    }  

    #div-1-padding {
        padding:20px;
    }

</style>

<div>
 
    <div id="div-before">  
        <p>id = div-before</p> 
    </div>
 
    <div id="div-1">
        <div id="div-1-padding">
            <p>id = div-1</p>
            <div id="div-1a">
                <p>id = div-1a</p>
                <p>Lorem ipsum dolor sit amet.</p>
            </div>
            <div id="div-1b">
                <p>id = div-1b</p>
                <p>Lorem ipsum dolor sit amet .</p>
            </div>
        </div>
    </div>

     <div id="div-after">  
        <p>id = div-after</p> 
    </div>
 
</div>

绝对定位

绝对定位元素相对于第一个具有非静态定位的父元素定位。如果找不到这样的元素，则相对的块是 <HTML>
元素框从文档流完全删除。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样

<style type="text/css">

    #div-before, #div-after {
        background-color:#aee;
        color:#000;
        width:400px;
    }

    #div-1 {
        width:400px;
        background-color:#000;
        color:#fff;
        position: absolute; //        
    }  

    #div-1a {        
        background-color:#d33;
        color:#fff;
        position: absolute;  //绝对定位  
        right: 0px; //     
        top: 0px; //
    }  

    #div-1-padding {
        padding:20px;
    }

</style>

<div>
 
    <div id="div-before">  
        <p>id = div-before</p> 
    </div>
 
    <div id="div-1">
        <div id="div-1-padding">
            <p>id = div-1</p>
            <div id="div-1a">
                <p>id = div-1a</p>
                <p>Lorem ipsum dolor sit amet.</p>
            </div>
            <div id="div-1b">
                <p>id = div-1b</p>
                <p>Lorem ipsum dolor sit amet .</p>
            </div>
        </div>
    </div>

     <div id="div-after">  
        <p>id = div-after</p> 
    </div>
 
</div>

绝对定位元素div-1a相对于第一个具有非静态定位的父元素div-1定位。
元素框div1a从文档流完全删除，所以div1b上移。

div-after???

固定定位

具有固定位置的元素相对于浏览器窗口定位
即使滚动窗口，它也不会移动

Web信息安全实践_2.3css简介

CSS（Cascading Style Sheets，层级样式表）

使用方式

css语法

选择器

css定位

猜你喜欢