首页 > 代码库 > css基础

css基础

css基础

1、 Css新建格式

Css语法:

选择符{属性名称:属性值;}

 

1、内部样式表(嵌套到页面中)

     语法:

<style type="text/css">

     css语句

</style>

注:使用style标记创建样式时,最好将该标记写在<head></head>;

2、内联样式(行间样式,行内样式,嵌入式样式)

    语法:

<div style="属性1:1;属性2:2;属性3:3;……"> </div>

3、引用外部样式表文件

   (1)  语法:

<link href="http://www.mamicode.com/目标文件的路径及文件名全称"

rel="stylesheet" type="text/css"  />

说明:使用link元素导入外部样式表时,需将该元素写在文档头部,即<head></head>之间。

      hrefcss文件的路径及文件名全称

      rel:用于定义文档关联,表示关联样式表;

      type:定义文档类型;

(2)、导入外部样式表

<style type="text/css">

@import  url("目标文件的路径及文件名全称");

</style>

说明:@import之间没有空格 url和小括号之间也没有空格;括号内部加引号,必须结尾以分号结束;

 

4css样式表的优先级

内联样式表的优先级别最高

内部样式表与外部样式表的优先级和书写的顺序有关,后书写的优先级别高。

2css基础语法

CSS语法由两部分组成:选择符、属性

选择符 {属性: 属性值 }   p { color: #ff0000;font-size:12px}

 

6CSS选择符包括4大类:类型选择符、id选择符、class选择符、和特殊选择符;

常用的选择符有十种左右,Css选择符分类:

类型选择符(标记选择器),类选择符 (class选择符),ID选择符 (id选择器),伪类选择器,群组选择符(集合选择器),通配符(*,伪对象选择符

包含选择符(后代选择器)

 

类型选择符(标记选择器):类型选择符就是以文档对象类型的元素作为选择符,即是用结构中元素名称作为选择符。例如bodydivp,img,em,strong,span......等。

类选择符 class选择符):类选择器使用必须要引用才能生效,语法:.class{属性:属性值;}      

类别选择器说明:

(1)当我们使用类选择符时,应先为每个元素定义一个类名称,

(2)类选择符的语法格式:

        如:<div class="top"></div>

 用法:class选择符更适合定义一类样式;

ID选择符:语法:#id名{属性:属性值;}

说明:

1)可以给每个元素使用id选择符,但id是元素的唯一标识符,不可出现重复的id名;

      如:<div id="top"></div>

2id选择符的语法格式是“#”加上自定义的id

      如:#box{width:300px; height:300px;}

 (3) 起名时要取英文名,不能用关键字:(所有的标记和属性都是关键字)

      如:head标记

 (4)一个id名称只能在文档中出现一次,因为id是唯一的

 (5) 最大的用处:创建网页的外围结构。

通配符*):语法:*{属性:属性值;}

说明:通配选择符的写法是*”,其含义就是所有元素;表示该样式适用所有网页元素;

用法:常用来重置样式。

群组选择符(集合选择器):语法:选择符1,选择符2,选择符3{属性:属性值;}

说明:当有多个选择符应用相同的样式时,可以将选择符用“,”分隔的方式,合并为一组。   做页面居中设置 :选择符{margin:0 auto;}

包含选择器(后代选择器):

语法:选择符1  选择符2{属性:属性值;}

选择符父级  选择符子级{属性:属性值;}

子代选择器 语法: 选择符父级>选择符子级{属性:属性值;}(子代选择器只能写两輩,多余两輩无效)

说明:选择符1和选择符2用空格隔开,含义就是选择符1中包含的所有选择符2;

伪类选择器:

a:link {color: #FF0000}          /* 未访问的链接 */

a:visited {color: #00FF00}     /* 已访问的链接 */

a:hover {color: #FF00FF}  /* 鼠标移动到链接上 */

a:active {color: #0000FF}   /* 选定的链接 */

说明:

1)当这4个超链接伪类选择符联合使用时,应注意他们的顺序,正常顺序为:

aa:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效;

2)为了简化代码,可以把伪类选择符中相同的声明提出来放在a选择符中;

例如:a{color:red;}     a:hover{color:green;} 表示超链接的三种状态都相同,只有鼠标划过变颜色。

 

属性

描述

CSS

:active

向被激活的元素添加样式。

1

:focus

向拥有键盘输入焦点的元素添加样式。

2

:hover

当鼠标悬浮在元素上方时,向元素添加样式。

1

:link

向未被访问的链接添加样式。

1

:visited

向已被访问的链接添加样式。

1

:first-child

向元素的第一个子元素添加样式。

2

:lang

向带有指定 lang 属性的元素添加样式。

2

 

 

 

 

 

 

 

 

属性选择器:

语法: [属性符]{属性:属性值;}

例如:[alt]{color:blue;} 或者:img[alt][id]{color:green;}或者img[alt][id=”type1”]{color:green;}

相邻兄弟选择器:

语法:td+td{属性:属性值;} 或者:.tag01+.tag02{属性:属性值}

 

7 选择符的权重:

css中用四位数字表示权重,

权重规则:HTML标签的权重是1,class的权重是10,id的权重是100。

权重的表达方式如:0,0,0,0;

类型选择符的权重为0001

class选择符的权重为0010

id选择符的权重为0100

子选择符的权重为0000

属性选择符的权重为0010

伪类选择符的权重为0010

伪元素选择符的权重为0010

包含选择符的权重:为包含选择符的权重之和

内联样式的权重为1000

继承样式的权重为0000

群组集合权重为他本身

当不同选择符的样式设置有冲突的时候,高权重选择符的样式会覆盖低权重选择符的样式。

例如:b.demo的权重是1+10=11。

相同权重的选择符,样式遵循就近原则:哪个选择符最后定义,就采用哪个选择符样式。(注意:是样式中定义该选择符的先后,而不是html中使用先后)

 

ps软件学习

常用快捷键:

1)c  裁剪、 m  选框、i  吸取、h 抓手、z 缩放、x 前景和背景切换、f  屏幕模式的切换、

2)ctrl+s 保存、ctrl+shift+s  另存、 ctrl+z  返回上一步、 ctrl+t 自由变换、 ctrl+c 复制、ctrl+v 粘贴、ctrl+n 新建文件

 

8 css常用属性

标签:

字体{font-family:”宋体”,”黑体”;}  字体大小{font-size:px/cm/% ;}

字体加粗:{font-weight:bold;}      颜色{color: ;}  

水平排列{text-align:center/left/right;}

缩进{text-indent:*px/*cm;}

行高{line-height:*px;}    

边框{border/border-bottom/border-top/border-left/border-right:  ;solid(边框形式): ;}

{border-color: ;border-width: ;border-style:solid/dashed/double;}

下划线{text-decoration:none/underline/overline/line-through);}

超链接鼠标放上去颜色改变a:hover{color: ;}

列表横向排列{list-style-type:none;}

背景色{background-img:url(地址)}

背景平铺属性{backgroun-repeat:no-repaet/repaet-x/repaet-y;}

图片不随滚动轴滚动{backgroun-attachment:fixed/scroll;}

设定图片位置{backgroun-position:top left/bottom left/center/left;}

注意:长度单位(length)有绝对单位cm/nm/in/pt/pc,相对单位em/ex/px

padding{上 右 下 左 }

HTML 块元素 和 内联元素

1HTML 块元素

大多数 HTML 元素被定义为块级元素内联元素

“块级元素”译为 block level elementDisplay:block;

“内联元素”译为 inline elementDisplay:inline;

块级元素在浏览器显示时,通常会以新行来开始(和结束)。

例子:divH1Pformtableulpre

2HTML 内联元素

内联元素在显示时通常不会以新行开始。

例子:span,a,strong, em, input ,select,textarea, img ,br

 

 

3CSS常用样式

width:设置宽度,单位px像素

height:高度

line-height:行高

可用来设置垂直居中,单位为px/em/%200%可简写为2,一般为1.5或者1.8

color:前景色,也就是文字的颜色

background-color:背景色

font-size:字体的大小

4CSS 颜色

颜色的三种表达方式:

十六进制 如:color:#ff0000

颜色名称 如:color:red

三原色单位   如:rgb(255,0,0)

一般最常用的是十六进制,三原色单位的原理【红(r,绿(g,(b)】混合而成。每个值域在0255之间。

5CSS 长度

长度的三种表达方式:

px  如:width: 200px;(像素计算机屏幕上的一个点)

em 如:line-height: 2em;(2em 等于当前字体尺寸的两倍)

rem 是相对于根元素大小 (移动端推荐使用)

 

6图片类型

网页上常用的图片格式(压缩图片)

1)jpg:有损压缩格式,靠损失图片本身的质量来减小图片的体积,适用于颜色丰富的图像;(像素点组成的,像素点越多会越清晰 )

2)gif:有损压缩格式,靠损失图片的色彩数量来减小图片的体积,支持透明,支持动画,适用于颜色数量较少的图像;

3)png:有损压缩格式,损失图片的色彩数量来减小图片的体积,支持透明,不支持动画,是fireworks的 源文件格式,适用于颜色数量较少的图像;

 

 

1、背景色(background-color

2、背景图像(background-image

背景图片的显示原则

        1)容器尺寸等于图片尺寸,背景图片正好显示在容器中;

        2)容器尺寸大于图片尺寸,背景图片将默认平铺,直至铺满元素;

        3)容器尺寸小于图片尺寸,只显示元素范围以内的背景图。

 

3、背景重复(background-repeat

在页面上对背景图像进行平铺

描述

repeat

默认。背景图像将在垂直方向和水平方向重复。

repeat-x

背景图像将在水平方向重复。

repeat-y

背景图像将在垂直方向重复。

no-repeat

背景图像将仅显示一次。

 

4、背景定位(background-position)改变图像在背景中的位置

值有三种方式:

A.关键字:

单一关键字

等价的关键字

center

center center

top

top center 或 center top

bottom

bottom center 或 center bottom

right

right center 或 center right

left

left center 或 center left

B.百分数值:

   C.长度值:

设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上:

4、背景关联(background-attachment)

如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。

描述

scroll

默认值。背景图像会随着页面其余部分的滚动而移动。

fixed

当页面的其余部分滚动时,背景图像不会移动。

 

5、背景尺寸(Background-size

数值、百分比(根据高度覆盖、易变形)、cover(根据高度覆盖、不易变形)、contain(不变形、易留空白)

总结:CSS 背景属性

属性

描述

background

简写属性,作用是将背景属性设置在一个声明中。

background-attachment

背景图像是否固定或者随着页面的其余部分滚动。

background-color

设置元素的背景颜色。

background-image

把图像设置为背景。

background-position

设置背景图像的起始位置。

background-repeat

设置背景图像是否及如何重复。

如何在一个声明中设置所有背景属性:

背景缩写:

background: #0FF2F0 url(../img/7.jpg) no-repeat center;

 

 

 

 

7CSS 字体

1CSS 字体系列(font-family)

{ font-family: 字体1,字体2}

body {font-family: "微软雅黑","宋体";}

浏览器首先会寻找字体1、如存在就使用,如果不存在,则寻找字体2,如字体2也不存在则按系统默认字体显示;

当字体是中文字体时,需加双引号;

当英文字体中有空格时,需加双引号如(Times New Roman”)

当英文字体只有一个单词组成是不加双引号;如:(Arial);

Windows中文版本操作系统下,中文默认字体为宋体或者新宋体,英文字体默认为Arial,新推出的版本也默认为微软雅黑。

 

2、字体风格( font-style  )

最常用于规定斜体文本

该属性有三个值:

normal - 文本正常显示

italic - 文本斜体显示

oblique - 文本倾斜显示

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

 

3、字体加粗( font-weight )

设置文本的粗细

{ font-weight:bolder/bold/normal/100900; }

bolder(更粗的)/bold(加粗)/normal(常规)

字体的粗细分为9个等级,分别为100——900,其中100对应最轻的字体变形,而900对应最重的字体变形,一般400常规字体,600-900加粗字体

 

4、字体大小( font-size )

设置文本的大小

a、使用像素来设置字体大小

b、使用em表示元素字体高度,em值是根据父元素值来确定。

5、字体颜色(color

6、字体变形( font-variant )

可以设定小型大写字母

{ font-variant:normal(正常的字体)/small-caps(小型的大写字母字体)/inherit(规定继承父元素属性值) }

小型大写字母不是一般的大写字母,也不是小写字母,这种字母采用不同大小的大写字母。

 

字体属性学习大纲

属性

描述

font-family

设置字体系列。

font-size

设置字体的尺寸。

font-style

设置字体风格。

font-variant

以小型大写字体或者正常字体显示文本。

font-weight

设置字体的粗细。

 

 

8CSS 文本

一、缩进文本(text-indent

注意:一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素。

1、单位em/px

2、使用负值

p.indent{text-indent: -2em;}

3、使用百分比值,百分数相对于缩进元素父元素的宽度。

4、继承,该属性可以继承

 

二、水平对齐(text-align

元素中的文本行互相之间的对齐方式

text-align: center;     text-align: right;

按单词换行

word-wrap: normal|break-word;

描述

normal

只在允许的断字点换行(浏览器保持默认处理)。

break-word

在长单词或 URL 地址内部进行换行。

 

word-wrap:break-word;

三、字间隔(word-spacing

改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的,只对英文有效,对中文无效。

四、字母间隔(letter-spacing

字母间隔修改的是字符或字母之间的间隔,对英文和中文都有效。

 

五、字符转换(text-transform

 属性处理文本的大小写。这个属性有 4 个值:

  • none  uppercase(大写)  lowercase(小写)  capitalize (首字母大写)

六、文本装饰(text-decoration

text-decoration 有 5 个值:

none   underline   overline    line-through   blink

七、处理空白符(white-space 

空白符

换行符

自动换行

pre-line

合并

保留

允许

normal

合并

忽略

允许

nowrap

合并

忽略

不允许

pre

保留

保留

不允许

pre-wrap

保留

保留

允许

四、CSS区块、浮动、定位、溢出、滚动条

1CSS区块

属性名称

属性值

说明

width

像素/百分比 auto

 

height

像素/百分比 auto

 

min-hieght

像素/百分比 auto

 

max-height

像素/百分比 auto

 

min-width

像素/百分比 auto

 

max-width

像素/百分比 auto

 

2CSS中浮动的使

 

 

1>、元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,移动到其父元素中指定位置的过程。

CSS中,通过float属性来定义浮动,其基本语法格式如下:

选择器{float:属性值;}

属性名称

属性值

说明

float

none

正常显示

left

左浮动

right

右浮动

clear

none

允许两边浮动

left

不允许左边浮动

right

不允许右边浮动

both

不允许两边浮动

 

2>、浮动的特性

1.浮动脱离标准流,不占位置,但会影响标准流。浮动只有左右浮动。

2. 浮动的元素A排列位置,跟上一个元素(块级)有关系。如果上一个元素有浮动,则A元素顶部会和上一个元素的顶部对齐;如果上一个元素是标准流,则A元素的顶部会和上一个元素的底部对齐。

3.一个父盒子里面的子盒子,如果其中一个子级有浮动的,则其他子级都需要浮动。这样才能一行对齐显示。

4.浮动根据元素书写的位置来显示相应的浮动。

5. 元素添加浮动后,如果没有设置宽高的话,元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少。也就是具有了包裹性。

6.浮动具有破坏性,元素浮动后,破坏原来的正常流布局,造成内容塌陷。如果一个标准流中的盒子所有的子元素都进行了浮动,而且盒子没有设置高度,那么父容器整个高度会塌陷。

3>、清除浮动

方法一:使用空标记清除浮动。  
<div style=“height:0px; clear:both;”></div>

方法二:使用after伪对象清除浮动。 (推荐)

 .clear:after{

content:””;

display:block;

clear:both;

height:0;

visibility:hidden;

}

.clearfix{

*zoom:1;

}

方法三、

overflow:hidden;

4>、overflow属性的常用值

属性名称

属性值

说明

overflow

visible

内容不会被修剪,会呈现在元素框之外(默认值)

hidden

溢出内容会被修剪,并且被修建的内容是不可见的

auto

在需要时产生滚动条,即自适应所要显示的内容

scroll

总是显示滚动条

overflow-x

同上

 

overflow-y

同上

 

 

5>、定位

CSS中,position属性用于定义元素的定位模式,其基本语法格式如下:

选择器{position:属性值;}

position属性常用值

描述

static

自动定位(默认)

relative

相对定位,相对于其源文档流的位置进行定位

absolute

绝对位置,相对于其上一个已经定位的父元素进行定位

fixed

固定定位,相对于浏览器窗口进行定位

 

元素的定位属性主要包括定位模式和边偏移两部分。

边偏移

CSS中,通过边偏移属性top、bottom、left或right,来精确定义定位元素的位置,其取值为不同单位的数值或百分比。

静态定位是元素的默认定位方式,当position属性的取值为static时,可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。在静态定位状态下,无法通过边偏移属性(top、bottom、left或right)来改变元素的位置。

固定定位是绝对定位的一种特殊形式,它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时,即可将元素的定位模式设置为固定定位。当对元素设置固定定位后,它将脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动,也不管浏览器窗口的大小如何变化,该元素都会始终显示在浏览器窗口的固定位置。IE6浏览器不支持固定定位。

z-index层叠等级属性

CSS中,要想调整重叠定位元素的堆叠顺序,可以对定位元素应用z-index层叠等级属性,其取值可为正整数、负整数和0。z-index的默认属性值是0,取值越大,定位元素在层叠元素中越居上。定义靠后的,默认在之前的元素之上。不要滥用z-index;父容器的z-index会影响子元素的层级级别。

盒模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。

CSS中边框的使用

border-colorborder-atyleborder-width

简化方案:border:形态 长度 颜色;

border-color:上 右 下 左;

CSS边界盒子模型

padding  margin

行内元素不要给上下的margin padding,上下marginpadding会被忽略。左右marginpadding会起作用。

  盒子的宽与高

使用宽度属性width和高度属性height可以对盒子的大小进行控制。

widthheight的属性值可以为不同单位的数值或相对于父元素的百分比%,实际工作中最常用的是像素值。

大多数浏览器,如FirefoxIE6及以上版本都采用了W3C规范,符合CSS规范的盒子模型的总宽度和总高度的计算原则是:

盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和

盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和

1、宽度属性width和高度属性height仅适用于块级元素,对行内元素无效(<img />标记和<input />除外)。

2、计算盒子模型的总高度时,还应考虑上下两个盒子垂直外边距合并的情况。

外边距塌陷

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。

相邻块元素垂直外边距的合并

 

 

 

定位设置

1、元素定位 position

语法:语法:positionstatic /absolute/relative/fixed

取值:

1static:默认值,无特殊定位,对象遵循HTML原则;

2absolute:绝对定位,将对象从文档流中拖离出来,使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位;如果不存在这样的父对象,则依据body对象(浏览器),而其层叠通过z-index属性定义;

3relative :相对定位,对象不可层叠,将依据righttopleftbottom(相对定位)等属性在正常文档流中偏移位置;

4fixed(固定定位)未支持,对象定位遵从绝对定位方式(absolute);但是要遵守一些规范;

绝对定位和相对定位的区别1、参照物不同,绝对定位的参照物是包含块(父级),相对定位的参照物是元素本身位置;2、绝对定位将对象从文档流中拖离出来因此不占据空间,相对定位不破坏正常的文档流顺序无论是否进行移动,元素仍然占据原来的空间。

包含块的概念及作用

包含块是绝对定位的基础,包含块就是为决定定位元素提供坐标,偏移和显示范围的参照物,即确定绝对定位的偏移起点和百分比 长度的参考;默认状态下,body是一个大的包含块。

定义元素为包含块:给绝对定位元素的父元素添加声明positionrelative

定位元素层叠属性

z-index : auto |number;   检索或设置对象的层叠顺序。

auto:默认值。遵从其父对象    number:无单位的整数值。可为负数

1)较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值,那么将依据它们在HTML文档中声明的顺序层叠。

此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象。

透明度设置

IE浏览器写法:filter:alpha(opacity=value);取值范围 1-100

兼容其他浏览器写法:opacity:  .value/0.2   (value的取值范围0-1,0.1,0.2,0.3-----0.9)

例如:opacity: .8 ; filter:alpha(opacity=80);

滚动字幕

语法: 

<marquee  behavior=scroll/alternate”  direction="up/down/left/right"

scrollamount=valueheight="value"  width="">

内容</marquee>

behavior(行为)="scroll(滚动)/alternate(晃动)

direction(方向)="up(从下向上)/down(从上向下)/left(从右向左)

/right(从左向右)“

scrollamount(滚动速度)="value"

height="value(上下滚动范围)"

width=""(左右滚动范围)

插入flash

语法:

<object width="value" height="value">

<param name="movie" value="http://www.mamicode.com/flash路径及全称" />

(其他浏览器识别)

<embed  width="value" height="value" src="http://www.mamicode.com/flash路径及全称"> </embed>   

ie浏览器识别)

</object>

flash源文件格式.fla, 导出影片为.swf, 创建播放器格式为.exe.

 

flash背景设置为透明

<param name="wmode" value="http://www.mamicode.com/transparent" />

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

 

异常处理

IE中不显示flash,可做如下操作:

A.下载安装flash player;

B.打开IE浏览器,选择工具菜单--Internet选项----安全----低。

 

滚动条

Overflow内容溢出时的设置

属性:

overflow 水平及垂直方向内容溢出时的设置

overflow-x 水平方向内容溢出时的设置

overflow-y 垂直方向内容溢出时的设置

以上三个属性设置的属性值:

visiblescrollhiddenauto

visible 默认值,其中的内容无论是否超出范围都将被显示。

hidden 效果与visible相反。任何超出“width”和“height”的内容都会隐藏。

scroll 无论内容是否超越范围,都将显示滚动条。

auto 当内容超出范围时,显示滚动条,否则不显示。

滚动条运用:

1)没有水平滚动条:

<div style="overflow-x:hidden">test</div>

 

2)没有垂直滚动条

<div style="overflow-y:hidden">test</div>

 

3)没有滚动条

<div style="overflow-x:hidden;overflow-y:hidden"

style="overflow:hidden">test</div>

 

4)自动显示滚动条

<div  style="height:100px;width:100px;overflow:auto;">test</div>

 

定义滚动条的颜色

scrollbar-face-color(立体滚动条凸出部分的颜色)

scrollbar-highlight-color(滚动条背景条的颜色)

scrollbar-base-color(滚动条背景的亮光色,基底)

scrollbar-arrow-color(上下按钮三角箭头的颜色)

scrollbar-shadow-color(立体滚动条阴影的颜色)(滑动滚动条边框色,ie显示)

scrollbar-dark-shadow-color(立体滚动条强阴影的颜色(浏览器不显示))

以上适用于<body><div><textarea><iframe>

 

 

边框阴影

  1. box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow,v-shadow必须。水平,垂直阴影的位置。允许赋值。blur可选,模糊距离。spread可选,阴影的尺寸。color可选,阴影的颜色。inset可选,将外部阴影(outset)改为内部阴影。

 

CSS Sprites(图片整合技术)

原理:将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position来实现背景图片的定位技术。

优势:1)通过图片整合来减少对服务器的请求次数,从而提高页面的加载速度。

2)通过整合图片来减小图片的体积。

滑动门技术:滑动门是一个形象的称呼,它利用CSS背景图像可层叠性,并允许彼此之上进行滑动来创造一些特殊动态效果通过滑动门技术,可以使CSS设计出来的导航菜单兼具传统布局的图像效果,与CSS布局的高效扩展性 。

自适应宽高

 

宽度自适应:元素宽度设置为100%。(块元素宽度默认为100%

高度自适应

元素高度自适应窗口高度设置方法:html,body{height:100%;}

自适应元素高度设置方法:height:100%;

元素具备最小高度的自适应:min-height属性:最小高度;

IE6 BUGIE6浏览器不识别该属性,兼容IE6方法:hack1:min-height:value; _height:value;hack2:min-height:value;  height:auto!important;   _height:value;

类似属性扩展:

min-height(最小高度) max-height(最大高度) min-width(最小宽度) max-width(最大宽度)  注:IE6及以下版本不识别该组属性。

浮动元素父元素高度自适应(高度塌陷):

hack1:给父元素添加声明overflow:hidden;

hack2:在浮动元素下方添加空div,并给该元素添加上clear:both;height:0;overflow:hidden;

hack3:万能清除浮动法

:after{content:".";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

伪对象选择符

:after:content属性一起使用,定义在对象后的内容: div:after{content:"文本内容";}

:before:content属性一起使用,定义在对象前的内容

first-letter:定义对象内第一个字符的样式(该伪元素只能用于块级元素。)

:first-line:定义对象内第一行的样式(该伪元素只能用于块级元素。)

重要属性visibility

visibility:hidden/visible;隐藏/可见    display:none/initial;

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

浏览器兼容

常用的浏览器

1)主流浏览器

Internet ExplorerSafariMozilla FirefoxGoogle ChromeOpera、百度、360、搜狗、傲游  

2)最早的浏览器 : Mosaic  /  Netscape Navigator(网景领航者)1994-2008)简称NN

五大浏览器内核

?Trident   MSHTML)     (三叉戟;三叉线;三齿鱼叉)

?Gecko      (壁虎)

?Presto      ( 迅速的)

?Webkit    Safari内核,Chrome内核原型,它是苹果公司自己的内核,也是苹果的Safari浏览器使用的内核)

?Blink         (GoogleOpera Software开发的浏览器排版引擎)

出现浏览器兼容问题原因:

由于各大主流浏览器由不同的厂家开发,所用的核心架构和代码也很难重和,这就为各种莫名其妙的Bug(代码错误)提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒,都让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去克服的。

CSS BugCSS Hack1)  CSS Bug: CSS样式在各浏览器中解析不一致的情况,或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.

2)  CSS Hack:  CSS中,Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法,因为它们都属于个人对CSS代码的非官方的修改,或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。

css基础