CSS---如何引用样式表

Cascading Style Sheet 层叠样式表

html的属性值是不带单位的；

css的属性值是有单位的，以像素（px）为单位，通常情况下必须带单位；

1.如何在html结构中引入css样式

①行内样式（临时做测试用）

每一个html标签都有style属性，例

<div style="width:300px; height:300px; bgcolor:red"></div>   //这是一个高300像素，宽300像素，背景是红的div盒子；
<p style="solor:blue; font-size:14px; "></p>   //表示段落中的文字颜色为蓝色，字体大小为14像素

②内嵌样式表（常用）

在<head>标签中加入<style>标签，例：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: rgba(255,0,0,0.8);
        }
    </style>
    
<title>初始文档</title>
</head>
<body>
    <div></div>
</body>
</html>

③外部样式表（常用），例：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./***.css">
    <title>初始文档</title>
</head>
<body>
    <div></div>
</body>
</html>

 

④导入样式表

导入样式表起到管理css样式表的作用，适合大型、超大型的网站；

格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>初始文档</title>
    <style type="text/css">
        @import url(***.css);
        div{
            width: 100px;
            height: 100px;
            background: rgba(255,0,0,0.8);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

使用导入样式表时，@import是样式标签，所以必须放到css文件中的最顶端，或者放到内嵌样式表的最顶端；

常用的样式表有内嵌式和外部样式；

 

posted on 2017-12-27 16:52  喜气洋洋得意  阅读(198)  评论(0)  编辑  收藏  举报

导航