CSS个人归纳.docx

《CSS个人归纳.docx》由会员分享，可在线阅读，更多相关《CSS个人归纳.docx（19页珍藏版）》请在冰豆网上搜索。

CSS个人归纳

一CSS基本语法

1.1选择器

1.1.1标签选择器，如p标签，h1标签p{color:

#000；}

--

p{font-size:

18px；color:

#006；}

h1{font-weight:

300；color:

#063；}

-->

标签选择器

标签选择器

1.1.2类选择器:

类选择器有英文句号和类选择器名组成。

.class{color:

#000；}

--

.pp{font-size:

18px；color:

#006；}

.hh{font-weight:

300；color:

#063；}

-->

类选择器

类选择器

1.1.3ID选择器：

与类选择器类似，不同的是不能重复使用，会影响javascript的调用。

#id{color:

#000；}

--

#pp{font-size:

18px；color:

#006；}

#hh{font-weight:

300；color:

#063；}

-->

ID选择器

ID选择器

1.1.4全局选择器：

全局选择器是一个星号，能作用于文档所有元素。

*{color:

#000；}

--

*{font-weight:

100px；color:

#063；font-size:

36px；}

-->

全局选择器

全局选择器

1.1.5组合选择器，算不上真正的选择器，但是经常用到。

一般组合方式是标签选择器和类选择器、标签选择器和ID选择器。

p.one{color:

#000；}p#one{color:

#000；}

--

*{font-weight:

100px；color:

#063；font-size:

36px；}

p.one{color:

#C00；}

.one{font-family:

"仿宋"；}

-->

组合选择器

组合选择器

1.1.6继承选择器：

父子元素可以应用继承选择器，爷孙关系，跨多级的元素都可以运用继承选择器。

两与元素的文字的空格必不可少。

pb{color:

#000；}

--

p{font-weight:

100px；color:

#063；font-size:

36px；}

pb{text-decoration:

underline；}

-->

继承选择器

除了使用标签作为继承选择器外，还有可以使用组合选择器嵌套在继承选择器中。

p.oneb.two{color:

#000；}

组合选择器之间没有空格，继承选择器之间必须要有空格。

组合选择器用于构成继承选择器

1.1.7伪类：

伪类也是作为选择器一种。

但是用伪类定义的CSS样式并不是作用带标签上的。

主流游览器都支持的。

就是超链接的伪类，包括:

link:

active:

hover:

visited

--

a:

link{color:

#30F；}

a:

hover{color:

#099；}

a:

active{color:

#CF0}

a:

visited{color:

#F33；}

-->

伪类

2.1声明

2.1.1多重声明:

指对同一个选择器设置属性时，可以把所有属性写在同一选择器中，而不需要分开写。

--

h1{font-size:

24px；}

h1{color:

#FF0；}

h1{text-decoration:

underline；}

-->

多重声明

2.1.2集体声明：

指若样式表中有多个选择器使用相同的属性设置，这些选择器可以并列写在一起。

h1{font-size:

24px；color:

#FF0；text-decoration:

underline；}

h2{font-size:

24px；color:

#FF0；text-decoration:

underline；}

p{font-size:

24px；color:

#FF0；text-decoration:

underline；}

或者，每个选择器之间使用逗号隔开

h1,h2,p,.noe,#two{font-size:

24px；color:

#FF0；text-decoration:

underline；}

3.1优先级

3.1.1最近原则

3.1.2顺序原来，后写先采用

3.1.3!

important最高级原则

二CSS的单位

1.1颜色单位：

CSS标准里，CSS的颜色被归类为单位。

CSS设置颜色可以使用颜色名称、RGB数值、RGB百分比和颜色十六进制。

RGB色彩模式是工业界的一种颜色标准，是通过对红（R）、绿（G）、蓝（B）三个颜色通道的变化以及他们相互之间的叠加来得到各式的颜色。

1.1.1颜色名称：

使用颜色的名称来表示颜色是最直接的命名方法。

有16种颜色是规范的。

black

黑色

white

白色

red

红色

aqua

水绿

yellow

黄色

blue

蓝色

lime

浅绿

fuchsia

紫红

gray

灰色

green

绿色

teal

深青

navy

深蓝

purple

紫色

1.1.2百分比颜色rgb（100%,100%,100%）；第一个百分比代表红色，第二个百分比代表绿色，第三个百分比代表蓝色。

把三个值都设置为100%则得到白色，三个都设置为0%则得到黑色，三个值不相同就得到其他颜色

2.1长度单位

2.1.1绝对单位：

有英寸、厘米、毫米、磅。

网页设计中极少使用绝对单位。

2.1.2相对单位：

有像素px和em（1em=12px）

三用CSS控制文本样式

3.1字体：

font-family:

name；，name值代表字体的名称，它可以设置为一个字体的名称或者是一组字体的合集。

font-family:

宋体,黑体,幼圆；

3.2文字大小概述：

网页默认字体大小为16pxfont-size:

textsize；textsize可以是长度单位、百分比和关键字

3.2.1使用相对长度单位定义字体大小：

px和em

3.2.2使用相对关键字定义文字大小：

CSS提供了larger和smaller，子元素根据缩放因子来计算文字大小的。

缩放因子为12磅，例如使用larger关键字就是子元素文字相对父元素文字的大小进行放大，原来为24像数，使用larger之后，24*1.2=28.8px

3.2.3定义文字的绝对大小：

使用物理长度单位定义文字大小

3.2.4使用关键字定义文字大小：

CSS提供了xx-small、x-small、small、medium、large、x-large、xx-large，medium关键字定义的文字大小是游览器默认字体大小，其他根据游览器默认大小乘以或除以缩放因子12磅

4.1文字颜色：

CSS提供color属性用于改变网页上的文字颜色

5.1文字粗细：

CSS提供font-weight属性用于改变网页上文字的粗细。

font-weight:

textweight，textweight值代表文字的粗细值，可以使用数字或者关键字设置。

可以使用数字有100、200、300、400、500、600、700、800、900。

关键字可以使用bold、bolder、lighter、normal。

在没有使用b标签加粗的情况下，数字100~500显示粗细是一致的。

600~900所设置的字体会明显加粗。

使用lighter和normal设置的字体粗细是不变的，bold和bolder设置的字体会明显加粗，而使用b标签后，使用lighter和normal设置，则标签b内的文字变为正常字体不加粗。

常使用normal和bold进行加粗变细

6.1斜体：

CSS提供font-style属性用于设置斜体，font-style:

textstyle；textstyle可以使用normal、italic、oblique三个关键字进行设置，normal为不斜体显示，italic和oblique同为斜体显示，显示效果一样

6.2下划线、顶划线、删除线：

CSS提供text-decoration属性设置。

text-decoration:

textline；textline值有none、underline、overline、line-through、blink（代表闪烁）关键字进行设置

6.3英文字母大小写：

CSS提供text-transform:

texttpye；texttpye可以使用none、capitalize、uppercase、lowercase。

none维持原状、capitalize将每个单词的第一个字母转换为大写、uppercase使所有字母转换大写、lowercase使所有字母转换成小写

6.4属性的缩写法：

是将多个属性的值并列写在一个属性下。

只要是符合属性都能应用属性速写法定义CSS样式。

例如，font属性是一个复合属性。

多个文字属性的值可以并列缩写在font属性下

font:

:

1emitalicbold；不需要写属性名，只要要写属性的值即可，每个值用空格隔开

6.5用段落属性改变文字的段落样式

6.5.1段落的水平对齐方式：

CSS提供了text-align:

direction；direction可以使用left、right、center、justify（两端对齐）

6.5.2段落的垂直对齐方式：

CSS提供了writing-mode属性和layout-flow属性用于控制文本的排列方式

使用writing-mode:

lr-tb/tbrl；其中，lr-tb代表文字按照左右-上下的方向排列，tb-rl代表文字按照上下-右左的方向排列。

默认的情况下文字是按照左右-上下排列。

使用layout-flow:

horizontal/vertical-ideographic；horizontal代表文本水平排列vertical-ideographic代表文本垂直排列.

6.5.3首行缩进：

CSS提供text-indent:

distant；distant代表段落首行缩进的数值，可以设置为像数值或百分比

6.5.4行间距与字间距

行间距CSS提供了line-height:

height；height代表行与行之间的距离，可以使用各种长度单位进行设置，line-height的数值是两行文字基线的距离，基线即是文字的下划线。

字间距：

CSS提供了letter-spacing:

space；space代表字与字之间的距离，可以使用各种长度单位进行设置。

使用letter-spacing属性设置英文，则每个字母会分隔。

要设置每个英文词之间的距离，可使用word-spacing属性

四用CSS设置图片样式

1.1在网页中插入图片：

使用img标签

1.2控制图片的大小CSS的width和height属性适用于控制图片的宽度和高度

1.2.1使用像素控制图片宽高

img{width:

300px；height:

400px；}

使用百分比控制图片宽度：

使用百分比缩放图片，图片的宽高比例不变，但是使用百分比缩放图片，图片缩放不是根据原图片的尺寸进行缩放，而是根据父元素的尺寸进行缩放。

所以使用百分比缩放，最好把img标签放在一个固定的父元素中

img{width:

300px；height:

400px；}

单独设置图片的宽度或高度：

单独设置图片的宽度后，图片就按照宽度缩放，而高度是按照宽度的缩放比例自动变化，整张图片在缩放后比例不变。

1.3给图片添加边框的技巧：

CSS的border属性适用于许多元素，同一适用于图片。

以下是使用border属性的通用语法

border-width:

width；border-style:

style；border-color:

color；

img{border-width:

3px；border-style:

double；border-color:

#009；border-style:

none；}

1.4图片不显示的解决办法：

在图片不能正常显示的情况下，应增加图片的替换文字，使用img标签的alt属性

1.5给图片增加链接：

使用标签

通常用了超链接会给图片添加了一个边框，要去掉边框在中插入代码img{border:

none；}

1.6文字环绕：

使用float属性设置

五用CSS设置背景

1.1设置背景颜色：

CSS提供background-color属性，background-color:

color；大部分的标签都能设置其background-color如p标签和a标签都可以

1.2设置背景图片

1.2.1为元素添加背景图案：

CSS提供background-image属性background-image:

url（pic.jpg）；p标签都可以使用这个属性

1.2.2背景图的重复：

CSS提供background-repeat属性，background-repeat:

repratmode；repratmode有以下四种属性可以选择repeat：

背景图在纵向和横向上平铺，no-repeat：

背景图不重复，repeat-x：

背景图在横向上平铺，repeat-y：

背景图在纵向上平铺

1.3背景图的位置

1.3.1使用长度单位设置背景图的位置：

CSS提供了background-position:

position；其中position的值可以使用长度单位、百分比值和关键字，通常以像素作为单位。

设置时要设置两个值，第一个值代表背景图与其所在的页面元素的横向相对位置，第二个值为所在的页面元素的纵向相对位置。

background-position:

30px40px；，若只是设置了横向位置的数值，纵向默认为居中对齐

1.3.2使用百分比设置背景图的位置：

使用百分比设置背景图的位置通常只设置0%、50%、100%分别代表左上角对齐，背景图和页面元素中心对齐，与页面元素右下角对齐

1.3.3使用关键字设置背景图的位置：

设置background-position的关键字有六个，横向有left、right、center，纵向有top、centern、bottom，background-position:

rightbottom；，若只是设置了一个关键字，那么那个关键字就代表横向的对齐方式，纵向默认为居中对齐。

1.4滚动和固定背景图：

CSS提供了background-attachment:

scroll/fixed；scroll代表滚动，fixed代表不滚动。

说明在IE6游览器中，只有设置body标签的background-attachment属性为fixed才能生效。

其他标签不生效。

1.5背景属性缩写：

CSS提供了background:

n；body{background:

url（images/framels1.jpg）no-repeatscroll；}

六用CSS控制超链接样式

1.1改变超链接的基本样式：

CSS提供了四个伪类设置超链接分别link、active、visited、hover。

顺序要按前面排列

a:

link{color:

#000；}

a:

active{color:

#33F；}

a:

visited{color:

#900；}

a:

hover{color:

#CC3；}

默认情况下超链接使用后有下划线，要用text-decoration:

none；去掉

1.2丰富超链接的表现形式：

综合应用文字和图片能使超链接的样式产生多种变化。

1.2.1制作虚线下划线：

制作一个像素3*1的图片，只在第一个像素的地方填充灰色，然后作为a标签的背景图，然后设置为底部，X方向重复，如下background-image:

url（images/%E6%9C%AA%E6%A0%87%E9%A2%98-1.gif）；background-repeat:

repeat-x；background-position:

bottom；

1.2.2制作排行榜：

a标签是内联元素是水平排列的，要设置属性display:

block；超链接成了块级元素是垂直排列

1.2.3使用背景颜色实现的翻转效果：

除了给a标签设置背景，还可以给伪类设置背景图。

当给hover设置不同颜色的为背景图就实现了颜色翻转

1.2.4使用背景图片实现翻转效果：

七用CSS控制列表样式

1.1列表类型：

列表类型有三种，无序列表、有序列表、定义列表，常使用无序列表来实现导航和新闻列表的位置，使用有序列表实现条文款项的表示，使用定义列表来制作图文混排的排版模式。

1.2改变列表符的样式

1.2.1使用自带的列表符：

CSS提供了list-style-type，list-style-image和list-style-position属性来改变列表符的样式，由于定义列表在默认情况下没有列表符，所以上述三个属性定义列表来说是无效的

1.2.2使用自带的列表符：

有序还是有序都CSS提供了list-style-type:

type；type为CSS自带的列表符，属性值有：

disc实心圆、circle空心圆、quare实心方块、decimal阿拉伯数字、lower-roman小写罗马数字、upper-roman大写罗马数字lower-alpha、小写英文字母upper-alpha、大写英文字母、armenian传统的亚美尼亚数字、cjk-ideographic浅白的表意数字、georgian传统的乔治数字、lower-greek基本的希腊小写字母、hebrew传统的希伯莱数字、hiragana日文平假名字符、hiragana-iroha日文平假名序号、katakana日文片假名字符、katakana-iroha日文片假名序号、lower-latin小写拉丁字母、upper-latin大写拉丁字母、none不使用项目符号。

注释：

任何的版本的InternetExplorer（包括IE8）都不支持属性值"lower-greek"、"lower-latin"、"upper-latin"、"armenian"、"georgian"、hebrew、katakana、hiragana、hiragana-iroha。

1.2.3用背景图改变列表符：

CSS提供了list-style-image:

url（list_marker.gif）；，说明使用list-style-image插入的列表图片是不能使用CSS样式更改其大小的，若想更改图片大小，就需要在插入图片前更改。

当list-style-image:

url（list_marker.gif）；生效，list-style-type:

type；就不生效

1.2.4改变列表符的位置：

CSS提供list-style-position属性用于改变列表符和列表的相对位置。

该属性包括两个属性值inside和outside。

inside：

类别项目标记放置在文本以内，环绕本文根据标记对齐。

outside列表项目标记放置在文本以外，环绕文本不根据标记对齐。

默认情况下list-style-position的属性值为outside

1.2.5复合属性list-style

八用CSS美化表格

1.1表格的基本页面元素：

table、tr、th、td、caption、thead、tbady、tfoot。

在table标签中使用summary属性嵌入关于该表格的说明，summary中的语句不会出现在页面的任何地方，但是跟caption同样对于搜索引擎来说是友好的。

th标签用于表示行和列的名称。

1.2使用CSS控制表格元素

1.2.1设置表格元素宽度：

CSS提供width属性，通常使用百分比和像素来作为单位。

使用百分比是会根据父元素的宽度来设置，对于表格其他元素都可以使用百分比和像素来设置宽度。

1.2.2设置表格元素边框：

CSS提供border。

若希望得到如excel中的单线表格，就要使用CSS的border-collapse:

separate/collapse；，设置collapse属性就能去除表格单元格边框就会重叠在一起。

九用CSS控制表单样式

1.1了解表单元素：

一个表单由三个基本元素组成：

第一个是表单标签

1.1.1form标签和fieldset标签：

在标准XHTML中，应该使用语义明晰的

1.2表单域和表单按钮

文本框＜inputtype="text"/＞

密码框＜inputtype="password"/＞

多行文本框　＜textareacols="20"rows="2"