前端学习——css实用技术

一,css控制文本样式

文本相关的css属性有很多,包括:

color;font-size;font-weight;text-transform(大小写uppercase等);text-decoration(下划线等);letter-spacing;word-spacing;text-shadow(css3新特性);line-height;text-align;text-indent;

其中,text-align(left,right,center,justify)只能用于块元素,可以使得块元素中的所有内联元素集中(不仅仅限于文本),也可以被任何嵌套的块元素继承;

vertical-align(top,bottom,middle)用于控制垂直方向的对其,注意这个对齐仅仅是指内容部分,如果单元格设置了padding,那么内容就永远不会真正向着底部或者顶部对齐,因为总会有一个padding的间隙,同时,这个特性不能被继承。当图片和文字相邻放置时,一般为图片添加vertical-align:middle.否则垂直方向有时候会出现意想不到的效果。

还有一些伪类::first-letter;:first-line;

列表相关的属性主要包括:

list-style-type;list-style-position;list-style-image;

 

二、css控制marging,padding,和border

 

1,行内盒子,块级盒子及其他

web浏览器把每一个标签就当做盒子处理,有两种盒子类型:block box(块级盒子),inline box(行内盒子),他们分别对应于两种标签类型:块级标签,和内连/行内标签。

块级标签:

,,

,,列表
"brand"> "price">
table1
brandbrand
chicken34
duck23

 

一般情况下并不需要用到上述所有标签,但是这些标签提供了许多有用的“钩子”。

1)padding属性不能被继承,因此给

标签设置paddding没有意义。可以给td或者th设置padding.

2)表格单元中元素的居中可以采用

 

text-align:left/right/center(可以被继承)
vertial-align:bottom/top/middle/baseline(不能被继承)

 

2)浏览器一般会在表格的单元之间插入间隔,如果将border-sapcing属性值设置为0移除这部分多余的空间,那么在相邻边框接触的地方就会出现双边框线,border-collapse:separate/collapse,其中,collapse属性可以解决这个问题,并消除表格间的间隔,此时border-sapcing将不起作用。

 

六:css装饰表单

常见的表单元素有:

fieldset;legend;这两个元素用来集中相关的表单问题,lengend会为一组域提供标签;
text fields(文本域):包括input[type=text],input[type=password],textarea 大部分css属性都可以用来修饰这些元素
buttons(按钮):input[type=submit] 大部分css属性都可以用来修饰这些元素
下拉菜单:select,浏览器自带的select一般有默认的样式,能够更改的程度有限,如果想要更大程度的改变下拉菜单的样式,可以使用ul列表来自定义下拉菜单
复选框和单选框:大部分浏览器不允许对这些元素设定格式

在表单布局中有以下几点值得注意:

1)表单元素一般和label结合使用,其for属性指向对应元素的id,checkbox,radio一般作为label的子元素存在,此时能够扩大对应字段获取焦点的区域(这点在有些布局中很有用);其他表单元素则一般与label平级

2)表单布局中可以借助table

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/bobodeboke/p/4485368.html

你可能感兴趣的:(前端)