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. HDUJ 2052 Picture 模拟

    Picture Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Su ...

  2. 一起来学linux：sudo

    通常在转换用户的时候会用到su 用户的方式.但是su方式需要知道切换的用户密码.而且su root到roo账户后,root账户有全部的权限.为了防止root账户干错事,因此有了sudo的命令.sudo ...

  3. 【zabbix】微信告警消息模版

    下面给出了一个zabbix微信告警消息的模版, 消息最后加上#号和短横线的设计有两个原因: 1,zabbix的微信告警消息总是被截断,比如最后一个告警时间,如果没有最后一行#号,在微信上看的时候时间不 ...

  4. 《高性能Javascript》 Summary（三）

    第八章.编程实践 Programming Practices 经验: 避免使用 eval_r()和Function构造器避免二次评估.此外,给setTimeout()和setInterval()函数传 ...

  5. Database: coursera assignment 1

    q.1: Find the titles of all movies directed by Steven Spielberg. select title from moviewhere direct ...

  6. Java多线程系列 基础篇03 线程的优先级和守护线程

    1. 线程优先级 现代操作系统中基本上使用时间分片的方式调度线程,通过设置线程优先级,使优先级高的线程获得时间片的次数多于优先级低的线程. 在java 线程中,通过一个整形变量prority来控制优先 ...

  7. springboot 默认tomcat配置

    1. Spring Boot 能支持的最大并发量主要看其对Tomcat的设置,可以在配置文件中对其进行更改.当在配置文件中敲出max后提示值就是它的默认值. 我们可以看到默认设置中,Tomcat的最大 ...

  8. ansible mysql模块的使用今年

    摘自: https://www.ibm.com/developerworks/cn/linux/1502_lih_ansible/

  9. 如何在VMware Workstation上安装CentOS_7

    1.首先打开VMware Workstation-文件-新建虚拟机 2.选择自定义向导,下一步. 3.由于我的软件版本比较高,不想太多硬件限制就选了版本11.也可以选择低一些版本的,这样兼容性会更好, ...

  10. LNMP安装(一)

    前传: 环境介绍: Centos7.2-minimal 下载地址:http://mirrors.163.com/centos/7.2.1511/isos/x86_64/ (网易镜像站) 所需安装包:链 ...