下面我们来讲讲如何为一个网页添加CSS样式。

内部样式表

内部样式表需要在网页的

部分定义,格式如下:

行内样式表(内嵌样式表)

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

例如:

段落内容

外部样式表

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

部分插入以下内容:           /*文件位置就是所处在的文件夹相对与当前网页的相对路径*/

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

link标签为网页链入了一个CSS样式表文件“waibu.css”,HTML文档和CSS文件的源代码分别如下。html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

我真惨!被用来演示CSS!

我是页面最上端的标题1

我是页面左侧的标题1,用来导航

我是页面新闻的标题1

我是新闻的内容。

提示:此例中,HTML文档和外部CSS文件要保存在同一个文件夹。h1.dabiaoti {            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;}。

几种样式表的优先级

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

外部样式表的内容:p { text-align: center;}

内部样式表的内容:p { text-align: left; }

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

内部样式表

外部样式表

补充规则:优先级相同的情况下,后定义的属性会覆盖先前定义的。

其他高级规则:CSS中的important!可用于浏览器兼容的问题,等以后再学习。

把css样式表与html网页关联的方法,Dreamweaver 教程-CSS样式表的3种关联方法相关推荐

  1. HTML5+CSS大作业——汽车专题网页设计(1页) dreamweaver作业静态HTML网页设计模板

    HTML5+CSS大作业--汽车专题网页设计(1页) dreamweaver作业静态HTML网页设计模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. ...

  2. 网页设计作业,网页制作作业HTML5+CSS大作业——汽车专题网页设计(1页) dreamweaver作业静态HTML网页设计模板

    HTML5+CSS大作业--汽车专题网页设计(1页) dreamweaver作业静态HTML网页设计模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. ...

  3. 用dw中html设置背景,Dreamweaver 教程-CSS背景属性(background)

    但凡正规的网站在设计时都会注重网页背景的使用,一个好的网页背景与整体设计是息息相关的.下面我们就来讲讲一些常用的CSS背景属性. 1.背景颜色属性(background-color)body { ba ...

  4. html5页面打不开原因,有网但是网页打不开是什么原因(原因及2种解决方法)

    本来刚交了宽带网络信用卡年费,并且本地连接表明一切正常情况,却偏要打开网站一直发生难题,换了电脑浏览器和重新启动都失效,应该怎么办呢?不必担心!下边小编给大伙儿梳理了一些相关网络链接一切正常可是不能上 ...

  5. python网页请求超时_python爬虫多次请求超时的几种重试方法(6种)

    第一种方法 headers = Dict() url = 'https://www.baidu.com' try: proxies = None response = requests.get(url ...

  6. HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript)...

    HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript) 这次网页主要是介绍在近年来非常受关注的日本超人气漫画 海贼王 作者是尾田荣一郎 主页分为 漫画简 ...

  7. HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript)

    HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript) 这次网页主要是介绍在近年来非常受关注的日本超人气漫画 海贼王 作者是尾田荣一郎 主页分为 漫画简 ...

  8. python九九乘法表教程_python教程九九乘法表

    刚学数学乘法,首先就是要背诵九九乘法表,想必现在没人不会背诵了吧,而现在还有很多家长在催促着自己的孩子学习九九乘法表,但要是将其做成一个表格,是不是就很容易了呢?今天小码王少儿编程培训机构就为大家分享 ...

  9. 怎样用html设置文档格式,Dreamweaver使用CSS样式表设置网页文本格式

    Dreamweaver使用CSS样式表设置网页文本格式 互联网   发布时间:2008-10-17 19:35:50   作者:佚名   我要评论 本文章介绍如何在 Dreamweaver 中使用层叠 ...

最新文章

  1. 碰到问题集锦(简述)1
  2. 浏览器API location
  3. Ignite中的机器学习介绍
  4. 修改PPC下的移动运营商名称为中文
  5. IDEA中将WEB-INF\lib下的Jar包添加到项目中
  6. mysql可视化操作系统_MySQL的可视化操作工具workbench的安装
  7. 时域有限差分法matlab程序,时域有限差分法的Matlab仿真
  8. Android基础教程(奋斗之小鸟)_PDF 电子书
  9. Python 正则表达式提取文件后缀名
  10. 使用maven引用第三方jar包
  11. My Sixth-Third Page - 爬楼梯 - By Nicolas
  12. js:nodejs中的session(登陆验证)
  13. 写了一个编排预言LOL S12晋级流程图
  14. MySQL优化--整理
  15. 2012年10月高等教育国际金融全国统一命题考试
  16. Android - 分转元、元转分 金额工具类
  17. MySQL讲义第 35 讲——select 查询之正则表达式
  18. java并发编程实战wwj----------第二阶段-------------Two Phase Termination------------------34-35
  19. 免费资源下载:两套超棒的UI界面设计素材集
  20. 超级网搜 - SuperSearch - 2.1.2.4 版放出

热门文章

  1. manjaro安装搜狗拼音
  2. 信息安全——大整数包的设计!
  3. 我的项目经理培训论文
  4. 【慧河网络安全组】Web基础题解培训
  5. ODCC开放数据中心峰会即将召开 十道“技术大餐”提前揭秘
  6. web使用字体包_如何使用跨浏览器Web字体,第2部分
  7. mysql建学生-课程数据库_有一个“学生-课程”数据库,数据库中包括三个表:...
  8. 使用 EasyCV Mask2Former 轻松实现图像分割
  9. 移动APP广告监测 - 千万级系统架构
  10. 充电速度公式_充电电池充电时间计算方法