样式表引入

样式表引入

    • 内部样式
    • 外部样式
    • 行内样式

内部样式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部样式表title>
    <style>
        h2 {
            color: red;
        }
    style>
head>
<body>
    <h2>Hello world!h2>
body>
html>

外部样式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式表title>
    
    <style>
        @import url(./css/style.css);
    style>
head>
<body>
    <h2>Hello world!h2>
body>
html>
  • linkimport之间的区别:
    • ⭐本质不同,link属于XHTML标签,而@import则是CSS提供的一种方式
    • ⭐加载顺序不同,link引用的CSS会跟HTML页面一起加载,而import引入的CSS会等HTML页面加载完后再加载,所以可能会导致网速慢的时候刚开始访问页面没有样式
    • ⭐兼容性不同,link所有的浏览器都支持,而@import只有IE5以上的浏览器才支持
  • link属性:
    • rel="stylesheet":告诉浏览器我引入的是样式表
    • type="text/css":告诉浏览器样式表的类型是CSS
    • href:引入CSS样式的路径

行内样式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内样式表title>
head>
<body>
    <h2 style="color:red">Hello world!h2>
body>
html>

你可能感兴趣的:(CSS,css)