公司内部培训div+css网页设计基础教程.doc

目录列表 参考网址：/index.html1，最简单的html结构，保存为.html2，html的元素，包含头部元素和主体元素3，基本的html标签-标题-段落-链接-图像4，表格，单元格5，列表（有序和无序）6，表单form7，html块-块元素例子：, , , -内联元素例子：, , , -另外还有div 、span8，html5 视频和音频9，CSS层叠样式表-Css样式（背景，文本，字体，链接，列表，表格，轮廓outline.）-Css框模型，（内边距，边框，外边距）-Css定位（相对，决定，浮动）9-1，css的引用方式（3种）9-2，css的选择器（id选择器，类选择器，属性选择器，分组选择器等） -css伪类9-3，CSS高级（对齐，尺寸，分类，导航栏，图片库，图片透明）-对齐：整体对齐，块对齐，内容对齐等-尺寸：单位用px，或者百分比10，CSS3的新元素，实现（图片、文字）美化，动画，拖动，画图，旋转等功能Html基础学习这是一个简单的段落.标题，. 进行定义段落适应定义定义超链接：跳转到 /以新页面打开Html 头部元素,包含头部元素, , , , , , and .定义网页标题 /用于引入外部样式表等标签描述了一些基本的元数据。标签用于加载脚本文件，如： JavaScript。bodyfont-size:12px; /定义内部样式,Html 图像标签定义表格Row 1, cell 1Row 1, cell 2单元格边距(Cell padding)单元格间距(Cell spacing)Html 有序列表 AAAABBBBBB无序列表.Html 区块元素和内联元素是一个块级元素，常常我们用来定义一个区域，包含其他元素例如：这是一个内联元素，不会另起一行HTML 表单表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签 来设置:姓名: 密码: I have a bikeI have a car以上黄色lightline部分表示标签已经闭合段落标签使用 记得标签的闭合写法Html注释使用 Html 折行使用比较常用，而不是，虽然大部分两者都显示正常，但是未来兼容方面，建议使用Html标题标签使用等，数字越小，字号越大html内容居中排列使用align=”center”,分类可以设置left,center,right 水平排列的值html加入水平线呢,可以内容结束使用html的背景颜色，可以使用bgcolor,例如这是长引用 会自动插入换行和边距插入超链接 默认的超链接会变颜色和加下划线，样式可以通过css改变利用超链接标签可以设置name值，可以在同一个页面跳转到特定的位置，Html框架：Html5:基础学习定义音频内容 您的浏览器不支持 audio 元素。定义视频内容：您的浏览器不支持 video 标签。最简单的html5格式简介： CSS 指层叠样式表 (CascadingStyleSheets) 样式定义如何显示HTML 元素所有的主流浏览器均支持层叠样式表。css样式的引用方式有3中，1，内嵌式2，内联式3，外联式CSS常见的让元素水平居中显示方法#container margin-left:auto; margin-right:auto; width:800px; 网页居中，可以放在最外面的容器里text-align:center，margin:0px auto 基础语法：可以对某一个选择器设置样式CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。selector declaration1; declaration2; . declarationN 比如对标签h1的内容设置样式，颜色，和字号h1 color:red; font-size:14px; 高级语法：可以对多个选择器，同时设置同样的样式h1,h2,h3,h4,h5,h6 color: green; CSS的选择器有多种：分别是派生选择器，比如 li Strong ,比如想对列表的Strong元素设置为斜体li strong font-style: italic; /斜体 font-weight: normal; /常规 AAAAAAAAAAAAAaBBBBBBBBBBBBID选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 # 来定义。#headerbackground:red;font-size:14px;#contentborder:1px solid red;Id选择器，既可以单独使用设置样式，也可以联合该ID选择器的派生选择器使用，在现代布局中，id 选择器常常用于建立派生选择器。例如：#headerborder:1px solid red;font-weight:bold; /单独使用#header pfont-size:12px;color:#000; /ID选择器派生选择器在 CSS 中，class类选择器以一个点号”.”显示：.center text-align: center我是类选择器的内容注意：类名的第一个字符不能使用数字！和 id 一样，class 也可被用作派生选择器：.fancy td color: #f60;background: #666;元素也可以基于它们的类而被选择：td.fancy color: #f60;background: #666;对带有指定属性的 HTML 元素设置样式。注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。下面的例子为带有 title 属性的所有元素设置样式：titlecolor:red;设置表单的样式属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：inputtype=text width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial;当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存内部样式表当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 标签在文档头部定义内部样式表，就像这样: hr color: sienna; p margin-left: 20px; body background-image: url(images/back40.gif);内联样式由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：This is a paragraph多重样式如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。例如：#headercolor:#000000;font-size:14px;在外部样式表定义，但是在内部样式里，也定义了#headertext-align:left;font-size:12px;字体尺寸就会应用内部样式表的12px；覆盖了外部样式表中的14px，但是color没有被重新定义，所以依然是黑色。优先级：内嵌样式内部样式外部样式同样是内部样式，又以更具体的选择器优先级为高什么意思呢？ulfont-size:12px;ul lifont-size:14px;ul li afont-size:16px;或者ulcolor:#333; /应用在所有的ul的内容里#main ulcolor:#666; /优先级更高，会覆盖第一个ul的样式CSS背景：pbackground-color:#000;pbackground-image:url(.);background-repeat:no-repeat;/* background-repeat:repeat-x; /横轴平铺显示背景图片 */* background-repeat:repeat-y; /纵轴平铺背景图片*/Css 框模型 element : 元素。 padding : 内边距，也有资料将其翻译为填充。 border : 边框。 margin : 外边距，也有资料将其翻译为空白或空白边。如果为外边距指定了 3 个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距）复制得到。Padding5px相当于，上，右，下，左四面的内边距都是5px,Margin外边距，又称为补白，常用于分隔不同的div块，以免过于紧凑、position 属性值的含义：static（静态）元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。Relative（相对）元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。Absolute（绝对）元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。相对定位注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置z-index 属性来控制这些框的堆放次序。CSS 浮动请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：CSS 元素选择器最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。htmlh1h2body等等，我们只做数学电子书时，会经常用到多个Input,长度和宽度都一样，则可以inputwidth:100;height:35px;选择器分组：例如：h1,h2,h3,pfont-size:12px;要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。要在文档标记 . cred color：red1,多个元素可以应用同一个类样式，2,单个元素也可以应用多个类样式,，比如数学html制作中，我们针对对错的标识图片，可以引用多个样式tb和tb0中间用空格分开ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。不同于类选择器，ID 选择器不能结合使用选择子元素属性选择器。ahref color:red; 只对a标签有描点的设置样式如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：h1 strong color:red;相邻选择器：h1 + p margin-top:50px;请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：li+li 只对li相邻的第二个开始起作用，第一个li不起作用CSS伪类：a:link color: #FF0000/* 未访问的链接 */a:visited color: #00FF00/* 已访问的链接 */a:hover color: #FF00FF/* 鼠标移动到链接上 */a:active color: #0000FF/* 选定的链接 */CSS对齐：使用 margin 属性来水平对齐.centermargin-left:auto;margin-right:auto;width:70%;background-color:#b0e0e6;可通过将左和右外边距设置为 auto，来对齐块元素，并且宽度不能大于或者等于100%，否则对齐效果无效。使用 position 属性进行左和右对齐对齐元素的方法之一是使用绝对定位：