html css basics_html/css_WEB-ITnose

完整的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文件

 

                                               

  插入视频

 

 插入网页块

 

插入表单

   

 一。文本输入（账号，密码）

账号

密码

 

 二。提交表单

  

 三。单选

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;}

哈,我是一个帅哥

是不是哦，我晕你

我看看行不行。

The running result is: Ha, I am a handsome guy. Oh, I fainted.

Explanation: "Ha I am a handsome guy" uses absolute positioning. It is positioned relative to the first DIV because the first DIV is its parent element and contains it inside. So it appears at the top of the header. (Because left and top are not set for it)

"Isn't it, I fainted you" is also absolute positioning. It is positioned relative to the first DIV and sets the left value to 160px, which is larger than the previous one. The width of the div, so it won't overlap.

"Let me see if it works" uses relative positioning. It is positioned relative to the parent element, that is, the first DIV. Its position is calculated from the very beginning of the parent element. , so if top is not set, it will overlap with the second div. The font size is generally 15px 🎜>

top: Cut the top length from top to bottom.

left: Cut off the length of left from left to right.

right: Cut out the length of right from left to right.

bottom: cut the length of bottom from top to bottom

Convert block-level elements into character-level elements

display:inline;

Convert character-level elements into block-level elements

display:block;

Handle overflow

position :absolute; (must be absolute)

overflow:visible; //The overflow area is visible

overflow:hidden; //The overflow area is invisible

overflow:scroll; / / Scroll bar appears in the overflow area

Box model

With margin padding border width height

When abbreviated, it is written in the order of right, bottom and left

For example: border-width: 1em 2em 2em 2em

Note: the attributes of top, bottom, left and right:

If only 3 values ​​appear during setting, it means top, left, and bottom

2 values: up, down, left and right

1 value: all = 4 identical values ​​appear

Insert multimedia

　

Reprinted