html css属性笔记,html+css笔记总结 .

完整的HTML结构

样式的引用

一。内部编写

body {background:black; text-spacing:0.5em}

.div_css1 {align="center" margin:20px}

.p_css1 {color:red; font:(Style)itlic||oblique (variant)small-caps||none (weight)800(400=norml 700=bold) (size)4em (family)“宋体”||Times New Norman}

(if ues:  so use the style just 1 times)!!!

#div_css {}

(or ues:  so don't write"class or id =?" )

div.p {}

div p {}

二。外部引用

超链接的样式

a {}  // all super links

a:link {}  //no linked links

a:visited{}  //alredy linked links

a:hover{}  //on mose move to the link

a:action{}  // 点击时

插入flash文件

插入视频

插入网页块

src="xx"

width=""

height=""

scrolling="auto"

frameborder="o"

name="xx">

插入表单

一。文本输入(账号，密码)

账号

密码

二。提交表单

三。单选

xx

xx

四。多选

xx

xx

xx

五。下拉菜单

xx

xx

xx

六。列表(没有下拉)

xx

.......

......

悬浮文字框

xx

滚动文字

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

表格

xx
xx	xx

文字的一些属性

设置元素内容的文本属性

(1)举例设置文本首行缩进

text-indent:2em;

(2)举例设置文本对齐方式

text-align:left | right | center;

(3)举例设置文本修饰方式

text-decoration:underline;

(4)举例设置字间距

letter-spacing:2em;

(5)举例设置词间距

word-spacing:0.5em;

(6)举例空白显示形式 P56

white-space:pre;

外边距margin:围绕在元素边框之外的可选区域。

内边距padding：文本内容到边框之间的可选区域

元素浮动

浮动：

float

有2个方向: left  right none(不浮动)

对于文字浮动，必须设置高度，宽度，如果不设，后后果自负。

例

清除浮动：

clear:none;  //允许元素的两边都可以有浮动

clear:left;  //不允许左边有浮动元素

clear:right; //不允许右边有浮动元素

clear:both;  //两边都不允许有浮动元素

定位类型position

分类：

static(静止)此为默认，即按照正常的文本流，占用正常的位置。

fixed(固定的) 相对于浏览器窗口定位(保留原位置)

position:absolute;

绝对定位：相对于父级元素(被包含容器)。

position:relative;

相对定位:相对于没有设置position时的正常位置定位

原始空间会保留下来。(意思就是说按static的位置算的地方不会出现另外的标签。如DIV，IMG等等。)

例子：

.div_1 {width:150px;height:200px;}

.text1 {width:200px;height:100px;left:160px;}

哈,我是一个帅哥

是不是哦，我晕你

我看看行不行。

运行结果为：哈我是一个帅哥  是不是哦，我晕你

我看看行不行。

解释：“哈我是一个帅哥”用的是absolute 绝对定位，它相对于第一个DIV来定位，因为第一个DIV是它的父级元素，将它包含在里面。所以它出现在顶部起头。(因为没对其设置left 和top等)

“是不是哦,我晕你”也是absolute 绝对定位，它相对于第一个DIV定位，设置了left值为160px，大于上一个div的宽度，所以不会重合。

“我看看行不行”用的是relative 相对定位，它相对与父级元素定位，也就是第一个DIV，它定位的位置从父级元素里面的最开始位置算起，所以，如果不设置top的话就会和第二个div重合。而字体的大小一般为15px‘

指定裁剪区域

position:absolute;

clip:rect(top right bottom left);

top:从上到下裁去top的长度。

left:从左到右裁去left的长度。

right:从左到右裁出right的长度。

bottom:从上到下裁出bottom的长度

将块级元素转化为字符级元素

display:inline;

将字符级元素转化为块级元素

display:block;

处理溢出

position:absolute;(必须为absolute)

overflow:visible;  //溢出区域可见

overflow:hidden;  //溢出区域不可见

overflow:scroll;  //溢出区域出现滚动条

盒模型

有 margin padding border width  height

简写时安上右下左顺序来写

如：border-width：1em 2em 2em 2em

注意：上下左右这几个属性：

在设置时如果只出现3个值，则代表上 左右 下

2个值: 上下  左右

1个值：全部  =出现4个一样的值

插入多媒体