引入css的几种方式

 

  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>

注:

  关于CSS样式优先级的说明请移步至文章:CSS知识点集锦 

2022年4月26日10:47:33

指定css文件的字符集

在css文件头部加上字符集声明即可:

@charset "utf-8";

 

写在最后

  哪位大佬如若发现文章存在纰漏之处或需要补充更多内容,欢迎留言!!!

 相关推荐:

posted @ 2017-10-11 17:22  Marydon  阅读(396)  评论(0编辑  收藏  举报