html,css的引入及权重问题

保持对代码的热爱并保持怀疑态度

css三种样式

第一种 内部样式表

<!-- <style>
        div{width: 500px;height: 400px;background: tomato;}
    </style> -->

第二种 外部样式表

   <!-- <link rel="stylesheet" href="css/sxcd.css"> -->

第三种 导入样式表

<style>
        @import url(css/sxcd.css);
    </style>

第四种 内联样式表
<标签 style=“属性1:值1;属性2:值2; ……”></标签>
（直接在<>里面写

样式表的权重

内联高
内部样式表的权重与外部的样式表权重同级，谁在下面听谁的

css权重
对同一个元素设置相同的属性，但是属性值不同，谁的权重高听谁的

样式表的权重
内联样式表的权重最高，内部样式表和外部样式表的权重一样，跟顺序有关，谁在下面听谁的

总结：写大型项目，用外部样式表，写小练习，用内部，（后期需要提升权重，可能会用内联）

link 和@import的区别

差别1：link属于XHTML标签，而@import完全是CSS提供的一种方式

差别2：link引用的CSS会同时被加载，而@import是先加载html后加载css。

差别3：@import只在IE5以上的才能识别，而link兼容性更好

差别4：link支持js的dom，@import不支持js

CSS 选择器

这里暂时只举例两个，还有很多，后期博客也会更新完所有的选择器

标记选择器  标签

class 在<style>里面等于一个.可以重复使用  ，高级使用法一个class可以有多个名字，<div> class="xx xx"</div>  中间用空格隔开  .xx{}

id在<style>等于一个#，唯一性不能重复使用

通配符选择器 *

一般情况下通配符用来清边距  *{margin:0;padding:0;}

选择器的命名规则
        英文、数字、下划线、-组成
        不能中文，特殊字符
        开头英文开头
     规范
         不能用关键字命名，标签名
         词必达意