vlambda博客
学习文章列表

见证小范逆袭之路——HTML5第二天(5天)

HTML 样式

style 属性用于改变 HTML 元素的样式。

This text is in Verdana and red

This text is in Times and blue

This text is 30 pixels high

CSS样式选择器  

css:级联样式表,用来设置页面的美观和样式,通过style来实现

 

1 内联样式:直接把样式代码跟在元素的后面,定义到的是每个元素的样式

  <div style=””></div>

<div style=””></div>

 如果有多个区域相同的样式时,可重性不高.

2 内部样式:把样式代码,统一写到

  <head>

  <style></style>

</head>

内部样式要通过样式选择器来使用.样式选择器:有选择性的进行样式定义.

6种选择器的使用:

    

        1.标签选择器(元素选择器):

        标签选择器,这种选择器影响范围大,建议尽量应用在层级选择器中。

        如:

        *{margin:0;padding:0}   /* 影响所有的标签 */

        div{color:red} /* 影响所有的div标签 */

         

        <div>......</div>  <!-- 对应以上两条样式 -->

        <div class=”box”>......</div>  <!-- 对应以上两条样式 -->

        2.分组选择器:

        如:

        h1,h2,h3,h4,h5,h6,span,p,a,div{color:red}         

        <div class=”box”>

            <span>......</span>

            <a href=”#” >......</a>

        </div>

       

        <h3 class=”red”>......</h3>

        3.id选择器:

        通过id名来选择元素,元素的id名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。

         

        id是所有标签的属性,所有标签都有id属性,写代码时id的值是不允许重复的

 

    如:

    #box{color:red}

     

    <div id=”box”>......</div> <!-- 对应以上一条样式,其它元素不允许应用此样式 -->

        4.类选择器:(常用)

        通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器。

        如:

        .red{color:red}

        .big{font-size:20px}

        .mt10{margin-top:10px}

         

        <div class=”red”>......</div>

        5.层级选择器(派生选择器):

        主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突。

        如:

        .box span{color:red}

        .box .red{color:pink}

        .red{color:red}

        <div class=”box”>

            <span>......</span>

            <a href=”#” class=”red”>......</a>

        </div>


        <h3 class=”red”>......</h3>

 层级选择器最好不要超过四层,否则会影响性能。

6.伪类及伪元素选择器:

常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态,伪元素选择器有beforeafter,它们可以通过样式在元素中插入内容。

一般用在链接的响应

:hover 鼠标移上来时的效果

:link 鼠标点击之前的效果

:active 鼠标正在点击时的效果

:visited 点击之后的效果

如:

.box1:hover{color:red}

.box2:before{content:’行首文字’;}

.box3:after{content:’行尾文字’;}

 

<div class=”box1”>......</div>

<div class=”box2”>......</div>

<div class=”box3”>......</div>

 

<div class=”box1”>......</div>

 

<div class=”box2”>......</div>

<div class=”box3”>......</div>

优先级:

内联选择器>id选择器>类选择器>元素选择器


DIV盒子模型:

1.1 div中的内容离边框之间距离,还有divdiv之间的间距。进行设置.

        内边距:padding 指的是本区域中的内容离本区域各个边框之间的间距.  

Padding-left:10px离左边距10px padding-right padding-top padding-bottom

         离右      离上  离下

        Padding:10px 20px ; 分别在上下方向距10px 在左右方向距20px

        Padding:10px 20px 30px 40px; 分别离下左 10px 20px 30px 40px;

        在使用内边距时,区域会拉伸.

       

        如果希望内容在区域中有间距,本区域边框.可以使用

外边框Box-sizing:border-box; 把区域按边框固定大小.

       

 外边距:margin:指的是本区域离别的区域之间的间距

      Margin-top:10px 离上面的距离距10px  如果上面无区域,就以body第一条线为基线.

      Margin-left   margin-right margin-bottom  离左离右离下

      Margin:10px 30px 分别在上下方向都距10px  左右方向都距30px

      Margin:10px 20px 30px 40px 分别离上     左距10px 20px 30px 40px

      使用外边距时,区域不会拉伸.

      Margin:0 auto; 让区域在本页面中水平居中.(上下不变,水平方向自动适应居中)

练习:



 

案例,第一点,先要想的是,

1.    布局

2.    默认下,子区域在父区域中,是从左角开始布置的.

   如果要让子区域接你的想法,任何位置进行设置,要用定位.