掌握csshtml基础

1、掌握掌握基础基础黄舒诗N-X-N-Pcsshtml目 录CSS 简介CSS 发展历程如何创建 CSSCSS 语法CSS 选择器HTML代码规范CSS 代码规范的目的和好处HTML+CSS 的目的和好处 (WEB标准的目的和好处) 网站标准的目的：1）、提供最多利益给最多的网站用户 2）、确保任何网站文挡都能够长期有效 3）、简化代码、降低建设成本 4）、让网站更容易使用，能适应更多不同用户和更多网路设备 5）、当浏览器版本更新，或者出现新的网络交互设备时，确保所有应用能够继续正确执行。 采用网站标准的好处： 对网站浏览者的好处 文件下载与页面显示速度更快； 内容能被更多的用户所访问 内容能被更

2、广泛的设备所访问 用户能够通过样式选择定制自己的表现界面 所有页面都能提供适于打印的版本 对网站所有者的好处 更少的代码和组件，容易维护 代码更简洁，成本降低 更容易被搜寻引擎搜索到 改版方便，不需要变动页面内容 提供打印版本而不需要复制内容 提高网站易用性HTML 简介HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。 HTML文档是由HTML标签组成的描述性文本，HTML标签可以标识文字、图形、动画、声音、表格、链接等。HTML是一种用于网页制作的排版语言，是WEB最基本的构成元

3、素。HTML 发展历程2014年10月29日，W3C宣布，经过接近8年的艰苦努力，HTML 5标准规范终于制定完成，待HTML5规范开发完成时，将成为主流。1993年6月HTML 1.01995年11月HTML 2.01996年1月HTML 3.21997年12月HTML 4.01999年12月HTML 4.012008年1月HTML 5.001使用HTML语言标识文本。例如，定义标题文本、段落文本等。HTML 特性02可建立超链接，通过其可以访问互联网上的所有信息。03可创建列表，把信息有序的组织在一起，以方便浏览。04可在网页中显示图像、声音、视频、动画等多媒体信息。05可制作表格，以便显

4、示大量数据。06可制作表单，用于检索信息，执行其他用户操作，方便信息互动。HTML 结构HTML文档一般都应包含两部分：头部区域和主体区域。HTML文档基本结构由3个标签负责组织：、和 无标题文档 HTML 语法所有的标签都包含在“”起止标识符中，构成一个标签，如：元素的属性包含属性名称和属性值，如：元素主体标签可以相互嵌套，但不能交错嵌套，如：是不合法的可在html文档中增加注释性文本，如：或HTML文档实际上就是一个文本文件，它由标签和信息混合组成。HTML 标签HTML定义的标签很多，下面对常用标签进行简单的说明：网页标题标题文本段落文本强度文本， 加粗显示斜体显示放大文本无序列表有序列

5、表列表项目超链接（亦可定义锚点，既是定位到网页某个具体的位置）图像多媒体多媒体表格结构表格标题表头表格行表格单元格表单结构定义文本域、按钮和复选框定义多行文本定义下拉列表定义下拉列表中的选择项目”HTML 属性“ Class定义类规则或样式规则Id定义元素的唯一标识Style定义元素的样式声明这3个基本属性大部分元素都有alt定义元素的替换文本，title定义元素的提示文本Css 简介CSS是英文Cascading Style Sheets（层叠样式表）的缩写。 它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS层叠样式表

6、是一系列格式设置的规则，它们控制网页内容的外观。使用CSS可以更加灵活地控制具体的页面外观，从精确的布局定位到特定的字体和样式。#div .div CSS 发展历程作为一项W3C推荐，CSS1发布于 1996年12月17 日。作为一项 W3C 推荐，CSS2发布于 1998年5月。2001年5月W3C开始进行CSS3标准的制定，到目前为止该标准还没有最终定稿只是提出了一个规范如何创建 CSS如何 插入样式表当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：1外部 样式表每个页面使用 标签或import标签链接到外部样式表。例如 标签在（文档的）头部： 2内部

7、样式表当单个文档需要特殊的样式时，就应该使用内部样式表。可使用 标签在文档头部定义内部样式表，如： p margin-left: 20px; 3内联 样式使用内联样式，需要在相关的标签内使用样式（style）属性，Style 属性可以包含任何 CSS 属性。如： This is a paragraph link与import区别如何导入 CSS 样式表1Link 标签引用示例： href- 指定需要加载的资源(CSS文件)的地址URI rel - 指定链接类型 type- 包含内容的类型,一般使用type=text/css 2import 标签引用1）在html中import url(css/

8、a.css);2）在css中（直接使用）import url(a.css);import url(b.css); 是html标签，只能放入html源代码中使用； import可看作为css样式，作用是引入css样式功能； 当一个页面被加载的时候，link 引用的CSS会同时被加载，而import引用的CSS会等到页面全部被下载完再被加载。 import只有在IE5以上的才能识别，而link标签无此问题。 当使用javascript控制dom去改变样式的时候，只能使用link标签，因为import不是dom可以控制的。CSS 语法CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。se

9、lector declaration1; . declarationN 每条声明由一个属性和一个值组成。每个属性有一个值。属性和值被冒号分开。selector property: valueCSS 选择器元素选择器元素选择器是最常见的 CSS 选择器。换句话说，文档的元素就是最基本的选择器。 如下：html color:black; h1 color:blue;类型选择器类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。 CSS样式如下：h1 font-family:微软雅黑;HTML文档如下：你好CSS 选择器选择器分组可以将任意多个选择器分组在一起，对此没

10、有任何限制。CSS样式如下：h1, h2, h3, h4, h5, h6 color:blue;声明分组通配选择器（universal selector），显示为一个星号（*）。 CSS样式如下：* color:red;通配符选择器当为一个有多个声明的选择器创建样式时，可以将声明分组在一起：CSS样式如下：h1 font-size: 28px; color: white; background: black;类选择器类选择器允许以一种独立于文档元素的方式来指定样式。多类选择器CSS 选择器在HTML文档中以class显示。如下：.red color:red;这个段落是红色。在 CSS 中，类选

11、择器以 “.” 来定义，在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。HTML文档如下： This paragraph is a very important warning. Id 选择器ID 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。在 CSS 中，id 选择器以 “#” 来定义，在 HTML文档中以id显示，分别如下：#red color:red;这个段落是红色。属性选择器CSS 选择器属性选择器可以根据元素的属性及属性值来选择元素。1）如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。例如：*title c

12、olor:red;CSS 属性选择器详解2）根据具体属性值选择attribute=value，如下：a href=“” color: red; （CSS样式结构）About （HTML文档结构）3）属性与属性值必须完全匹配attribute=value，如下：p class=important warning color: red; （CSS样式结构）This is a paragraph. （HTML文档结构）4）根据部分属性值选择attribute=value，如下：pclass=important color: red; （CSS样式结构）This is a paragraph. （HT

13、ML文档结构）6）子串匹配属性选择器，有以下三种： attribute=value 匹配属性值以指定值开头的每个元素。如： div class=test background:#ffff00; 匹配指定值开头的每个元素 attribute$=value 匹配属性值以指定值结尾的每个元素。 divclass$=test background:#ffff00; 匹配指定值结尾的每个元素 attribute*=value 匹配属性值中包含指定值的每个元素。 divclass*=test background:#ffff00; 你好 或 你好CSS 属性选择器详解5）特定属性选择类型attribute

14、|=value ，如下：*lang|=en color: red; （CSS样式结构）Hello! 或 Greetings! （HTML文档结构）CSS 选择器后代选择器后代选择器（descendant selector）又称为包含选择器。可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。如下：h1 em color:red;This is a important headingThis is a important heading This is a important heading 子元素选择器子元素选择器（Child selectors）只

15、能选择作为某元素子元素的元素。子选择器使用了大于号（子结合符），如下：h1 strong color:red; This is very very important. This is veryimportant.CSS 选择器相邻兄弟选择器相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。相邻兄弟选择器使用了加号（+），即相邻兄弟结合符，如下：h1 + p margin-top:50px;This is a heading.This is paragraph.This is paragraph.伪类:focus 向拥有键盘输

16、入焦点的元素添加样式:link 向未被访问的链接添加样式:visited 向已被访问的链接添加样式:hover 当鼠标悬浮在元素上方时，向元素添加样式:active 向被激活的元素添加样式CSS 选择器CSS 伪元素 (Pseudo-elements)用于向某些选择器设置特殊效果。:first-line 伪元素用于向文本的首行设置特殊样式：p:first-linecolor:#ff0000; font-variant:small-caps;:first-letter 伪元素用于向文本的首字母设置特殊样式：p:first-line color:#ff0000; font-size:xx-larg

17、e;:before 伪元素可以在元素的内容前面插入新内容：h1:beforecontent:url(logo.gif);:after 伪元素可以在元素的内容之后插入新内容：h1:aftercontent:url(logo.gif); HTML代码规范u 所有的标记都必须要有一个相应的结束标记 例如：你好么？u 所有标签的元素和属性的名字都必须使用小写 例如：必须写成u 所有的XML标记都必须合理嵌套 例如： /b 必须修改为：/pu 所有的属性必须用引号括起来 例如： 必须修改为：u 把所有和&特殊符号用编码表示任何小于号（），不是标签的一部分，都必须被编码为> ; 任何与号（&），不是实

18、体的一部分的，都必须被编码为& CSS 代码的一些规范 文件命名规范全局样式：global.css 框架布局：layout.css 字体样式：font.css 链接样式：link.css 打印样式：print.css 常用类/ID命名规范页眉：header 内容：content 页脚：footer 版权：copyright 样式属性代码缩写不同类有相同属性及属性值的缩写例如：.header width:100%; height:30px; overflow:hidden; .logo width:100%; height:30px; overflow:hidden; . footer background-color:#000; width:100%; h