欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS的3种使用方法

程序员文章站 2022-04-16 07:49:37
(1) 链接式:(外部引入.css文件) ( 用得比较多 ) 在html加载前就被引用 在网页的标签对中用引入外部样式表,使用html规则引入外部css :

(1)  链接式:(外部引入.css文件)     ( 用得比较多 ) <link>在html加载前就被引用

  在网页的<head></head>标签对中用<link>引入外部样式表,使用html规则引入外部css :

    <link href="./css/style.css" rel="stylesheet" type="text/css"/>


 

    导入式:(外部引入.css文件)     ( 不使用 ) @import在html加载完成后才引用,并且无法在js dom模型中插入样式

    引入外部css文件,<style>标记也是写在<head>标记中,使用的语法如下:

      <style type="text/css">

        @import "./css/style.css"

          /*@import url(./css/style.css)*/

      </style>


(2)  嵌入式  直接写在<html>标签下,常在<head></head>中,

      优点:速度快,所有的css控制都是针对本页面标签的,直接在html文档中读取样式;

       缺点: 单个页 面显得臃肿,不能被其他html引用造成代码量相对较多,维护麻烦

    <style type="text/css">
      div{border:1px #ff0 solid}
    </style>


(3)  内联式   ( 不推荐 ) 其可以用在不经常改动的位置

  <div style="border:1px #ff0 solid;">内容</div>