HTML引入CSS样式的方式详解

阅读更多

HTML引入CSS样式的方式详解

1.1内联属性（Inline style attribute）
        直接修改HTML元素的style属性，将CSS代码直接写在style属性里。
例：

我的字号被修改了

1.2直接写在style标签里
        通过选择器选择HTML元素，将CSS样式放在
1.3外部链接调用
1.3.1链接方式——标签
定义：
        标签定义文档与外部资源的关系。
语法：
       
注意：标签一般写在标签里。
常用属性：
rel属性，规定当前文档与被链接文档之间的关系。如："stylesheet"表示文档的外部样式表。
href属性，设置引用CSS文件的路径。
tyle属性，规定链接文档文件类型。
media属性，规定应用的设备。如："screen"是默认值，说明应用在计算机屏幕上。
1.3.2导入方式——CSS@规则（@import）
定义：
        @import是CSS@规则，用于加载外部层叠样式表。
语法：

注意：

PublicStyles.css文件代码
div {
    background:black;
}
style.css文件代码
#box {
    color:red;
}

例1-3：

PublicStyles.css文件代码
div {
    background:black;
}
style.css文件代码
@import url(../CSS/ PublicStyles.css);
#box {
    color:red;
}

注意：此方法有一个缺点，会对网站服务器产生过多的HTTP请求。以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。
1.6三种方式的CSS样式执行优先级
          内联式>内嵌式>外部引用式。