CSS--属性 css属性键值对,property:value。主要是一下几类:
文字相关属性:控制文字的字体,颜色,修饰,阴影等属性。 font-family 设置字体类型,如"Arial"、"宋体"等
font-size 设置字体大小,常用度量单位pt和px
font-style 设置字体风格,可选值normal, italic和oblique
font-weigh 设置字体“重量”,常用值为normal和bold
font 综合设置上述各种字体属性
段落相关属性:控制整个段或者div的显示效果,包括文字的缩进,文字的对齐方式。 text-align 设置文本对齐方式,可选值left,center,right,justify
text-indent 设置首行缩进,其值可采用绝对或相对的长度单位及百分比
line-height 设置行高,其值可采用绝对或相对的长度单位及百分比
letter-spacing 设置字符间距,其值可采用绝对或相对的长度单位
color 设置文字颜色
背景相关属性:控制背景色,背景图片等属性。 表格相关属性:控制表格的外观。 大小相关属性:控制目标对象的长,宽,最小长度,宽度等属性。 在CSS样式表中,长度单位分为两类:
位置相关属性:控制目标对象的位置,包括是否悬浮于页面上。这里有必要说下这类相关属性,其实这就是css的定位机制。 文档流
行框:按顺序水平摆放,放不下出现滚动条
块框:按顺序垂直摆放,放不下出现滚动条
1,相对定位,原来在文档流中的位置仍然保留,当前位置是相对于原始位置偏移后的结果。
position: relative;#pos {position: relative;top: 5px;left: 55px;}
2,绝对定位 position: absolute;
从文档流中删除其原来的位置,就好像该元素从来都不存在一样。它当前所处的位置如果和其他元素重合则会遮盖住其他元素的显示,这就是 CSS 中层的概念。当前位置的定位有两种情况:
①父容器以及祖先容器未定位:相对于浏览器左上角
#pos {position: absolute;top: 0px;left: 0px;}
②存在已定位的祖先元素:相对于最接近的已定位的祖先元素
#pos {position: absolute;top: 30px;left: 100px;}#test {position: absolute;top: 5px;left: 20px;}
3,浮动:脱离文档流,向上浮起一层,所有同一容器内的浮动元素根据 float 属性值按顺序进行排列,例如如果都是 float:left 则按从左向右的顺序排列。也会遮盖住文档流中未浮动的正常元素。
div {border-style: solid;border-width: 1px;border-color: black;width: 50px;height: 50px;margin-right: 5px;float: left;}
边框相关属性:设置目标对象的边框特征,包括颜色,粗细,以及使用的线型。 轮廓相关属性:用于让目标对象周围产生一圈光晕,这圈光晕不会占用页面实际的物理布局。通过轮廓相关属性,可设置该光晕的颜色,线宽,线型。
块元素和行元素: HTML元素按其显示方式可分为“块级”(block)元素和“行内”(inline)元素两种:
块级元素: 前后换行、可设定块大小(宽度和高度)、块的定位、块边框、块间距、块内和块边框间空隙等。如body,p,tr,td,div等。
行内元素: 位于当前行中,前后不换行,不单独定位。如span元素。
一段文字中的一部分显示效果有所不同,可以采用span元素来实现
可以使用CSS的display属性设置/修改元素的显示方式,其常用属性取值为:block、inline和none
以上这些属性我们大概知道就OK了,具体的相关属性翻ipa文档就好了,如下图。
特别介绍3个常用的属性 1,display,用于设置目标对象是否以及如何显示。该属性的常用值是none,用于设置目标对象隐藏,一旦这个对象隐藏,其占用的页面空间也会释放。如果没有为该属性指定值,目标对象就会显示出来。这个还是比较常用的,一般的我们在页面上控制一部分页面的显示和隐藏,一般都是如下设置;
显示:document.getElementById('id').style.display='' ;隐藏:document.getElementById('id').style.display='none' ;
2,visibility,用于设置目标对象是否显示。与display不同的是,通过该属性隐藏某个html元素后,该元素占用的页面空间会被依然保留,不会被释放。该属性的2个常用值是:visible和hidden,分别用于控制对象的显示和隐藏。
显示:document.getElementById('id').style.visibility='visible' ;隐藏:document.getElementById('id').style.visibility='hidden' ;
3,cursor,用于设置目标对象上光标的形状。该属性常用的值auto(自动光标),crosshair(十字线光标),default(客户端光标),hand(手形光标),move(十字箭头光标),help(带问号的帮助光标),text(文本光标),wait(沙漏光标),url(自定义光标)。比如: