HTML和CSS基础课程资料整理.doc

HTML中使用!--注释语句-- CSS中用/*注释语句*/ 使用mailto在网页中链接Email地址： img src=图片地址 alt=下载失败时的替换文本 title = 提示文本 CSS样式声明（定义）： 选择器{ 样式; } (标签选择器其实就是html代码中的标签类选器名称可以任意起名ID选择器只能使用一次类选择器可以使用多次class名为food下的子元素li加入红色实线边框作用于元素 标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100 三种CSS样式： 1.内联式css样式 p style=color:red这里文字是红色。/p 2.嵌入式css样式 style type=text/css span{ color:red; table tr td,th{border:1px solid #000;!--为单元格添加粗细为一个像素的黑色边框-- font-weight:normal/bold; /*颜色以正常/粗体样式显示出来*/ font-size:20px; font-style:italic;/*斜体样式*/ text-decoration:underline;/*下划线样式*/ text-decoration:line-through;/*删除线样式*/ border:1px solid red;}/*添加边框样式（粗细为1px 颜色为红色的实线*/ /*段落排版*/ text-indent:2em;/*段前缩进2空格*/ line-height:1.5em;/*段落行间距*/ letter-spacing:20px;/*文字/字母间隔，英文单词之间的间隔word-spacing*/ text-align:center;/*块状元素中的文本、图片设置居中样式*/ } body{font-family:宋体;}网页中文字排版 /style 3.外部式css样式 把css代码写一个单独的外部文件中，以“.css”为扩展名，在head标签内使用link标签将css样式文件链接到HTML文件内，如下面代码： link href=base.css rel=stylesheet type=text/css / (rel=stylesheet type=text/css 为固定写法) 优先级：内联式 嵌入式 外部式（link在style的前面） 为某些样式设置最高权值： 选择器{ 样式!important; } 样式优先级为：浏览器默认的样式 网页制作者样式 用户自己设置的样式 html中的标签元素分为三种不同的类型div、p、h、ol、ul、dl、table、address、blockquote 、form 通过设置“左右margin”值为“auto”来实现居中 不定宽块状元素：如网页上的分页导航添加无语议标签，增加嵌套深度给父元素设置 float position:relative和left:50%,子元素设置position:relative和 left:-50% 设置了 position:relative 特点：独占一行；元素的高度、宽度及顶部和底部边距可设置；在不设置宽度的情况下，显示为父容器的100% 2.内联元素(又叫行内元素)：display:inline;/*将元素设为内联元素*/ a、span、br、i、em、strong、label、q、var、cite、code 被设置元素为文本、图片等元素时，水平居中是通过给父元素设置 text-align:center 来实现img、input 和其他元素都在一行上元素的、、行高以及顶和底边距都可设置。显示，可以设置元素的 width 和 height 了且默认宽度不占满父元素。 绝对定位(position: absolute) 将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。 相对定位(position: relative) 按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置。 固定定位(position: fixed) 相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响这与 background-attachment:fixed?属性功能相同