前端设计主要分为3部分,分别是html,css,javascript,html建立网页的结构,承载着网页的内容,css是网页的样式,javascript是网页内容的行为。前面我们总结了html,CSS共有5种样式,如下:

1、行内样式(也叫内联样式)

使用方法:<标签 style="属性名1:属性值1;属性名2:属性值2;..."></标签>

2.页面嵌入(内部样式表)
  在head标签里面增加一个子标签
  <style>
   选择器{
    属性名1:属性值1;
    属性名2:属性值2;
    ......
   }
  </style>
  
  
  3.外部文件(外部样式表)
  在head标签里面增加一个子标签
  <link rel="stylesheet" href="css文件的路径" />
  
  4.外部导入样式
  主要用在样式初始化。因为有一些标签有自己的样式,我们需要清空,方便自己计算

css语法:   (符号都是英文的)
  选择器{
   属性名1:属性值1;
   属性名2:属性值2;
   ......
  }

 

css选择器共有6种,分别是:

1、ID选择器
   使用id选择器:在元素上面增加一个id属性,id属性的属性值不用用数字开头
   一个页面中只能有一个id属性值
   css中id选择的表示方法用   “#”表示
   2、class选择器

   使用class选择器:在元素上增加一个class属性,class属性的属性值不能用数字开头
    一个页面中可以有多个class属性值
    css中class选择器的表示方法用     "."   表示

3、标签选择器:直接写标签名

4、组合选择器:选择器直接用,多个用   ,  分隔开

5、子代选择器

只针对子代,用  >  分隔开

6、后代选择器

包含着子代选择器,用空格表示

7、通用选择器

用  *  表示,通用选择器适用于所有的标签,本页面的所有标签都会应用这个样式

 

选择器权重

选择器是有权重的,内联样式的权重为1000,ID为100,class为10,元素为1,通用选择器为0。权重计算是每种样式中所有的选择器权重相加,权重越高,冲突部分的样式就以权重高的为主,并不是说这个选择器没有用了,而是里面冲突的样式。

boss    !important     只要出现,就以这个为主 (权重最大)