html与css基础知识回顾

一.关联css样式的三种方法：

<link rel="stylesheet" type="text/css" href="mystyle.css" /><style type="text/css"><div style=""></div>

二.标签属性和描述
属性 描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。

color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。

font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。
font-stretch 对字体进行水平拉伸。
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。

border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。（仅用于 “separated borders” 模型）
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。（仅用于 “separated borders” 模型）
table-layout 设置显示单元、行和列的算法。

list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

三.a标签

a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00}  /* 已访问的链接 */a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */a:active {color: #0000FF}   /* 选定的链接 */

四.静态页面设计中遇到的问题

1.文字超出div的长度
当我们限制div长度后，在div里面有一长串字母（没有空格）会出现溢出现象，这是因为这一长串字母被认为是一个单词。所以一般文本会识别自动换行不会溢出。
2.在图片上显示文字

第一步：设置div背景background-image: url(“images/back40.gif”);
第二步：输入文字调整位置即可。
3.a标签没有效果
需要暂时设置a标签的 href=“#”
4.当设置了长度和宽度后，给盒子加padding属性会拉伸盒子

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素