精华内容
下载资源
问答
  • 创建外部样式表

    千次阅读 2017-11-30 21:04:30
    创建样式表 样式表的作用是控制网页样式,只有创建样式表,并把它应用到网页中,才能发挥样式...样式表文件是纯文本文件,可以使用任何文本编辑器来编辑,这里使用Windows自带的记事本,来创建外部样式表。步骤如下:

    样式表的作用是控制网页样式,只有创建样式表,并把它应用到网页中,才能发挥样式表的作用。

    创建外部样式表

    外部样式表,是在网页外部的样式表文件中定义的样式。由于这些样式并不是HTML文档的一部分,而是在HTML文档的外部独立存在,故称外部样式表。

    样式表文件是纯文本文件,可以使用任何文本编辑器来编辑,这里使用Windows自带的记事本,来创建外部样式表。步骤如下:

    1)在Windows系统中,点击开始 → 所有程序 → 附件 → 记事本,打开记事本。并在记事本中编写CSS代码,可以根据需要在CSS代码添加注释。如图 1‑7 所示:

    使用记事本创建样式表图1-7 使用记事本创建样式表

    2)点击菜单栏中的 文件 → 保存 命令,或直接在键盘上按Ctrl + s,来保存文件。

    保存文件时,保存类型选择“所有文件”;编码,选UTF-8;文件名可以随意填写,但文件的后缀名必须是 .css,表明这一个层叠样式表。再选择保存位置,建议为网站创建 css 目录,来专门存放样式表文件。如图 1‑8 所示:

    保存样式表文件图1-8 保存样式表文件

    说明:

    可以使用你喜欢的任何名称为样式表文件命名,如果网站只有一个样式表文件,通常会命名为 style.css 或 styles.css。

    更大的网站通常会拥有多个样式表文件,reset.css、base.css、global.css 和main.css 是常见的样式表名称,它们通常包含应用于网站大多数页面的样式规则。

    网站制作者通常会为某些区块创建特有的 CSS 文件,来作为对基本样式的补充。如,对于一个商业网站,products.css可能是为产品相关页面准备的样式表。

    创建了样式表之后,需要将它加载到HTML页面中,从而为内容应用这些样式规则。可以使用链接或导入的方式,来为HTML页面加载外部样式表。

    链接外部样式表

    在HTML文档头部,使用 link 元素来链接外部的CSS文件。link 元素为空元素,它只有开始标签,没有结束标签,要在开始标签的结尾处加上 / 来结束该元素。

    在 link 元素中,通过rel 属性来定义本HTML文档与被链接文档之间的关系,rel = "stylesheet" 表明引入的文件是样式表;通过 href 属性定义样式表文件的URL,可以使用相对路径,也可以使用相对路径,相对路径是相对于本HTML文档而言的。如:

    1. <!DOCTYPE HTML>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>链接样式
    6. <link rel="stylesheet" href="style.css" />
    7. </head>
    8. <body>
    9. </body>
    10. </html>

    上述代码表示,为本文档引入文件名称为 style.css 的外部样式表,该样式表文件与本HTML文档位于相同目录下。

    一个页面可以包含多个 link 元素,浏览器会加载多个样式表,合并它们的规则,将其全部应用于页面。但是,加载样式表会影响页面的加载速度。

    导入外部样式表

    也可以在HTML文档头部的 style 元素中,使用 @import 指令导入一个外部样式表文件。如:

    1. <!DOCTYPE HTML>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>导入样式
    6. <style>
    7. @import url(style.css);
    8. </style>
    9. </head>
    10. <body>
    11. </body>
    12. </html>

    这种方式是通过 @import 指令,把外部样式导入到当前页面。一个文档中,也可以包含多个,来导入多个样式表。

    由于 @import 指令效率低下,不但会增加额外的请求次数,还会导致不可预料的问题,故不推荐使用。因此,对于大多数情况,还是推荐使用链接外部样式表的方式。

    外部样式表非常适合给网站上的大多数页面或者所有页面设置一致的外观。可以在一个外部样式表中定义全部样式,并让网站上的每个页面都加载这个外部样式表,来确保每个页面都有相同的设置。

    对于有很多页面的网站,外部样式表能够做到CSS代码最大限度的重用。日后,如果要改变页面的外观,只需编辑CSS文件,而无需修改HTML文件,真正实现表现和内容的分离。

    使用外部样式表的另一个好处是,一旦浏览器在某个页面加载了它,在随后浏览引用它的页面时,通常无需再向Web 服务器请求该文件。浏览器会将它保存到缓存中,也就是保存到用户的计算机里,并使用这个版本的文件。这样做可以提供页面的加载速度。

    如果随后对样式表作了修改,再将它传到Web 服务器,浏览器就会下载更新后的文件,而不是使用缓存的文件。

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • 一、内部样式表内嵌式是将CSS代码集中写在HTML文档的head头部中,并且用style标签定义,基本语法如下:语法中,style标签一般位于head标签中title标签之后,也可以放在HTML文档的任何地方。type="text/CSS"...

    一、内部样式表

    内嵌式是将CSS代码集中写在HTML文档的head头部中,并且用style标签定义,基本语法如下:


    语法中,style标签一般位于head标签中title标签之后,也可以放在HTML文档的任何地方。

    type="text/CSS"  在HTML5中可以省略。

    二、行内样式表

    行内样式表适合于样式较少的情况。

    语法:


    如下例:

    <div style="color:red;font-size: 20px;">Today is a good day.</div>

    三、外部样式表(外联式)

    它由两部分构成,一个是.css文件,一个是html文件中的link标签,起到连接.html与.css文件的作用。

    语法:

    建立一个.css文件,里面写.html标签的样式。建立如下:


    另一个是:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link rel="stylesheet" href="xxx.css" type="text/css" />
    </head>
    <body>
    </body>
    </html>

    他的位置是:head里,title后。href填写需要连接的.css文件的路径。

    它使用场合较多。

    四、三种方式的对比


    展开全文
  • 内部样式表是将CSS代码写在HTML文档的head标签中,并且用style标签定义 <head> <style type="text/css"> 选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;} </style> <head> (1...

    1.内部样式表

    内部样式表是将CSS代码写在HTML文档的head标签中,并且用style标签定义

    <head>
      <style type="text/css">
          选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
      </style>
    <head>

     (1)style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的任何地方.
     (2)type="text/CSS"在HTML中可以省略.

    2.行内式(内联样式)

    通过标签的style属性来设置元素的样式

    <标签名 style = "属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标签名>

    (1)语法中style是标签的属性,任何标签都拥有style属性,用来设置行内式.

    (2)属性和值书写规范与CSS样式规范相同,行内式只对其所在的标签及嵌套在其中的子标签起作用.  

    3.外部样式表(外链式)

    链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中

    <head>
      <link href="CSS文件的路径"  rel="stylesheet" />
    </head>

    注意:link是单标签

    link标签需要放在head头部标签中,并且必须指定link标签的三个属性

    (1)href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径
    (2)type:定义所链接文档的类型,在这里需要指定为"text/css",表示链接的外部文件为CSS样式表。
    (3)rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。

    样式表总结

    样式表 优点 缺点 使用情况 控制范围
    行内样式表 书写方便,权重高 没有实现样式和结构相分离 较少 控制一个标签(少)
    内部样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面(中)
    外部样式表 完全实现结构和样式相分离 需要引入 最多,强烈推荐 控制整个站点(多)

    CSS样式表规则

    使用HTML时,需要遵从一定的规范。CSS亦如此,要想熟练地使用CSS对网页进行修饰,首先需要了解CSS样式规则,具体格式如下:

    1.选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。
    2.属性和属性值以“键值对”的形式出现。
    3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
    4.属性和属性值之间用英文“:”连接。
    5.多个“键值对”之间用英文“;”进行区分。

    展开全文
  • 先解释一下网页添加css样式的方法,一共有四种,分别是: 一、内嵌样式——直接在页面的标签里加 solid;">测试信息 ...二、内部样式表——在head部分加入  ... type="text/css">div{margin: 0...三、链入外部样式表
    先解释一下网页添加css样式的方法,一共有四种,分别是:
    一、内嵌样式——直接在页面的标签里加<div style="border:1px red solid;">测试信息</div>
    二、内部样式表——在head部分加入 <style type="text/css">div{margin: 0;padding: 0;border:1px red solid;}</style>
    三、链入外部样式表——在head部分加入<link  rel="stylesheet" type="text/css" href="my.css" media="all" />,引入外部的CSS文件
    四、导入外部样式表——在head部分加入<style type="text/css">@import url(my.css);</style>

    样式表的优先级顺序从高到低依次为:内嵌样式 > 内部样式表 > 导入外部样式表(其实是属于内部样式表)
    链入外部样式表内部样式表之间的优先级取决于所处位置的先后,最后定义的优先级最高。

    本文主要是做@import导入样式表与link链入样式表的区别探讨,所以其他的不做详谈。
    1. 链入外部样式表
    链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head>区内,如下:
    <head>
    ……
    <link href="mystyle.css" rel="stylesheet" type="text/css" media="all">
    ……
    </head>
    上面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=”stylesheet”是指在页面中使用这个外部的样式表。type=”text/css”是指文件的类型是样式表文本。href=”mystyle.css”是文件所在的位置。media是选择媒体类型,这些媒体包括:屏幕,纸张,语音合成设备,盲文阅读设备等。

    2.导入外部样式表
    导入外部样式表是指在内部样式表的<style>里导入一个外部样式表,导入时用@import,看下面这个实例:
    <head>
    ……
    <style type=”text/css”>
    <!--
    @import “mystyle.css”
    其他样式表的声明
    -->
    </style>
    ……
    </head>
    例中@import “mystyle.css”表示导入mystyle.css样式表,注意使用时外部样式表的路径。方法和链入样式表的方法很相似,实质上它相当于存在内部样式表中的。
    注意:导入外部样式表必须在样式表的开始部分,在其他内部样式表上面。

    综合度娘的多篇文章和个人理解,两者的区别总结如下:
    1:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。
    link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性,等,@import就只能加载CSS了。

    2:加载时间及顺序不同。使用link链接的css是客户端浏览你的网页时先将外部的CSS文件加载到网页当中,然后再进行编译显示,所以这种情况下显示出来的网页跟我们预期的效果一样,即使一个页面link多个css文件,网速再慢也是一样的效果;而使用@import导入的CSS就不同了,客户端在浏览网页时是先将html的结构呈现出来,再把外部的CSS文件加载到网页当中,当然最终的效果也是跟前者是一样的,只是当网速较慢时会出现先显示没有CSS统一布局时的html网页,这样就会给阅读者很不好的感觉。这也是现在大部分网站的CSS都采用链接方式的最主要原因。

    3:兼容性不同。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

    4:使用dom控制样式时出现问题。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

    5:导入样式可以避免过多页面指向一个css文件。当网站中使用同一个CSS文件的页面不是非常多时,这两种方式在效果方面几乎是没有不同的,但网站的页面数达到一定程度时(比如新浪等门户),如果采用链接的方式可能就会使得由于多个页面调用同一个CSS文件而造成速度下降,但是一般页面能达到这种程度的网站也会有资本用最好的硬盘,所以这方面的因素也不用怎么担心。

    综上所述,一般普通的站点在调用外部样式表的时候,还是尽量选择link链入外部样式表比较好。关于区别中第二点的加载顺序的差别中,找到一个国外的参考文章作为补充资料:http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ 
    展开全文
  • 1.css语法: 2.css常用属性: 3.内部样式表: 在head标签中书写style标签...4.外部样式表外部样式表的引入: <link rel="stylesheet" type="text/css" href="theme.css" /> *在head标签中书写link标签...
  • 导入外部样式表

    千次阅读 2019-04-08 23:44:22
    标签导入外部样式表文件: <link href="001.css" rel="stylesheet" type="text/css" />        其中href属性设置外部样式表文件的地址,可以用相对地址,也可以用绝对...
  • 引入CSS样式表(书写位置) CSS可以写到那个位置? 是不是一定写到html文件里面呢? 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: <head> <...
  • 在html中,引用CSS样式有3中方式:外部样式表,内部样式表,内联样式。 本文代码整理自w3school:http://www.w3school.com.cn
  • html内联样式(表),外部样式表

    千次阅读 2020-12-13 10:33:24
    介绍内联样式及外部样式表
  • HTML外部样式表如何引入CSS样式

    万次阅读 多人点赞 2018-11-29 13:16:40
    链入式是把所有的样式放在一个或多个外部样式表文件中,这个文件是以css为扩展名的,通过 link 标签,将外部样式表(css命名的外部样式文件)链接到html文档中,基本语法为: ` 具体方法 ①分别建立HTML和css文件...
  • 内部样式表(嵌入式) 内部样式表就是将CSS在写html页面内部。是将所有的CSS代码抽取出来,单独放到一个<style>标签中。例如: <style> div{ color: red; font-size: 20px; } </style> <...
  • CSS引用外部样式表的优点:一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件,所以外部引用相对于内部引用和内联引用来说是是节省资源的。 CSS使用内部样式表、内联样式表的优点:可以直观的看到CSS...
  • 对性别的颜色进行修改 对北京呈现灰色的代码,#ccc是灰色 运行效果如图: 对部分字颜色的修改: 以此类推: 运行效果如图: 外链式实例操作: 运行效果如图: ...
  • 3.2、外部样式表-效果演示 三、知识点说明 一:CSS 概述 二:CSS 基础语法 1、如何用?--多种方式,供灵活选择 2***、重复引入优先级问题(着重注意) 一、前言 上几篇我整理一些web-html上的一些基础知识...
  • 使用link标签导入外部样式表

    千次阅读 2015-08-29 13:58:39
    在编写网页文档时,为了便于维护,很多时候会将样式定义单独放置在样式表中,要在html中使用外部样式表,有几种方法,这里演示其中一种,使用link标签引入外部样式表。 首先构建网页骨架HTML:linkCSS.html ...
  • 内联样式 直接在标签添加样式 <h1 style="text-align:center;">...内部样式表 在head标签里面定义 <head> <style type="text/css"> h1 { text-align: center; } ...
  • html引入外部样式表

    2020-12-10 14:19:51
    <link href=“样式表位置” rel="stylesheet"type=“text/css”> //位置可以是相对位置也可以是绝对位置
  • 一、CSS基本概况 是什么 Cascading Style Sheets(层叠样式表)
  • 内部样式表: 内部样式表(内嵌样式表)是写到 html 页面内部。是将所有的CSS代码抽取出来,单独放到一个 <style>标签中。 <head> <style> div { color: red; font-size: 12px; } </...
  • link链接外部样式表

    2017-05-02 14:00:00
    一个完整的link标签: 1 <link href="[css adress]" rel="stylesheet" type="text/css" /> 其中,缺乏rel属性,将会导致CSS文件链接失败,无法加载!!! 转载于:...
  • important相关,选择器级别,CSS代码位置靠下。在比较的时候从高往低比较。如果在某一优先级层面上已经比较出不同,就不需要继续比较;否则进入下一级的比较。下面详细的描述这四个优先级 第一优先级为标签离修饰...
  • html引入css外部样式表

    千次阅读 2017-07-18 19:19:44
    &lt;link rel="stylesheet" href="css/main.css" type="text/css"/&gt; href为css位置链接
  • 引入css外部样式表的注意事项

    千次阅读 2015-03-16 14:40:47
    就这么简单,还有什么,so easy,我之前都是这么认为的你肯定比我聪明多了~_^,但是当做一个页面在微信上浏览并且修改再浏览的时候我发现不对劲,因为已经上传的样式表木有改变,IOS还好,可以强制刷新页面。...
  • 11.html代码如下: <!... ... ...mystyle.css代码如下: ...代码也是按照xhtml 1.0标准写的,求教。ie版本如下: [align=center][img=https://img-bbs.csdn.net/upload/201312/25/1387950748_663934.jpg][/img][/align]
  • 层叠样式表(Cascading Style Sheet)用于渲染HTML元素标签的样式。 2.CSS的优势 1.内容与表现分离 2.网页的表现统一,容易修改 3.丰富的样式,使页面布局更加灵活 4.减少网页的代码量,增加网页的浏览速度...
  • CSS外观属性(颜色、行间距、对齐、首行缩进、字间距、单词间距 、颜色半透明、阴影)快捷方式、综合案例、引入CSS样式表(内部样式表、行内式、外部样式表)、三种样式表总结
  • 当css放在html外部代码如上 当css房子啊内部时,只需要var div1=document.getElementById(div1");  div1.style.backgroundColor="黑色"; 即可实现
  • 1:在src中新建三个子组件分别...2:在里面分别写入代码 建议用rcc快捷方式 Header.js中代码如下 import React, { Component } from 'react' var HeaderStyle = { color:"red" } export default class Header...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 68,391
精华内容 27,356
关键字:

外部样式表的代码