html css n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
化学多媒体软件设计 HTML+CSS 基础(入门 ) PowerPoint Presentation
Download Presentation
化学多媒体软件设计 HTML+CSS 基础(入门 )

Loading in 2 Seconds...

play fullscreen
1 / 88

化学多媒体软件设计 HTML+CSS 基础(入门 ) - PowerPoint PPT Presentation


  • 170 Views
  • Uploaded on

化学多媒体软件设计 HTML+CSS 基础(入门 ). 厚朴前端设计组 郭娟 2013.10.16. 目录. 7 . CSS 组成. 1. HTML 概述. 2. HTML 文档. 8.CSS 继承性与层叠性. 3. HTML 组成. 9.CSS 优先级. 10.CSS Reset. 4. CSS 概述. 5. HTML 与 CSS 的关系. 11. 常用 HTML 标签. 12. 常用 CSS 属性. 6. 结构与表现分离. 1. HTML 概述. HTML , Hyper Text Mark-up Language (超文本标记语言);

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '化学多媒体软件设计 HTML+CSS 基础(入门 )' - leonard-meyer


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
html css

化学多媒体软件设计HTML+CSS基础(入门)

厚朴前端设计组 郭娟

2013.10.16

slide2

目录

7. CSS组成

1. HTML概述

2. HTML文档

8.CSS继承性与层叠性

3. HTML组成

9.CSS优先级

10.CSS Reset

4. CSS概述

5. HTML与CSS的关系

11.常用HTML标签

12.常用CSS属性

6. 结构与表现分离

slide4

HTML,Hyper Text Mark-up Language(超文本标记语言);

为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言;

HTML被用来结构化信息——例如标题、段落和列表等等,也可用来在一定程度上描述文档的外观和语义。

(以上内容只需大致了解以帮助后续学习,无需记忆哦)

slide5

HTML版本

    • 超文本标记语言(第一版)——1993年6月(并非标准);
    • HTML 2.0——1995年11月发布,2000年6月被宣布已经过时;
    • HTML 3.2——1997年1月14日,W3C推荐标准;
slide6

HTML版本

    • HTML 4.0——1997年12月18日,W3C推荐标准;
    • HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准;
    • HTML 5 的第一份正式草案已于2008年1月22日公布,目前仍处于完善中,随着移动互联网的快速发展,HTML5将会是未来的主流。

  目前所使用的大多是HTML4.01。

  (版本信息大致了解即可,各版本详情可咨询度娘或谷歌。)

slide8

文档类型

    • STRICT(严格类型)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

slide9

文档类型

    • TRANSITIONAL(过渡类型)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 一般推荐使用过渡型(transitional)标准。

以“厚朴工作室”网站为例,浏览网页时产看源代码,就可以看到其HTML文档类型声明,采用的是过渡类型声明。

slide10

文档类型

    • FRAMESET(框架类型)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 文档类型声明是一个网页的必需元素,如果没有文档类型声明,会导致浏览器无法按照正确的标准解析网页。

(记住我们使用的是过渡型标准。)

slide11

文档结构

  • DOCTYPE
  • Head
  • Body
slide12

如以下实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- 以上是前面介绍的文档类型声明 -->

<html xmlns="http://www.w3.org/1999/xhtml">

slide13

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<!-- 以上是head部分-->

<body></body>

<!-- 以上是body部分,是页面的主体部分-->

</html>

slide15

标签

    • HTML 文档和 HTML 元素是通过 HTML 标签进行标记的;
    • HTML 标签由开始标签和结束标签组成;
    • 开始标签是被括号包围的元素名;
    • 结束标签是被括号包围的斜杠和元素名;
slide16

标签

    • 既有开始标签,又有结束标签的,称为双标签,大多数标签为双标签;
    • 某些 HTML 元素没有结束标签,称为单标签,比如 <br />。
    • HTML标签对大小写不敏感,如<body>等同于<BODY>,但万维网联盟(W3C)在 HTML 4 中推荐使用小写。

以“厚朴工作室”网站为例。

slide17

元素

    • HTML 元素指的是从开始标签到结束标签的所有代码;

如“<p>这是P元素</p>”,其中<p>为开始标签,</p>为结束标签,元素内容为:这是P元素;

    • 某些 HTML 元素具有空内容;
slide18

元素

    • 空元素在开始标签中进行关闭(以开始标签的结束而结束),<br />为最常见的空元素;
    • 大多数 HTML 元素可拥有属性。
slide19

元素

    • 行内元素

行内元素是指该元素标记的内容不会对现在的结构造成影响,属于应用样式,辅助应用样式表等作用;

常见行内元素有:span、strong、a、em、img、input、label等;

slide20

元素

    • 块级元素

块级元素为一个块状,单独占据一行,相当于在一个该元素前后各加一个换行;

常见块级元素有:div、h1~h6、ol、ul、li、table、form、dl、dd、dt······

slide21

元素

行内元素与块状元素最大的区别就在于块状元素会单独占据一行,而行内元素不会单独占据一行。为了更直观,可以实例为参考。

以下是在DW中编辑的HTML标签,链入的是内部样式表。

  • 元素

然后在浏览器中预览效果是这样的。

显然,块状元素发生了折行,而行内元素却只成一行。

slide23

CSS 指层叠样式表 (Cascading Style Sheets)

  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
slide24

使用CSS的优势:

    • 1.实现网页样式和内容的分离;
    • 2.更好地控制页面布局;
    • 3.制作出体积更小、下载更快的网页;
    • 4.更快、便于维护及更新大量的网页;
    • 5.浏览器兼容性更好。
slide26

“栋梁与砖瓦”

在网页中,HTML定义其结构,就像房屋的栋梁;CSS则定义HTML中各结构元素的样式,就像房屋的砖瓦,起装饰作用。

slide27

如何在HTML中链入CSS?

    • 方法一:链入外部样式表

 样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head>区内。

注意:其中被链接的CSS文档位置要准确。

 当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。

slide28

如何在HTML中链入CSS?

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>在HTML中链入外部样式表</title>

<link href=“skin.css" rel="stylesheet" type="text/css" />

</head>

slide29

如何在HTML中链入CSS?

    • 方法二:内部样式表

 可以在 head 部分通过 <style> 标签定义内部样式表。

  当单个文件需要特别样式时,就可以使用内部样式表。

slide30

如何在HTML中链入CSS?

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>在HTML中链入内部样式表</title>

<styletype=“text/css”>

p{fone-size:14px;}

</style>

<</head>

slide31

如何在HTML中链入CSS?

    • 方法三:导入外部样式表(不常用)

 指在内部样式表的<style>里导入一个外部样式表,导入时用@import:

<head>

<title>在HTML中导入外部样式表</title><style type=”text/css”><!--@import “mystyle.css”其他样式表的声明--></style></head>

slide32

如何在HTML中链入CSS?

    • 方法四:内嵌样式(不推荐使用)

 内嵌样式是混合在HTML标记里使用的,用这种方法,可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值,如下例:

<p style=“color: red;”> 这是一个段落</p>

slide34

什么叫结构与表现分离?

    • 表现和结构分离的基本思想是确保HTML中只定义结构,不在HTML中穿插CSS样式,所有样式都定义到分离的CSS文件中去。
    • 要实现结构与表现分离,则在HTML中链入CSS时,应选择外部样式表。
slide35

为什么要使结构与表现分离?

    • 便于代码修改及维护。

比如当需要将某元素的字体大小更改为14px时,只需要在CSS文档中修改即可。而如果使用内嵌样式或内部样式表,则需要逐个打开HTML文件,将每个HTML文件中涉及到该元素的字体大小样式都修改一遍,这就增加了很多不必要的工作。

slide37

CSS规则主要由选择器以及一条或多条声明组成:CSS规则主要由选择器以及一条或多条声明组成:

selector {declaration1; declaration2; ... declarationN }

  • 每条声明又由一个属性和一个值组成:

selector {property: value}

slide38

选择器

    • 元素选择器

选择器为某个元素;

实例:p{font-size:14px;},选择器为p元素。

slide39

选择器

    • 类选择器

将class属性指定为一个适当的值使类选择器与元素相关联;

类名前加点号,区分大小写;

实例:

HTML:<p class=“test”>类选择器</p>

CSS:.test{font-size:14px;}

slide40

选择器

    • ID选择器

与类选择器相似,但引用的是ID属性中的值;

ID名前加#,区分大小写;

实例:

HTML:<p id=“test”>类选择器</p>

CSS:#test{font-size:14px;}

slide41

选择器

    • 类选择器与ID选择器:
    • 同一个类样式可在多个标签中被引用,同一个标签可以引用多个类样式。同一个标签最多只能引用一个ID选择符。
    • 类选择器与ID选择器都可指定标签范围,以提高其优先级:p.a{font-size:14px;} p#a{font-size:14px;}
    • 对于网页结构问题,一般建议使用id选择符来定义;
slide42

选择器

    • 类选择器与ID选择器:
    • 对于重复出现的样式,可考虑使用类选择符来提炼;
    • 当id选择符和类选择符的样式发生冲突时,id选择符的样式优先于类选择符定义的样式。
slide43

选择器

    • 伪选择器
    • 伪类和伪元素定义一些无法通过标签、ID或Class以及其他属性精确控制的特殊区域或特殊状态下的样式,如控制鼠标单击过程中超链接显示为不同的状态。
    • 伪类和伪元素以英文冒号(:)为前缀来表示,如:a:hover{color:red;}
slide44

选择器

    • 伪选择器
    • a元素也可为body、div、span等元素,如p:hover{color:red;}
    • IE6及其以下版本不支持子代选择器、相邻选择器、属性选择器以及除链接以外的其它伪类选择器;
slide45

选择器

    • 属性选择器
    • 选择属性值,如*[title]{font-weight:bold;},这会使所有包含title信息的元素的字体加粗显示;
    • 可根据具体属性值选择、根据部分属性值选择以及根据特定属性值选择。
slide46

选择器

    • 后代选择器
    • 可指定任意后代元素;
    • 指定子元素;h1>strong{color:red;};
    • 指定相邻兄弟元素;h1+strong{color:red;}
    • 通配选择器

 以*表示,可与任何元素匹配;

 如*{color:red;}将使所有元素字体显示为红色。

slide47

选择器

    • 通配选择器

 以*表示,可与任何元素匹配;

 如*{color:red;}将使所有元素字体显示为红色。

slide48

选择器

    • 包含选择符
    • 包含选择符通过空格标识符来表示,用来定义被包含选择符的样式,如:div span{font-size:16px;}
    • 常用,兼容ie6。
    • 多层选择符嵌套
    • 嵌套的层级没有明确限制,嵌套的方法利用空格实现,如:div p span{font-size:16px;}
slide50

继承性

    • 在HTML文档树中,祖先指任意相连但在文档树相对上方的元素,后代指任意相连但在文档相对下方的元素;父辈指相连并直接在该元素上方的元素,孩子指相连并直接在该元素上方的元素;
slide51

继承性

如下图文档树中,ul的后代元素为其下方所有元素,祖先元素为其上方所有元素,父辈为body元素,孩子为li。

slide52

继承性

    • CSS的继承性是指特定的CSS属性向下传递到子孙元素;

如”<p>CSS的<em>继承性</em></p>”中,若定义p元素颜色为红色,不对em元素字体颜色进行定义,由于继承性,p元素的CSS属性将向下传递至其子孙元素em,其字体颜色也将显示为红色;

   可在DW中编辑HTML代码进行验证:

在浏览器中预览效果,可以看到em中的文字显示为红色。

  • CSS的继承性让开发者的工作更为轻松,但并非所有属性都可继承(这样会导致更糟糕的情形);
slide53

继承性

    • 常见的可继承的属性包括:

文本相关属性:font-family、font-size、fontstyle、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing

列表相关属性:list-style-image、list-style-position、list-style-type、list-style

颜色相关属性:color

slide54

继承性

    • 以下类型属性不能继承:

边框属性边界属性(margin系列)补白属性(padding系列)背景属性定位属性布局属性元素宽、高属性

slide55

层叠性

    • CSS层叠性是指当多个选择器同时作用于同一元素,即多个元素的作用范围发生了重叠,CSS如何处理。
    • CSS的处理原则为,当多个选择器不发生冲突时,元素将应用所有选择器中定义的样式。当多个选择器发生冲突时,CSS的处理方式则涉及到CSS优先级的问题。
slide57

css样式表优先级:原则上优先级从高到低排列是,作者定义的样式表>用户设置的样式>浏览器默认样式>html默认样式,但css2中,可使用!important命令来强制提高重要性,使其优先于任何规则。css样式表优先级:原则上优先级从高到低排列是,作者定义的样式表>用户设置的样式>浏览器默认样式>html默认样式,但css2中,可使用!important命令来强制提高重要性,使其优先于任何规则。

  • css样式的优先级:优先级从高到低排列是:

行内样式>内样式表>外部样式表

可使用!important使某样式拥有最高优先级。

slide58

对于常规选择符,它们的优先级加权值如下:

标签选择符:优先级加权值为1. 伪元素或伪对象选择符:优先级加权值为1. 类选择符:优先级加权值为10. 属性选择符:优先级加权值为10. id选择符:优先级加权值为100. 其他选择符:优先级加权值为0

另外,. 被继承的值具有特殊性0. 内联样式优先. 就近原则,即排在最后的样式具有最大优先权. 被定义!important命令的样式有最大优先权(!important需置于属性值与分号之间)

计算规则:

. 统计选择符中id选择符个数,然后乘以100. 统计选择符中类选择符个数,然后乘以10. 统计选择符中标签选择符个数,然后乘以1

依此类推,然后把所有加权值数相加,即可得总加权值,加权值越大,优先级则越高。

slide60

CSS Reset,即CSS重置。通过重新定义标签样式,将浏览器中的默认样式覆盖掉。

  • 为什么要进行CSS Reset?HTML标签在浏览器中有默认样式,而各个浏览器的默认样式并不一致,所以需要通过重置,使各个浏览器产生同样的效果。
  • 每个网站的CSSReset都有所不同。
  • 以下为“厚朴工作室”网站的CSS Reset截图: