前端开发之初探二

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" 垂直对齐方式 

4)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属性会使这个对象彻底消失。

原文地址:https://www.cnblogs.com/wmwPro/p/5693833.html