css选择器、可视化格式模型、背景图像效果、对链接应用样式、对表单和数据表格应用样式等知识讲解
一、选择器
1、类型选择器(元素选择器)
2、后代选择器
3、id选择器
4、类选择器
5、伪类选择器
6、通用选择器 *:选择一个元素的所有后代
7、子选择器 #nav>li:只选择后代的直接后代,即子元素
8、相邻同胞选择器h2+p:定位同一个父元素下某个元素之后的元素
9、属性选择器a[rel="nofollow"]:根据某个属性是否存在或属性的值来寻找元素
二、可视化格式模型
1、外边距叠加:外边距的高度等于两个发生叠加的外边距的高度中的较大者
只有普通文档流中的块级的垂直外边距才会发生外边距叠加;行内框、浮动框或绝对定位框之间的外边距不会叠加;
2、修改行内框尺寸的唯一办法是修改行高或者水平边框、内边距或外边距
3、inline-block:让元素像行内元素一样水平地依次排列,框的内容仍符合块级框的行为
4、相对定位:元素相对于它的起点移动
使用相对定位,无论是否移动,元素仍然占据原来的空间。因此,元素会导致其覆盖其他框。是普通流定位模型的一部分。
5、绝对定位:相对于距离它最近的那个已经定位的祖先元素确定的,若不存在,那么相对于初始包含块
绝对定位使元素的位置与文档流无关,因此不占据空间。可以覆盖页面上的其他元素。通过设置z-index控制叠放次序,值越大,框在栈中的位置越高。
相对于已相对定位的祖先元素对框进行绝对定位。
6、浮动:浮动会让元素脱离文档流,不再影响不浮动的元素
clear:right/left/both/none 表示行框的哪些边不应该挨着浮动框
overflow:hidden/auto 包含的内容对于指定的尺寸太大的情况下元素应该怎样;会自动清理包含的任何浮动因素
三、背景图像效果
1、h1{background:#ccc url(/img/bullet.gif) no-repeat left center}
2、box-shadow:垂直和水平偏移、投影的宽度(模糊程度)、颜色
3、box-radious
4、opacity:0.8 除了对背景生效之外,应用它的元素的内容也会继承它
rgba(0,0,0,0.8)则不会
四、对链接应用样式
1、:link 没有被访问过的链接
:visited 被访问过的链接
:hover 鼠标悬停处的元素
:active 被激活的元素(链接被单击时)
:focus 通过键盘移动到链接上时
text-decoartion:none/underline
定义的次序非常重要 lvhfa
2、:target 为目标元素设置样式
3、inline-height 文本垂直居中
4、text-index 文本块中首行文本的缩进
五、对列表应用样式和创建导航条
1、list-style-image 项目符号
2、cursor 鼠标光标
3、:before :after伪选择器 content属性
六、对表单和数据表格应用样式
1、<caption> 表格的标题 summary:属性,表格标签,用来描述表格内容
2、<thead>所有列标题 <tfoot><tbody>
前两个在一个表格中只能各使用一次,但后一个可以使用多次,且如果使用了前两个,后一个必须出现一次
3、<th>行标题、列标题 <td>既是内容又是数据
[css] view plain copy
<thead>
<tr>
<th>one</th>
<th>two</th>
</tr>
</thead>
4、<colgroup><col>对一个或多个列定义和分组
5、boder-collapse:collapse/seperate
6、<fieldset>对相关的信息块进行分组 <legend>fieldset的标题
7、<lable>有意义的描述性标签
8、将标签与表单控件关联起来:
隐式:把表单元素嵌套在lable元素中
[css] view plain copy
<lable>email<input name="email" type="text"/><lable>
显示:把lable的for属性设置为相关联的表单元素的id名称
[css] view plain copy
<lable for="email">email<lable>
<input name="email" id="email" type="text"/>
9、<em><strong> 可以用来显示提示信息