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. PCA tries to preserve linear structure, MDS tries to preserve global geometry, and t-SNE tries to preserve topology (neighborhood structure)

    https://colah.github.io/posts/2014-10-Visualizing-MNIST/

  2. CF(439E - Devu and Birthday Celebration)莫比乌斯容斥

    题意:将n个糖果插入f-1个挡板分成f分(a1,a2,a3...af). 问有多少种分法能够使得gcd(a1,a2,a3...af)=1; 解法.莫比乌斯容斥,首先按1为单位分,这时候有C(n-1,f ...

  3. JS表自动取值赋值

    /* * * V1.0.0 表单自动取值.赋值插件 * 表单类型:text radio select-one checkbox textarea * 注意项: * 1.表单必须设置name属性 * 调 ...

  4. NISP：一级取证

    NISP:一级取证 BrupSuite工具的使用 设置浏览器代理 flag{C0ngratulati0n} flag{LMvBi8w9$m1TrgK4} flag{T4mmL9GhpaKWunPE} ...

  5. xutils3基本使用

    根目录下新建一个类继承application,调用xUtils3初始化方法 public class AtguiguApplication extends Application { @Overrid ...

  6. 原生Base64编码/解码（OC与Swift）

    Objective-C NSString *plainString = @"foo"; Encoding NSData *plainData = [plainString data ...

  7. Ubuntu/CentOS下使用脚本自动安装 Docker

    Ubuntu.Debian 系列安装 Docker 系统要求 Docker 支持以下版本的 Ubuntu 和 Debian 操作系统: Ubuntu Xenial 16.04 (LTS) Ubuntu ...

  8. 51Nod 1627 瞬间移动 —— 组合数学

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1627 1627 瞬间移动  基准时间限制:1 秒 空间限制:1 ...

  9. kettle脚本定时任务不执行

    问题描述:在centos机器上部署了kettle脚本,每天定时跑一次,但是并没有成功跑,手动执行命令是可以的.而且写了一个测试的shell脚本也是可以执行的. 解决方案: 将2的错误输出,/usr/l ...

  10. bzoj1177&p3625 [APIO2009]采油区域p[大力讨论]

    我好菜菜啊. 给定矩形,从中选出三个边长K的正方形互不重叠,使得覆盖到的数总和最大. 想的时候往dp上钻去了..结果一开始想了一个错的dp,像这样 /************************* ...