有路网PC端
有路网移动端

免费配套视频教程

教程配套源码资源

考虑对人的描述方式

人 {
   身高:175cm;   
    体重:70kg;   
    肤色:黄色
}

选择器 {
 	声明1;
    声明2;

    }

h1 {
	font-size:12px;
	color:#F00;
}

h1 {
	font-size:12px;
	color:#F00;
}

HTML标签作为标签选择器的名称

…、
、

p { font-size:16px;}

<标签名 class= “类名称”>标签内容

.类名称 { font-size:16px;}

<标签名 id= “id名称”>标签内容

#id名称 { font-size:16px;}

标签选择器直接应用于HTML标签

类选择器可在页面中多次使用

ID选择器在同一个页面中只能使用一次

使用标签选择器设置标题字体大小为20px

页面中所有段落中的文本字体大小为16px

使用类选择器设置正文和译文内容字体颜色为绿色

使用ID选择器设置译文标题颜色为蓝色

  
  
  
  
    h1 {
      font-size: 20px;
    }

    p {
      font-size: 16px;
    }

    .poem {
      color: green;
    }

    #title {
      color: blue;
    }
  


  浣溪沙
  

  
一曲新词酒一杯，

    去年天气旧亭台。

    夕阳西下几时回？

    无可奈何花落去，

    似曾相识燕归来。

    小园香径独徘徊。
  
  
译文
  
听一支新曲喝一杯美酒，还是去年的天气旧日的亭台，西落的夕阳何时再回来？
    那花儿落去我也无可奈何，那归来的燕子似曾相识，在小园的花径上独自徘徊。

后代选择器

交集选择器

并集选择器

在CSS选择器中通过嵌套的方式，对特殊位置的HTML标签进行声明.

外层的标签写在前面，内层的标签写在后面，之间用空格分隔.

标签嵌套时，内层的标签成为外层标签的后代.

h3 strong{color:blue; font-size:36px;}

由两个选择器直接连接构成，选中二者各自元素范围的交集.

第一个必须是标签选择器，第二个必须是类选择器或者ID选择器.

选择器之间不能有空格，必须连续书写

p.txt{color:blue; line-height:28px;}

多个选择器通过逗号连接而成.

利用并集选择器同时声明风格相同样式.

h3,.first,.second,#end{
 font-size:16px; 
 color:green; 
 font-weight:normal;
}

  
  
  
  
    p strong,
    h1 strong {
      color: red;
    }
  



  花千骨大结局
  
人间帝王轩辕郎、无所不知所不能东方彧卿（其实他就是超脱六界之外的异朽君）、妖魔两界圣君杀阡陌那时都是爱花千骨的，都希望白子画能够善待花千骨。
  
白子画的善待是八十一根消魂钉，普通仙一根消魂钉就死去活来。花千骨受了17根，又被白子画用断念剑看了近百剑，花千骨心里那个痛苦不言而喻。而后，花千骨扔到地牢。白子画替她承受了剩下的消魂钉。
    白子画
    在霓漫天的告知下，白子画的师兄摩严得知花千骨居然悖逆天理爱上白子画，用绝情水泼到花千骨的喉咙里，脸上，于是花千骨又瞎又哑又毁容，被发配到了几乎不可能走出来的蛮荒之地。
  花千骨又瞎又哑又毁容

• 行内样式
• 内部样式表
• 外部样式表

style属性的应用
直接在HTML标签中设置的样式

CSS代码写在的标签中

  ……

……

……

    
    
    
 
    body{color:red;}    


    
 

     父级P
     子级strong
     父级P
 
 
    
     
子级li1
     
子级li2
 
    

勇气
三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。

到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。

p{color:red;} 
.first strong{color: blue} 

    
    
    
 
p{color:red;} 
.first{color:green;}    



三年级时，我还是一个胆小如鼠的小女孩。

    



    p{color:red;} 
    p{color:green;}



    
三年级时，我还是一个胆小如鼠的小女孩。

    
    
    
 
    p{color:red;} 
    p{color:blue;}    


 
    
三年级时，我还是一个胆小如鼠的小女孩。
 

    
    
    
 
    p{color:red!important;}  
    .first{color:blue;}   


 
      
三年级时，我还是一个胆小如鼠的小女孩。