前端开发之初探二

Css（cascading style sheet）层叠样式表：修饰网页信息的显示样式。

渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级（graceful degradation）：一开始就构建完整的功能，然后在针对低版本浏览器进行兼容。

 

1、css 基本语法及引入方式

基本语法：选择符{属性：属性值；}

引入方式：

（1）、内联样式：<标签    style=“属性:属性值;属性:属性值;”></标签>。

（2）、内部样式：通过在 head 标签中添加<style type=“text/css”>css语句</style>

（3）、外部样式：

通过 <link rel=“stylesheet” type=“text/css” href=“目标文件路径及文件名全称”/>

通过<style type=“text/csss”>@import url(目标文件路径及文件名全称);</style>

link和import导入外部样式的区别：

差别1：老祖宗的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS。

差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。

差别3：兼容性的差别。：@import是CSS2.1提出的，所以老的浏览器不支持，@import只在IE5以上的才能识别，而link标签无此问题。

差别4：使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

样式表的优先级：内联样式表的优先级别最高，内部样式表和外部样式表的优先级跟书写的顺序有关。 

样式的优先级：!important（有兼容）比内联样式优先级高；优先级就近原则，样式定义最近者为准；以最后载入的样式为准;

 

2、css 选择器及权重计算方法

常用的选择符有十种左右：类型选择符，id选择符，class选择符，通配符，群组选择符，包含选择符，伪类选择符，伪对象选择符、字选择符、通配符。

css中用四位数字表示权重，权重的表达方式如：0，0，0，0

子选择符的权重为0000、继承样式的权重为0000、类型选择符的权重为0001

class选择符的权重为0010、属性选择符的权重为0010、伪类选择符的权重为0010

伪元素选择符的权重为0010、id选择符的权重为0100、内联样式的权重为1000

包含选择符的权重：为包含选择符的权中之和、群组选择符的权重为它们各自本身的权重

正常顺序为：a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；

 

3、css 样式重置 reset

由于个版本浏览器具有差异化，为了便于样式统一，采用 css reset。会对搜索引擎优化造成小影响。

normalize.css保护了元素有价值的默认值，修复了常见的bug，未使用大段的继承链、模块化的、拥有详细的文档。

normalize.css支持包括手机浏览器在内的超多浏览器，同时对HTML元素，排版，列表，嵌入的内容，表单和表格都进行了一般化。尽管这个项目进行了一般化的原则，但我们还是在合适的地方使用了更实用的默认值。

 

4、css 盒模型  

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。

盒子的实际大小（标准盒模型）：

宽 =左右margin+左右border+左右padding+width

高 =上下margin+上下border+上下padding+height

盒子的实际大小（IE盒模型）：

宽 =左右margin+width

高 =上下margin+height

 

5、css 定位浮动

position：static /absolute/relative/fixed

float：right/left;

绝对定位和相对定位的区别

1、参照物不同绝对定位的参照物是包含块，相对定位的参照物是元素本身位置；

2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序,无论是否进行移动，元素仍然占据原来的空间。

 

6、css 背景

插入图片：属于网页内容，也就是结构。

背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。

背景图的固定

语法：选择符{background-attachment:scroll(滚动)/fixed(固定);}

背景属性的缩写语法：background:属性值1   属性值2   属性值3；

背景缩写：background: url（背景图片的路径及全称） no-repeat center top；

 

7、元素类型的转换

盒子模型可通过display属性来改变默认的显示类型

1）display属性与属性值 (18个属性值)

属性值：block/inline/inline-block/none/list-item/table-header-group/table-footer-group

作用：该属性设置或检索对象元素应该生成的盒模型的类型。

说明：各属性值的作用

1)block块状显示：类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。

2)inline内联显示：在元素后面删除换行符，多个元素可以在一行内并列显示。

3)inline-block行内块元素显示：元素的内容以块状显示，与行内的其他元素显示在同一行。（只有这一个元素类型支持vertical-align属性）img,input。

4)none 此元素不会被显示。

5)list-item:将元素转换成列表。li的默认类型。

说明：

1、大部分块元素display属性值默认为block，其中列表的默认值为list-item。

2、大部分内联元素的display属性值默认为inline,其中img,input，默认为inline-block。

3、设置了float属性后，元素自动转换块元素，体积与内容同宽；

 

8、css 文本，字体

为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小默认值,即1em.默认情况下，1em=16px,0.75em=12px;

倾斜：font-style：italic(倾斜度小)/oblique（倾斜度大）/normal（取消倾斜，常规显示）;

说明：italic和oblique都表示倾斜，不过oblique的幅度要大一点，但一般浏览器对它们的区分不是很明显。

水平对齐方式{text-align:left/right/center/justify（两端对齐中文不起作用）;}

垂直对齐方式{vertical-align:top/bottom/middle;}

文本字体：{font-family:字体1，字体2，字体3；}

当字体是中文字体时，需加双引号；"微软雅黑"，"宋体"

当英文字体中有空格时，需加双引号如（“Times New Roman”）

当英文字体只有一个单词组成是不加双引号；如：（Arial）；

Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.

font属性的简写：

说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)

顺序: font-weight | font-size / line-height | font-family

(1)简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。

(2) 顺序不能改变 ,这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,你没有设定font-weight 他们会使用缺省值。

文本修饰：text-decoration:none/underline/overline/line-through/blink.(高版本浏览器不支持blink属性)

首行缩进：{text-indent:value;}
说明：

1）text-indent可以取负值；

2）text-indent属性只对第一行起作用。

字间距{letter-spacing:value;}控制英文字母和汉字的字距。（英文字母和字母）
词间距{word-spacing:value;}控制英文单词词距。（通用于英文词和词之间的间距）

文本流控制{layout-flow:horizontal/vertical-ideographic;}（只支持IE浏览器） 
说明：

1）horizontal:自左向右

2）vertical-ideographic:自上而下

关于溢出:

1)溢出属性（容器的）

overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;

visible:默认值，内容不会被修剪，会成现在元素框之外；

hidden：内容会被修剪，并且其余内容是不可见的；

scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;

auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;

inherit：规定应该从父元素继承overflow属性的值。

2)空余空间

white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit

该属性用来设置如何处理元素内的空白；

normal：默认值，空白会被浏览器忽略，

pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签；

nowrap:文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止；

pre-wrap：保留空白符序列，但是正常的进行换行；

pre-line:合并空白符序列，但是保留换行符；

inherit：规定应该从父元素继承White-space属性的值；(ie浏览器都不支持此属性值)

3)文本溢出:text-overflow:clip/ellipsis

取值：

clip：不显示省略号（...），而是简单的裁切;

ellipsis：当对象内文本溢出时，显示省略标记；

说明：

text-overflow属性仅是...，当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：

1、容器宽度：width：value；

2、强制文本在一行内显示:white-space：nowrap;

3、溢出内容为隐藏：overflow：hidden；

4、溢出文本显示省略号：text-overflow：ellipsis;

 

9、 css 列表，表单，表格

ul 无序列表、ol 有序列表、dl 自定义列表

定义列表符号样式：

list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；

使用图片作为列表符号：

list-style-image：url(所使用图片的路径及全称)；

定义列表符号的位置：

list-style-position:outside(外边)/inside(里边)；

list-style:none;去掉列表符号

表单

1)表单字段集

<fieldset></fieldset>

功能：相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。

fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。

2)字段级标题

<legend></legend>

功能：legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素。 

3)提示信息标签

<label for="绑定控件id名"></label>

功能：label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。

表格高级

1、表格的作用：显示数据;

（一）关于表格的CSS属性

1、单元格间距(该属性必须给table添加)

border-spacing:value;

2、合并相邻单元格边框

border-collapse:separate(边框分开)/collapse(边框合并)；

3、无内容单元格显示、隐藏

empty-cells:show/hide;

4、表格布局算法(加快运行的速度)

table-layout:auto/fixed(固定宽高，不会随内容多少改变单元格宽高)

5、表格标题

<caption>标题内容</caption>

caption:表格标题

表格标题位置：caption-side:top/right/bottom/left

说明：left,right位置只有火狐识别，top,bottom IE6以上版本支持，ie6以下版本不支持其它属性值，只识别top;

6、表格布局元素

1、表格基本组成

table（表格）      tr（行）      td（列）

th:表格列标题（放在tr里）

重要属性：

1）colspan="value"    合并列

2）rowspan="value"  合并行

3）valign="top/bottom/middle/baseline" 垂直对齐方式 

４）rules="groups/rows/cols/all/none"    添加组分隔线

说明：

rows:位于行之间的线条

cols:位于列之间的线条

all：位于行和列之间的线条

none:没有线条

groups:位于行组和列组之间的线条

2、数据行分组

<thead></thead>      表头

<tbody></tbody>      表体

<tfoot></tfoot>         表尾

说明：一个Table中，只能包含一个thead,一个tfoot,但可包含多个tbody。

3、数据列分组

<colgroup span="value"></colgroup>

<col  span="value" />

说明：

1）col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。

2）span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组。

3）可以通过给table添加rules="groups"属性来给分组列添加组分割线。

注意：虽然col和colgroup具有相同的功能，但是，我们只能使用colgroup元素来决定表格内容部分分割线（rules）应该处于的位置，而col没有这个功能。

 

10、css3新增透明属性

语法 ：background:rgba(value,value,value,value);

说明：前三个值是RGB的颜色值，最后一个是透明的数值。

 CSS3新增伪类举例：

    p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

    p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

    p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

    p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。

    p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

    :enabled、:disabled 控制表单控件的禁用状态。

    :checked，单选框或复选框被选中。

11、css unicode

&gt;      >

&lt;      <

&nbsp；

&copy；

&amp；

 

12、Flash和marquee(滚动字幕)

1、插入flash

1）语法：

<object width="value" height="value">
<param name="movie" value="flash路径及全称" />
<embed width="value" height="value" src="flash路径及全称"></embed>
</object>

说明：flash源文件格式.fla,

导出影片为.swf,

创建播放器格式为.exe.

gif格式：.gif

2）将flash背景设置为透明

<param name="wmode" value="transparent" />

给<embed>标记添加属性：wmode="transparent"

 

13、伪对象选择符：

1）:after与content属性一起使用，定义在对象后的内容。

如：div:after{content:url(logo.jpg);}

      div:after{content:"文本内容";}

2）:before与content属性一起使用，定义在对象前的内容。

如：div:before{content:"在其前放内容";}

3）、：first-letter定义对象内第一个字符的样式。

说明：(该伪元素只能用于块级元素。)

4）、：first-line:定义对象内第一行的样式。

说明：

*(该伪元素只能用于块级元素。)

*ie6以下版本浏览器不支持伪对象选择符。

*visibility:hidden/visible;隐藏/可见

*visibility:hidden;和display:none;的区别：

visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失。