项目3网页布局.ppt

  1. 1、本文档共28页,可阅读全部内容。
  2. 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
芜湖职业技术学院 * 项目3 网页布局 《HTML5网页设计与实现》 『作 者』徐 琴 『时 间』2015.6 网页布局——学习情境 小黄通过前一个项目的学习掌握了HTML5基本知识,根据刘总的要求,开始着手建设网页,需要搭建网页的基本结构,也就是布局。 * 认识CSS * Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。它可以控制页面的外观,并且将文档的表现部分与内容隔开。它给我们带来很多好处,如避免重复、更容易维护和为不同目的,使用不同的样式而内容相同。 认识CSS CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 selector {declaration1; declaration2; ... declarationN } 属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。 selector {property: value} CSS注释以/*开始,以*/结束。 * 选择器 浏览器在展现一个文档的时候,必须要把文档内容和相应的样式信息结合起来展示。而这结合的依据就来自于CSS的选择器(selector)。CSS选择器有多种类型,如标签选择器、类选择器、通用选择器和组合选择器等。 * 选择器 * 元素选择器 文档的元素是最基本也是最常见的选择器。元素选择器又称为类型选择器(type selector)。如h2 {color:blue;},该代码将h2级别的标题设置为蓝色。该元素可以是html文档中所有的标签元素,甚至是html本身,如:html {color:red;},文本会呈现红色。 选择器 * 类选择器 通过设置元素的 class 属性,可以为元素指定类名。类名由开发者自己指定。文档中的多个元素可以拥有同一个类名。在写样式表时,类选择器是以英文句号(.)开头的。 如下面p标签元素具有class属性: p class=key 在一个CSS样式表中,下面的规则会使所有class属性等于key的元素文字颜色为绿色。 .key { color: green; } 选择器 * ID选择器 需要注意的是:每个ID在文档中必须是唯一的。在写样式表时,ID选择器是以#开头的。 例如下面规则会使id等于principal的元素字体大小为20px: #principal{ font-size:20px; } 选择器 * 通用选择器 通用选择器用一个星号“*”表示,它的作用是匹配所有的可用元素。 *{ padding:0; margin:0; } 伪类选择器 CSS伪类(pseudo-class)是加在选择器后面的用来指定元素状态的关键字。比较常见的链接状态就是要使用伪类选择器来实现。 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ * 伪元素选择器 CSS伪类用于向某些选择器添加特殊的效果,而伪元素(Pseudo-elements)用于将特殊的效果添加到某些选择器。如: style pi:first-child {color: red} /style p i第一个i/i i第二个i/i /p * 属性选择器 属性选择器可以根据元素的属性及属性值来选择元素。 例如,将所有包含标题(title)的所有元素变成红色,可以用以下代码: style *[title]{ color: red; } /style p这里没有title属性/p a href=# title=title1这里是具有title属性的链接。/a * CSS属性 CSS属性可以分为字体属性、颜色及背景属性、文本属性、方框属性等。 * 属性 描述 color 设置文字颜色 font-family 设置字体 font-size 设置字体大小 font-style 设置字形样式(正常或斜体) font-weight 设置是否加粗 text-align 设置文本水平对齐方式 text-decoration 设置文本修改 background 设置背景 background-color 设置背景颜色 background-position 设置背景固定位置 CSS属性 background-repeat 设置背景是否重复 width 设置宽度 height 设置高

文档评论(0)

yaocen + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档