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. function declarations are hoisted and class declarations are not 变量提升

    Classes - JavaScript | MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes ...

  2. SecureCRT 会话设置项

    登陆动作------自动登陆仿真------两个颜色复选框都勾上模式------光标键模式(2个复选框)映射键------使用windows复制和粘贴热键外观------字符编码:UTF-8外观--- ...

  3. 【24题】P2766最长不下降子序列问题

    网络流二十四题 网络流是个好东西,希望我也会. 网络流?\(orz\ zsy!!!!!\) P2766 最长不下降子序列问题 考虑我们是如何\(dp\)这个\(LIS\)的. 我们是倒着推,设置\(d ...

  4. ABAP 程序运行时间记录表

    自建表记录程序运行时间,测试程序效率,可作为系统优化工具.

  5. JavaScript原理学习

    悟透JavaScript(理解JS面向对象的好文章) http://www.cnblogs.com/leadzen/archive/2008/02/25/1073404.html Javascript ...

  6. php 获取优酷视频的真实地址(2014.6月新算法)

    上个礼拜发现优酷改版了,各种过滤优酷广告的插件都失效了,于是我百度了一下(谷歌也不能用了)发现优酷改算法了,在ckplayer论坛发现有人在6月25号发了个php 的优酷代理文件,下载下来发现,能用但 ...

  7. Java for LeetCode 126 Word Ladder II 【HARD】

    Given two words (start and end), and a dictionary, find all shortest transformation sequence(s) from ...

  8. 《程序员代码面试指南》第八章 数组和矩阵问题 找到无序数组中最小的k 个数

    题目 找到无序数组中最小的k 个数 java代码 package com.lizhouwei.chapter8; /** * @Description: 找到无序数组中最小的k 个数 * @Autho ...

  9. C# 序列化反序列化 list<>

    public class XMLTest { [Test] public static void Test() { Name1 name = new Name1(); name.Id = " ...

  10. k8s-创建node节点kubeconfig配置文件

    Kubeconfig 需要配置如下 TLS Bootstrapping Token kubelet kubeconfig kube-proxy kubeconfig 下载kubectl kubectl ...