CSS的三种样式

1.外部样式》》》》两种导入方法

　　　　(1).链接外部样式表》》》rel=“stylesheet”表示在页面中使用这个外部样式表

　　　　　　　　　　　　　　　　 type=“text/css”是指文件的类型是样式表文本

　　<link href=“文件所在位置” rel=“stylesheet” type=“text/css”>　

　　　　(2).导入外部样式表

　　　　　　<style>@import url("文件所在位置")；

　　　　（3）.区别：链接式即使网速再慢也会将CSS文件加载到网页中，在进行编译显示，显示的页面与用户预期的一样

　　　　　　　　　　导入式先呈现html结构，再把CSS文件加载到网页中，当网速较慢时，会呈现没有CSS布局的HTML网页，体验效果不好

2.内部样式：直接放在<head>的<style>标签中　

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>望庐山瀑布</title>
    <style>
        h1{
            font-size: 20px;
            color: black;
        }
        p{
            font-size: 14px;
            color: darkgreen;
        }
    </style>
</head>
3.行内样式
　　在HTML标签中直接使用style属性设置CSS样式，用；隔开

<body>
    <h1 style="color: black; font-size: 20px;">望庐山瀑布</h1>
    <p style="font-size: 14px;color: darkgreen;">日照香炉生紫烟，</p>
    <p style="font-size: 14px;color: darkgreen;">遥看瀑布挂前川。</p>
    <p style="font-size: 14px;color: darkgreen;">飞流直下三千尺，</p>
    <p style="font-size: 14px;color: darkgreen;">疑是银河落九天。</p>
</body>

4.优先级：后写的样式优先于先写的样式

posted on 2018-01-21 09:21 洋葱没有心丨阅读(139) 评论(0) 编辑收藏举报