CSS导入使用及引用的两种方法：

  1. 外部引用
    1. 外部引用的方式，我们直接可以通过link标签来引用我们写好的一个CSS文件；
    2. 在link 标签中，我们通过rel = "stylesheet"来告诉浏览器，这是一个样式文件，同时rel还有另一个取值 alternative，这样用户自己可以选择样式，当然这个前提是当前页面引入的css样式表文件不止一个。
    3. 现在一般建议使用css文件外联引用，即把css样式单独作为一个.css文件。
  2. 直接使用
    1. 可以style标签直接在html 文件中直接写，然后页面通过调用；
    2. 在html文件中直接写样式表时，可以通过@import文件导入外部样式；
  3. 下面是样式引用的例子；

     

    CssUse.html文件代码：

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

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

        <title>CSS Use</title>

        <style type="text/css">

            @import url("http://localhost/cssUse/waysToImportCss.css");

            h2 { color: green; }

        </style>

    </head>

    <body>

        <h1>通过link连接的样式</h1>

        <p>通过link连接的样式</p>

        <h2>直接写的样式</h2>

        <a href="#">import导入的样式</a>

    </body>

    </html>

Direct.css文件代码：

    h1 { color: blue; }

p { color: yellow; }

waysToImportCss.css文件代码：

    a { padding: 0 5px;}

a:hover { color: lightblue; }

a:visited { color: yellow; }

从头开始学Web开发—CSS_01的更多相关文章

  1. 半吊子菜鸟学Web开发1 --配置开发环境

    先说说我自己的情况,我算是一个半吊子菜鸟,对web开发熟练度为0,但是对熟悉C++和Python 所以这里开始记录我学习Web开发的历程,看看我这里学习的程序,能够学到什么地方. 首先是配置环境,我的 ...

  2. 半吊子菜鸟学Web开发6 -- Vscode开发环境配置

    1vscode上手一周不到,终于弄出点门路,终于弄清楚了点vscode的设置是什么样子的了....哭 2就我这两天的使用来看,一般vscode默认只让打开一个文件夹,然后在你打开的文件夹里面自动生成 ...

  3. 菜鸟学WEB开发 ASP.NET 5.0 1.0

    在学习之初我要强调一点“微软要向跨平台开发”大举进军了,不管他能走多远,这是微软的必经之路. 一.学习流程: 创建ASP.NET APPLICATION 项目——项目结构——结构分析. 1.创建ASP ...

  4. 从头开始学eShopOnContainers——开发环境要求

    一.简介 eShopOnContainers是一个简化版的基于.NET Core和Docker等技术开发的面向微服务架构的参考应用,是一个简化版的在线商城/电子商务应用,其包含基于浏览器的Web应用. ...

  5. 半吊子菜鸟学Web开发5 -- PHP开发环境配置

    本文参考自:http://blog.csdn.net/angon823/article/details/54415855 Ubuntu16.04 默认 apt-get install apache2  ...

  6. 半吊子菜鸟学Web开发2 --JavaScript学习1

    JavaScript是一种类C的语言,对于我来说学起来还是蛮轻松的 1 输出 console.log(**); 相当于print console.assert(*);弹窗 2 变量 JS是动态变量 类 ...

  7. 半吊子菜鸟学Web开发 -- PHP学习5-数据库

    数据库 1 进行数据库操作的步骤 连接数据库 mysqli_connect 选择数据库 mysqli_select_db 设置文件编码 mysqli_query("set name utf- ...

  8. 半吊子菜鸟学Web开发 -- PHP学习 1-基础语法

    1索引数组 $fruit = array("苹果","香蕉","菠萝"): print_r($fruit); 索引数组的初始化,有三种方式: ...

  9. 半吊子菜鸟学Web开发 -- PHP学习 4 --异常

    PHP异常处理 1 抛出一个异常 与Python的try except类似,PHP用try catch来捕获异常 基本语法 try{ //可能出现错误或异常的代码 //catch表示捕获,Except ...

随机推荐

  1. selenium 页面超时后捕获异常也无法继续get(url)使用的问题解决方案

    参考这篇博客 http://www.xiaomilu.top/archives/106

  2. NLP数据集大放送，再也不愁数据了！【上百个哦】

    奉上100多个按字母顺序排列的开源自然语言处理文本数据集列表(原始未结构化的文本数据),快去按图索骥下载数据自己研究吧! 数据集 Apache软件基金会公开邮件档案:截止到2011年7月11日全部公开 ...

  3. ManualResetEvent使用

    1.定义 MSDN定义: 通知一个或多个正在等待的线程已发生事件.此类不能被继承. 详细说明: ManualResetEvent 允许线程通过发信号互相通信.通常,此通信涉及一个线程在其他线程进行之前 ...

  4. Adding Form Fields to a MS Word Document

    Configuring a Word Merge in SmartSimple is a three-step process: Create the MS Word document that wi ...

  5. 分享知识-快乐自己：SpringBoot结合使用拦截器（判断是否用户是否已登陆）

    所有的开发之中拦截器一定是一个必须要使用的功能,利用拦截器可以更加有效的实现数据的验证处理,而且最为幸运的是在SpringBoot之中所使用的拦截器与Spring中的拦截器完全一样. 基础拦截器操作: ...

  6. [原创]Java集成PageOffice在线打开编辑word文件 - Spring Boot

    开发环境:JDK1.8.Eclipse.Sping Boot + Thymeleaf框架. 一． 构建Sping Boot + Thymeleaf框架的项目(不再详述): 1. 新建一个maven p ...

  7. python基础-大杂烩

    random()随机函数 import random print(random.choice('abcdefghij')) #随机取这些字母 print(random.choice(['apple', ...

  8. BZOJ_2802_[Poi2012]Warehouse Store_堆+贪心

    BZOJ_2802_[Poi2012]Warehouse Store_堆+贪心 Description 有一家专卖一种商品的店,考虑连续的n天. 第i天上午会进货Ai件商品,中午的时候会有顾客需要购买 ...

  9. js跨域请求方式 ---- JSONP原理解析

    这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下     跨域请求数据解决方案主要有如下解决方法:   1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...

  10. java定时器，留着用

    说明:该定时器作用是 设定定时器首次执行的时间firstTime和执行间隔period,如firstTime=2015-3-25 9:00:00,period=24小时,若程序启动时,已经超过firs ...