欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css选择器、可视化格式模型、背景图像效果、对链接应用样式、对表单和数据表格应用样式等知识讲解

程序员文章站 2022-06-10 15:41:45
一、选择器 1、类型选择器(元素选择器) 2、后代选择器 3、id选择器 4、类选择器 5、伪类选择器  6、通用选择器 *:选择一个元素的所有后代 7、子...

一、选择器

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> 可以用来显示提示信息