Div+Css基础知识点总结


Div+Css的学习其实也很简单,我们这里就对其中的知识点进行下总结:

1,Css样式的种类。第一:内联式样式表,第二:嵌入式样式表,第三:外部样式表,第四:输入样式表。

    什么是内联式样式表?

    <P style="font-size:16px;color:Red;background-color:Green;text-decoration:underline"></P>------这种方式现在已经比较少用了。

    什么是嵌入式样式表?

    <html>

    <head>

    <style type="text/css">

    <!--

      P{

        font-size:16px;

        color:Red;

        background-color:Green;

        text-decoration:underline

       }

    //-->(注意:似乎这个是为了防止有些浏览器不支持Style而用此来代替的)

    </style>

    </head>

    <body>

     <p>我是中国人</P> 

      ........(主体内容)

    </body>

    </html>

    什么是外部样式表?

    意思就是:把样式写在一个外部的.Css文件中,然后通过在html页面上引用该文件。任何html页面都可以引用。

    引用方法如下:

    <html>

    <head>

    <link rel="stylesheet" type="text/css" href="style/test.css"> (注意: href="存放.css文件的地址")

    </head>

    <body>

     <p>我是中国人</P> 

    </body>

    </html>

    什么是输入样式表?

    将Css文件输入到另一个Css文件中。

    假如你有一个test1.Css文件

    P{

        font-size:16px;

        color:Red;

        background-color:Green;

        text-decoration:underline

      }

    还有一个test2.css文件

    div{

        color:Yellow;

       font-size:20px

      }

    此时只要在test1.css文件里输入

    @import url(test2.css文件的地址) ----此时在页面中只要引用test1.css文件。就相当于引用了在这之前的test1.css和test2.css两个文件

    2,学到第二点:样式规则的选择器,第一:html selector;第二:class selector;第三:id selector ;第四:关联选择器;第五:组合选择器;第六:伪元素选择器

    什么是html选择器?

    就是直接在前边写html标签。如:<P>标签,<a>标签,<div>标签等

       div{--这就是html选择器形式

        color:Yellow;

        font-size:20px

        }

    什么是class选择器?

      .lei{--这就是class选择器形式

        color:Yellow;

        font-size:20px

        }

    在页面中可以这样调用 :<div class="lei">我是中国人</div>

    p .one{} --表示在P标签下的one选择器(只能针对<P>标签下)

    什么是id选择器?

     #aaa{--这就是id选择器形式

        color:Yellow;

        font-size:20px

        }

     在页面中可以这样调用 :<div id="aaa">我是中国人</div>

    注意:在同一个页面,不能有相同的名称的id选择器。                                                                                                 什么是关联选择器?

    类似一种嵌套的形式。

    如:p em{ --这就是关联选择器的形式,中间是用空格隔开的

      color:Red;

      font-size:16px

      }

    以上关联选择器强调了em标签必须嵌套在P标签里才能有效果。(强调嵌套顺序:必须后面的嵌套在前面的标签里面)

     页面中:--这样才有效果。

    <P>

      <em>我是中国人</em>

    </P>  

        什么是组合选择器?

          P,div,a,h1,.one,#two{

                  Font-size:16px;

                      Color:Red

                }

    这种用逗号隔开的叫组合选择器

    特点:就是以上所有标签都可以用这些样式,而不像关联选择器那样只能要按规定嵌套正确的才能使用这些样式

 

    什么是伪元素选择器(伪类)?

    a:link{}

    a:hover{}

    a:visited{}

    伪元素选择器和类一起使用:

    a.one:link{}

    a.two:hover{}

    a.three:visited{}

    动态伪类

    :focus 指示当前拥有输入焦点的元素(ie7表单元素不支持此伪类)

    选择第一个元素

    #header P:first-child   选择header中的第一个段落

    首字母选择

    P:first-letter  选择段落的第一个字母

    P:first-line    选择段落的第一行

    注意:这两个伪类只能作用于标记或段落之类的块级元素,而不能应用于超链接等行内元素

    :before和:after

    这两个伪元素用于插入生成内容并设置其样式。

    字面意思::before用于在元素内容的前面插入内容

                  :after反之。

    它们需要配合content一起使用。用after来消除浮动是一个不错的选择。

    语法: a[href]:before{content:“link”}

    注意:插入的内容是在该元素的内容的前面或后面,也就是说是在其内部插入。而不是在该元素前面或紧跟其后


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3