工作小结,以资备忘。
HTML、CSS小结
html中的元素分为块元素和行元素,块元素会在元素的末尾添加一个换行(这个换行是浏览器添加的),它后面的元素会布局在到下一行的位置,块元素的例子有div、p、fieldset等。与块元素不同,行元素则不会在末尾追加换行,它后面的元素会追加在它之后,行元素的例子有input、span、a等。元素的类型可通过设置其display属性来修改。
在CSS和HTML中,所有有元素都是框结构,如下。
要实现两个或更多个块元素在同一行上显示,可使用float属性。元素一旦使用float属性,它便从普通流中脱离出来了,为了阻止它后面的元素占用它的位置或是上浮,
可 能通过新加一个div元素,并设置其clear属性为“both”来实现。
通过style、class和id 属性来在元素上应用CSS。
不要在什么地方都用div。它只是用来构建块结构的。比如,在一个fieldset外围加一层div就没有必要,因为fieldset本身就是一个块。
如果发现某一个属性,比如height在一个元素上应用没用效果,可查看此元素的属性列表,很有可能是此元素不能显式设置这个属性,但它一定支持id、class、style
属性,通过这些CSS可以实现元素的相关属性。
CSS选择器:
后代选择器:lia{..}
组合选择器: #maincontent h1 {…}
伪类选择器:a:link{… }
通用选择器:* { … }作用域最广,使用最少。
子选择器: #nav > li { … }
相邻同胞选择器:h1 + p { … }
属性选择器: abbr[title]{ … }
abbr[title]:hover{… }
a[rel=”nofollow”]{… }
特殊性:form{ width:30em;}
Form #search{ width:15em;}
继承:
body{… }
则 p、div、h1、 h2笔元素都会继承body的CSS设置。
样式覆盖:
#content{ … }
.homepage #content{ … }
#nav {… }
.homepage #nav{ … }