样式常用属性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了样式常用属性相关的知识,希望对你有一定的参考价值。


复习:

表单作用:

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

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

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

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

3种常见元素:input select textarea

Input的十种常见类型:

textpasswordradiocheckboxsubmitresetbuttonimagehiddenfile

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

Checkboxname 也要保持相同。

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

Submitimage都具有提交功能,由formactionurl进行响应。

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

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

Checked默认选中

Select: name option value selected

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

拥有属性:rows cols readonly

Css层叠样式表:

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

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

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

2、页内嵌入:stylestle作为一个标签卸载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服从{}内的样式。

paddingmargin用以定边距。

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

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

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

Float属性。

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

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

3、z-indexnumber 谁的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

<input  type="text"  style=" border:0;border-bottom:#00F 5px dotted; "/>

    <hr/>

    <br/>

<input type="button" value="test" width="200px" height="150px" style="  border:#060 5px solid; background:#360;border:#00F 5px outset"/>

效果:

技术分享

2

<style type="text/css">

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

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

</style>

</head>

<body>

<div id="one">   

    </div>

   

    <div id="two">    

    </div>

<span>

    你好

    </span>   

    <span>

    Hello

    </span>

</body>

技术分享

3

<style type="text/css">

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

</style>

</head>

<body>

<div id="one">

        <div id="two">    

        </div>

    </div>

<span>

    你好

    </span>

    <span>

    Hello

    </span>

</body>

技术分享

4

<style type="text/css">

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

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

</style>

</head>

<body>

<div id="one">   

    </div>

    <div id="two">  

    </div>

<span>

    你好

    </span>    

    <span>

    Hello

    </span>

</body>

技术分享

5

<style type="text/css">

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}

</style>

</head>

<body>

<table>

    <tr>

        <td>nihao</td><td class="tdStyle">hello</td>

        </tr>

        <tr>

        <td>dajiahao</td><td>tahao</td>

        </tr>

    </table>

</body>

技术分享

6

<style type="text/css">

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

img{margin-top:0px;}

</style>

</head>

<body>

<table align="center">

    <tr>  

        <td>            

                <img src="../../picture/剑圣.jpg"  width="640"/>       

            </td>    

        </tr> 

    </table>

</body>

技术分享

7

<style type="text/css">

/* 超链接 伪类*/

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}

</style>

</head>

<body>

<a href="#" >汪汪汪</a>

</body>

技术分享

8

<style type="text/css">

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}

</style>

</head>

<body>

<font >

    这是字体部分

    </font>   

    <p class="idstyle">

    这是段落部分

    </p>  

    <p >

    这是段落部分

    </p>

    <span>

    这是区间部分

    </span>

    <span id="classstyle">

    id和区间搞反了!

    </span>

    <p>

        <span>

            这是区间部分

        </span>

</p>

</body>

技术分享

9

<style type="text/css">

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

</style>

</head>

<body>

<ul>  

    <li>

        相册

        </li>

        <li>

        |

        </li>

        <li>

        留言板

        </li>

        <li>

        |

        </li>       

        <li>

        说说

        </li>

        <li>

        |

        </li>

        <li>

日志        

        </li>

        <li>

        |

        </li>

       

        <li>

        个人中心

        </li> 

    </ul>

</body>

技术分享

10

<style type="text/css">

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

</style>

</head>

<body>

 <ul>

 <li>

    lifei

 </li>

    <li>

    jiyongc

 </li>    

 </ul>

</body>

技术分享

 

以上是关于样式常用属性的主要内容,如果未能解决你的问题,请参考以下文章

Xcode自定义代码块

常用重要CSS样式的属性

关于CSS的个人理解

java中Math类的常用函数

vscode 常用插件

样式常用属性