CSS入门教程——样式表加入网页方式

2016-02-20 01:16 10 1 收藏

今天图老师小编要向大家分享个CSS入门教程——样式表加入网页方式教程,过程简单易学,相信聪明的你一定能轻松get!

【 tulaoshi.com - Web开发 】

在上两节中我们已经为网页添加过简单的样式表了,我们也了解了样式表的语法基础。本节将介绍将样式表加入到页面中的几种不同方法。

内部样式表

    其实我们在前两节已经应用了内部样式表。内部样式表需要在网页的head部分定义,格式如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)head
style type="text/css"
/*符合CSS语法结构的CSS语句,例如*/ body { background-color: blue; }
/style
/head行内样式表(内嵌样式表)

    它的使用方法我们在前两节也已经使用过了。行内样式表直接在标签内部定义,使用style属性,写法如下:

标签 style="符合CSS语法结构的CSS语句 "
例如:p style="text-indent:24px;"段落内容/p外部样式表

    使用外部样式表时,CSS文件与网页文件(html)是分离开来的。要让某一个网页调用一个外部CSS文件,你需要在网页的head部分插入以下内容:

head
link rel="stylesheet" type="text/css" href="文件位置/你的CSS文件名.css" /
/*文件位置就是所处在的文件夹相对与当前网页的相对路径*/
/head

下面我们以一个实例来看看如何使用外部样式表:

请看下面这个网页文件,红色部分的内容为网页链入了一个CSS样式表文件waibu.css,网页和CSS文件的源代码分别如下:

!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"
head
title我真惨!被用来演示CSS!/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
link rel="stylesheet" type="text/css" href="waibu.css"
/head
body
h1 class="dabiaoti"我是页面最上端的标题1/h1
h1 id="daohang"我是页面左侧的标题1,用来导航/h1
h1 class="xinwen"我是页面新闻的标题1/h1
p我是新闻的内容。/p
/body
/html h1dabiaoti {
font-weight: bolder;
text-align: center;
}
h1#daohang {
font-size: 12px;
font-weight: bolder;
text-align: left;
}
.xinwen {
font-size: 16px;
font-weight:bold;
text-align: center;
color:green;
}
p {
text-align: center;
} 层叠的意义

   当我们为同一个标签多次设置样式表的时候,这些样式表会最终层叠成一个样式表来作用于标签。例如,你在外部样式表中为p定义了如下样式:

p { text-align: left;}

而在内部样式表中又定义了如下样式:

p {text-indent: 24px;}

那么最终网页内p标签的样式将为:p { text-align: left;text-indent: 24px;}

几种样式表的优先级

    上面的两个样式表的层叠比较好理解,两个样式表分别定义了一个标签的不同属性。但是如果外部样式表与内部样式表同时定义了一个属性呢?看下面的例子。

外部样式表的内容:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

p { text-align: center;}

内部样式表的内容:

p { text-align: left; }

    最终页面中的段落将是左对齐,也就是说如果你试图对同一标签的同一属性多次定义,那么内部样式表的定义将要覆盖外部样式表的定义。这是因为内部样式表的优先级高于外部样式表。三种样式表的优先级由高到低排列如下:

行内样式表(内嵌样式表)内部样式表外部样式表补充规则:优先级相同的情况下,后定义的属性会覆盖先前定义的。其他高级规则:CSS中的important!是比较使用的技巧,这里就不多说了。将在后续的CSS技巧中讨论。

来源:https://www.tulaoshi.com/n/20160220/1633591.html

延伸阅读
标签: Web开发
说明为什么现有的几种CSS隐藏文字的方法的缺陷和新的方法如何弥补。实用性一般,但是这个方法挺新颖的。 1.display:none;的缺陷 搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略 屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字。 2. visibility: hidden ;的缺陷 这...
标签: Web开发
CSS用样式表美化你的网页 第1天:选择什么样的DOCTYPE 前言 大家好!这个系列文章是按阿捷自己制作这个站点的过程编写的。之前阿捷也一直没有制作过一个真正符合web标准的网站。现在边参考国外资料边制作,同时把过程中的心得和经验记录下来,希望对大家有点帮助。好了,让我们开始吧 第一天 开始制作符合标准的站点,第一件事情就是声明符...
标签: Web开发
最近因为帮一个网友很费神的修改了一个导航的CSS文件,还没有我自己重写code来的快,让我想起了写这篇文章。我发现很多web设计者对CSS写法的继承关系都有了一点了解,但是了解的还是不够深,不够透彻,所以今天打算把这个讲一下。 首先谈一下html文档,但凡接触过html语言的设计师,一定都会发现html的一个很明显的特点,那就是大多数代码...
标签: Web开发
第1天:选择什么样的DOCTYPE 前言 大家好!这个系列文章是按阿捷自己制作这个站点的过程编写的。之前阿捷也一直没有制作过一个真正符合web标准的网站。现在边参考国外资料边制作,同时把过程中的心得和经验记录下来,希望对大家有点帮助。好了,让我们开始吧 第一天 开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOC...
    CSS(Cascading Style sheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码,加快下载显示的速度,也减少了需要上传的代码数量,尤其是在设计者面对有数百个网页的站点时,大大减少了重复劳动的工作量。 W3C(The World Wide...

经验教程

431

收藏

16
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部