Heim > Web-Frontend > HTML-Tutorial > CSS基础笔记_html/css_WEB-ITnose

CSS基础笔记_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:16:02
Original
1270 Leute haben es durchsucht

之前没有开通好博客,笔记都记录在有道云,今天全部转过来!!!

1、当同一个html元素不止一个样式定义时,内联样式(在html元素内部)拥有最高的优先权;其他如内部样式表(位于

标签内部),外部样式,浏览器缺省设置次之;

 

2、css规则由两个主要部分构成:选择器以及一条或多条声明

      例如:h1{color:red;font-size:16px}  h1为选择器,{}内的为声明

 

3、几个选择器可共享声明,中间用逗号隔开,

      例如:h1,h2,h3,h4,h5,h6{color:red;}

 

4、派生选择器是通过元素在其位置的上下文关系的来决定,

     例如 li strong{font-style:italic;font-weight-normal}

             能按上面样式显示的代码为

             

  • 可以显示上面的样式
  •              下面代码不能显示上面的样式

                 

    不可以显示上面的样式

     

    5、id选择器可以为标有特定id的html的元素指定特定的样式

         id选择器以“#”来定义 ,例如#red{color:red}

         id选择器常常被用来建立派生选择器,例如:

         #sidebar p{font-style:italic;text-align:right;margin-top:50px}

     

    6、类选择器以一个点号显示,例如:.center{text-align:center}

         和id选择器一样,class也常常被用来做派生选择器

         例如:   .fancy td{color:red;background: yellow}

         元素也可基于他们的类被选择

         例如:td .fancy{color:red;background:yellow}

     

    7、属性选择是对带有指定属性的html元素设置样式

         例如[tital]{color:red}

               

    可以显示

               

    不可以显示

     

    8、属性和值选择器

         [tital~=hello]{color:red}解释为只要tital含有hello的元素都可以被执行

         例如:

    hello word

    可以被执行

                   

    student hello

    可以被执行

         属性选择器可为不带有id或class的表单设置样式

         例如;input[type="text"]{width:50px;background:yellow;margin-bottom:10px;front-famliy:宋体;}

     

    9、链接外部样式表需要用到标签,例如:

         

               

         

     

    Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage