CSS页面引入方法

  外链式(在head标签里面)

  <link rel= “style href =“.1.css””>

  1.css文件如下

  div{

    width:200px:

    height:200px:

    backgr-color:red

  }

 

  嵌入式,通过style标签,写在head里面(在style标签里面写入外联式一样的)

  <style type="text/css">  

  div{

    width:200px:

    height:200px:

    backgr-color:red

  }

  </style>

 

  内联式(在body里面)分号很重要

  <div style = "width:200ps:height:200ps:backgroud-color:red"><div>

推荐使用外联和嵌入~~~~

    优先级别:离元素越近,越高

 

CSS的选择器

标签选择器,通过标签设置元素

id选择器,通过在标签里面添加id,id不能重复!

类选择器,应用最多

注释:/*这里写注释*/

  

标签选择器,通过div标签,影响所有div的标签

  <style>  

  div{

    width:200px:

    height:200px:

    backgr-color:red

  }

  </style>

 

类选择器 通过class类名来设置样式

首先在body的div标签添加类名

  <div class=“iteam”></div>

然后在head的写入嵌入式###引用类的时候,一定在前面有个点,一个类可以应用多个元素

  <style  

  .tieam{

    width:200px:

    height:200px:

    backgr-color:red

  }

  </style>

一个元素可以使用多个类名

<div class=“iteam iteam3”></div>

 

 

id选择器,通过id设置样式

首先在body的div标签添加id名

<div id=“iteam2”></div>

然后再head的写入嵌入式###引id的时候,一定在前面有个#,id唯一

  <style>  

  #iteam1{

    width:200px:

    height:200px:

    backgr-color:red

  }

  </style>

优先级:影响范围越大,优先级越小:id>class>标签

 

 

层级选择器,选择父类下的子类设置属性,通过类、id、元素混合一级一级寻找要设置的元素

(下面是在类选择器下的标签选择)

首先在body

<div class:“wrap”></div>

  <div></div>

然后在head标签下的嵌入式

  <style  

  .wrap div{

    width:200px:

    height:200px:

    backgr-color:red

  }

  </style>

(下面是在类选择器下的类选择器)

<div class:“wrap”></div>

  <div class:“wrap2”></div>

----------------------------------------------

  <style  

  .wrap .warp2{

    width:200px:

    height:200px:

    backgr-color:red

  }

  </style>

同理类选择器下的id选择器,

 

 

并列选择器,給多个元素设置相同样式,引用类元素中间是逗号隔开

<div class:“hhh”></div>

<div class:“ggg”></div>

<div class:“vvv”></div>

把他们的宽度、高度设置200

  <style  

  .hhh,ggg,vvv{

    width:200px:

    height:200px:

  }

  </style>

 

伪类选择器

设置鼠标悬停元素状态

<div class:“qqq”></div>

----------------------------------------

  <style>                        (平时的状态) 

  .qqq;hover{

    width:200px:

    height:200px:

  }

  </style>

 

  <style  

  .qqq;hover{      (鼠标悬停状态,变小了)

    width:111px:

    height:111px:

  }

  </style>

 

posted on 2019-08-14 18:13  我只是一只猫~  阅读(423)  评论(0编辑  收藏  举报