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；}
ID选择器
--
#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了解表单元素：
一个表单由三个基本元素组成：
第一个是表单标签
，它包含表单数据所以CGI程序的URl以及数据提交到服务器的方法；第二个是表单域，它包含了文本框、密码框、隐藏域、多行文本框、复选框、单选按钮、下拉选择框和文件上传框等；第三个是表单按钮，它包含了提交按钮、复位按钮和一般按钮。
1.1.1form标签和fieldset标签：
在标准XHTML中，应该使用语义明晰的
标签来安放整个表单，fieldset标签中可以包含legend标签，用于插入表单的标题为表单进行分类。
1.2表单域和表单按钮
文本框＜inputtype="text"/＞
密码框＜inputtype="password"/＞
多行文本框 ＜textareacols="20"rows="2"
升级会员 