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 像素