引入css的几种方式

最新推荐文章于 2021-03-12 11:56:21 发布

转载最新推荐文章于 2021-03-12 11:56:21 发布 · 114 阅读

使用CSS样式的几种方式

CreateTime--2017年10月11日16:45:26

Author:Marydon

　　a.外部样式

　　　　a1.链接式（推荐使用）

<link href="path+*.css" type="text/css" rel="stylesheet"/>

　　　　说明：

　　　　　　link标签的rel属性用于规定当前文档与被链接文档之间的关系；

　　　　　　只有rel属性的"stylesheet"值得到了所有浏览器的支持，指示被链接的文档是一个样式表。

　　　　a2.导入式　　　　　

<style type="text/css">
    @import url(path+*.css);
</style>

　　　　区别：链接式-先加载CSS样式，后加载页面（先布局，后加载内容），导入式-先加载页面，后加载CSS样式（先加载内容，后布局）

　　b.内部样式

　　　　在<head></head>标签体内，声明：　　　　

<style type="text/css">
    /*设置CSS样式*/
    div{
        background-color:#fff;
    }
</style>

　　c.行内样式

　　　　直接在标签上声明style属性　　

<span style="color:yellow;">CSS设置字体颜色</span>

小结：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta name="keywords" content="关键词,关键词">
        <meta name="description" content="本网页内容描述">
        <title>请输入网页标题</title>
        <!-- css外联样式 -->
        <link href="css样式文件URL" type="text/css" rel="stylesheet"/>
        <!-- css内联样式 -->
        <style type="text/css">
            *{padding:0;margin:0;}
        </style>
    </head>
    <body>
        <div style="width:500px;height:500px;border:1px solid red;">css行内样式</div>
    </body>
</html>

综合运用：

　　在jsp页面上，使用EL表达式获取后台数据，根据不同的值引用不同的css文件

<c:choose>
    <c:when test="${!empty cookie.theme}">
        <c:set var="theme" value="${cookie.theme.value}" />
        <link id="ThemeStyle" type="text/css" rel="stylesheet" href="<c:url value="/commons/theme/${cookie.theme.value}/style.css"/>" />
    </c:when>    
    <c:otherwise>
        <c:set var="theme" value="default" />
        <link id="ThemeStyle" type="text/css" rel="stylesheet" href="<c:url value="/commons/theme/default/style.css"/>" />
    </c:otherwise>
</c:choose>