首页 >web前端 >html教程 >样式常用属性_html/css_WEB-ITnose

样式常用属性_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:27:07953浏览

笔记信息

复习:

表单作用:

从使用的角度上说:html提供了一个输入内容的途径。

从服务器的角度:提供了一个收集信息的途径。

以便客户端和服务器进行交互。

例:注册页面,上传文件。

3种常见元素:input select textarea

Input的十种常见类型:

text,password,radio,checkbox,submit,reset,button,image,hidden,file

Radio中name应该保持相同,以确保在单选按钮中的元素完成互斥。

Checkbox中name 也要保持相同。

利用label进行绑定,点文字等效于点击小的选中按钮。

Submit和image都具有提交功能,由form的action的url进行响应。

Get 显示提交 响应速度快 传递内容小, 应用较少

Post 隐式提交 响应速度慢 传递内容大, 应用广。

Checked默认选中

Select: name option value selected

Textarea:里面空格在外面显示空格,文本里面有换行,外面显示有换行。

拥有属性:rows cols 和readonly

Css层叠样式表:

作用:用来美化页面,修饰html标签。

css代码卸载html商,嵌入方式:

1、行嵌入:style 在html上的任何标签都有style属性,css代码作为style的值。修饰范围小。

2、页内嵌入:style,stle作为一个标签卸载head里面,给这个标签设定一个type="text/css"有三种方式:

(1) 标签选择器:p{} font{} table{} div{}

(2) 类选择器:.className{} 可以写多个

(3) Id选择器:#identity{} 不可写多个,并且不能有重复id.

优先级:行>id>class>标签

3、css中常用属性:

文本修饰:

边框修饰:

写法:多个元素共用一个样式:

p,font,span{}

p,#spanStyle,.fontStyle{}

p span{} 表示p中的span服从{}内的样式。

padding和margin用以定边距。

修改list中的图片样式:{list-style-image:(url)}

div可以用来布局,可以使用更加复杂的布局方式。Div是块级标签。默认一个就是一行。

span默认不换行,没有宽高,以内容为准。

Float属性。

1、如果有层叠,有定位的在上面。

2、如果都有定位方式,谁出现在body最后面,谁出现在上面。

3、z-index:number 谁的number大,谁在上面。

4、有嵌套的话,里面的显示在上面。

练习利用css+div实现电子笔记本的布局。

示例代码:

和对应效果:

不同浏览器效果不同。

段落中的常见属性:

color:#660; background-color:#9CF;width:500px;height:800px;text-align:center;text-decoration:underline; font-size:16px; font-family:"Lucida Console", Monaco, monospace; white-space:pre-line;line-height:normal; letter-spacing:normal;word-spacing:10px;

有需求再详细查询。

border:0; border-bottom:#00F 5px dotted;

这两句话的前后位置还是比较有讲究的:

这里面都没得显示了,如果前后位置颠倒的话:

border-bottom:#00F 5px dotted;border:0;

table{ border:#9F6 20px inset;}

得加上inset才能有边框

不同的浏览器效果不同,不要想了。根本不行。

绝对和相对表示当前元素是否放弃自己之前的位置。

相对则保有之前的位置,

绝对则放弃之前的位置。

段落常见属性:

字体颜色 font-color

段落所在背景颜色 background-color

段落宽:width

段落高:height

段落文本对齐方式: text-align

文本修饰:text-decoration:下划线

字体大小:font-size 

字体样式:font-family

留白:(据上一个单元的物理长度)white-space

行高:line-height

字间距:letter-spacing

单词间距:word-spacing

代码与效果:

1、

    


    

效果:

2、

#one{width:300px;height:200px;background-color:#090; position:absolute; top:180px;left:280px;}

#two{width:300px;height:200px;background-color:#F00;float:left}

   

    

   

    

    

    

    你好

       

    

    Hello

    

3、

#one{width:300px;height:200px;background-color:#090; position:absolute; top:180px;left:280px;}

#two{width:300px;height:200px;background-color:#F00;position:relative;top:-20px;left:-20px;}

        

    

        

    

    你好

    

    

    Hello

    

4、

#one{width:300px;height:200px;background-color:#090;}

#two{width:300px;height:200px;background-color:#F00;}

   

    

    

  

    

    你好

        

    

    Hello

    

5、

table{border:#090 2px solid; witdh:500px;height:300px}

 

td{border-color:#33c;border-width:2px;border-style:solid}

 

.tdStyle{border-left:#f03 5px double}

    

        

        

        

        

        

    

nihao hello
dajiahao tahao

6、

table{ border:#9F6 20px inset;margin-top:0px}

img{margin-top:0px;}

    

  

        

    

        

 

    

            

                样式常用属性_html/css_WEB-ITnose       

            

7、

/* 超链接 伪类*/

a:link{color:#F00;text-decoration:none;}

a:hover{color:#F60;text-decoration:underline; font-size:18px}

a:active{color:#FF0;}

a:visited{color:#0F0}

汪汪汪

8、

font,p,span{ font-size:24px; font-family:Verdana, Geneva, sans-serif; color:#0C3}

font,#classstyle,.idstyle{font-size:36px}

p span{font-size:48px}

    这是字体部分

       

    

    这是段落部分

    

  

    

    这是段落部分

    

    

    这是区间部分

    

    

    id和区间搞反了!

    

    

        

            这是区间部分

        

9、

li{ list-style:none;float:left; padding-left:5px}

      

        

  •         相册

            

  •         

  •         |

            

  •         

  •         留言板

            

  •         

  •         |

            

  •        

            

  •         说说

            

  •         

  •         |

            

  •         

  • 日志        

            

  •         

  •         |

            

  •        

            

  •         个人中心

            

  •  

        

10、

li{list-style-image:url(../../picture/arrow3.png)}

 

     

  •     lifei

     

  •     

  •     jiyongc

     

  •     

     

 

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn