使用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>

注：

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

相关推荐：

 

引入css的几种方式的更多相关文章

  1. 引入CSS的三种方式

    虽然入职已经大半年,并自诩前端工程师,但是我真的不会……(有一种我有罪我该死的感觉 从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 1.内联式 内联式css样式表就 ...

  2. 引入css的两种方式

    摘自:https://www.cnblogs.com/gyjWEB/p/4831646.html 在HTML中引入css的其中的两个方法: 1.如果使用链接式,需要使用如下的语句引入外部css文件: ...

  3. vue引入css的两种方式

    方案1.在main.js中引入方式    import '@/assets/css/reset.css' 方案2.在.vue文件的<style/>标签里面引入    @import &qu ...

  4. 引入css的四种方式

    1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 <li ...

  5. 在单文件组件中，引入安装模块里的css的2种方式：script中引入、style中引入

    在单文件组件中,引入安装模块里的css的2种方式:script中引入.style中引入 1.script中引入 <script> import 'bulma/css/bulma.css' ...

  6. 引入springboot的两种方式以及springboot容器的引入

    一.在项目中引入springboot有两种方式: 1.引入spring-boot-starter-parent 要覆盖parent自带的jar的版本号有两种方式: (1)在pom中重新引入这个jar, ...

  7. 引入外部CSS的两种方式及区别

    1.CSS的两种引入方式 通过@import指令引入 @import指令是CSS语言的一部分,使用时把这个指令添加到HTML的一个<style>标签中: 要与外部的CSS文件关联起来,得使 ...

  8. 2CSS层叠规则(即引入CSS的三种不同方式的优先级)

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  9. CSS学习（一）---使用CSS的四种方式

      1. 行内样式 例: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

随机推荐

  1. 关于linux系统端口查看和占用的解决方案

    原文:http://www.2cto.com/os/201411/355959.html 一直以来,在处理linux服务器的过程中,经常会遇到一个问题,有时候kill掉进程之后,端口被占用,新的进程一 ...

  2. 【java】将字符串的首字母大写

    工具方法: public static void main(String[] args) { System.out.println(upperCaseFirst("barer")) ...

  3. 使用msm配置分布式tomat，实现session共享

    一,环境说明 操作系统是Windows7家庭版(有点不专业哦,呵呵!),JDK是1.6的版本, Tomcat是apache-tomcat-6.0.35-windows-x86,下载链接:http:// ...

  4. [翻译] EnterTheMatrix

    Enter The Matrix https://github.com/mpospese/EnterTheMatrix The sample application to accompany my c ...

  5. 怎样让你的APK跑在 com.android.phone 进程

    首先:为什么要跑在 com.android.phone 进程 这还用问,在同一个进程里就能够干非常多事情了这是黑客行为 为什么能跑在统一进程? Google 在设计 Dalivk 虚拟机的时候就考虑到 ...

  6. Android图片加载框架最全解析（八），带你全面了解Glide 4的用法

    本篇将是我们这个Glide系列的最后一篇文章. 其实在写这个系列第一篇文章的时候,Glide就推出4.0.0的RC版了.那个时候因为我一直研究的都是Glide 3.7.0版本,再加上RC版本还不太稳定 ...

  7. C# 指南

    C# 指南提供了许多有关 C# 语言的资源. 此网站面向许多不同的受众群体. 你可能希望探索本指南的不同部分,具体视你的编程经验或 C# 语言和 .NET 使用经验而定. 对于从未接触过编程的开发者: ...

  8. iOS:多个单元格的删除(方法一)

    采用存取indexPath的方式,来对多个选中的单元格进行删除 删除前: 删除后: 分析:如何实现删除多个单元格呢?这需要用到UITableView的代理方法,即选中单元格时对单元格做的处理,同时我们 ...

  9. DELPHI中千万别直接使用CreateThread ,建议使用BeginThread（在C++中无大问题，可是到了DELPHI中情况就不一样了）

    以前在写个别程序的时候老是喜欢使用纯API编程. 在C++中无大问题,可是到了DELPHI中情况就不一样了. 当你用 DELPHI写的多线程程序莫名其妙的内存错误,特别是字符串(string)操作;  ...

  10. 以ScaleIO 1.30为后端存储运行微软服务器软件SQL Server 2014, SharePoint 2013, Exchange 2013的解决方案

    EMC新发布了以ScaleIO 1.30为后端存储来运行SQL, SharePoint, Exchange的解决方案白皮书.   下面的页面中有简要的介绍和整篇文档PDF的下载. https://co ...