CSS知识点总结Word文件下载.docx
《CSS知识点总结Word文件下载.docx》由会员分享，可在线阅读，更多相关《CSS知识点总结Word文件下载.docx（21页珍藏版）》请在冰点文库上搜索。
h1+p{margin-top:
0;
10.伪类选择器
静态伪类：
a:
visited{}
link{}（好像用不了）
动态伪类：
focus{}（常用于input元素）
hover{}
active{}
选择第一个子元素：
Li:
first-child{}
根据语言选择（）
*:
lang（fr）{}
结合伪类：
link:
hover:
active{color:
orange;
伪元素选择器：
设置首字母样式
li:
first-letter{color:
Red;
设置第一行的样式：
.aa:
first-line{color:
Purple;
设置之前和之后元素的样式：
before{content:
"
{}"
;
Silver;
a:
after{content:
end"
Aqua;
3．结构和层叠
1.特殊性：
重要性：
!
Important（最强悍！
）eg:
p.dark{color:
#333!
important;
内联样式特殊性：
1000
ID选择器：
0100li#answer{color:
navy;
}/*0,1,0,1（winner）*/
类属性值，属性选择或伪类：
0010h2.grape{color:
}/*0,0,1,1（winner）*
元素和伪元素：
0001h1{color:
}/*0,0,0,1*/
通配选择器：
0000
结合符:
无
继承：
无（0特殊性比无特殊性的更强）
Eg:
*{color:
}（（当h1中有其他元素时win）
h1#page-title{color:
black;
2.继承
a）Border：
没有继承
b）Body:
可以向上继承到html,其他的都是向下继承
3.层叠：
具有相同特殊性的靠后的权重大
按权重和来源排序：
（p79）读者的重要声明>
创作人员的重要声明>
创作人员的正常声明>
读者正常>
用户代理声明
按特殊性排序
按顺序排序
Lvha顺序比较重要：
即livevisitedhoveractive
四．值和单位
1.数字
2.百分数
3.颜色
命名颜色：
bluegreenwhiteredblackmaroon...
用GRB指定颜色
函数式RGB颜色（百分数法：
0%-100%，数字法：
0-255）
Eg:
rgb（100%,100%,100%）rgb（0%,0%,0%）rgb（255,255,255）rgb（0,0,0）
灰度表：
p.one{color:
rgb（0%,0%,0%）;
p.two{color:
rgb（20%,20%,20%）;
p.three{color:
rgb（40%,40%,40%）;
p.four{color:
rgb（60%,60%,60%）;
p.five{color:
rgb（80%,80%,80%）;
p.six{color:
rgb（0,0,0）;
p.seven{color:
rgb（51,51,51）;
p.eight{color:
rgb（102,102,102）;
p.nine{color:
rgb（153,153,153）;
p.ten{color:
rgb（204,204,204）;
25%*255=63.75=64
十六进制RGB颜色
Web颜色：
rgb值20%和52和33（十六进制）整除
4.长度单位
a）绝对长度单位：
in,cm,mm,pt（点）,pc（派卡）
1in=2.54cm1cm=0.3394in
1in=72pt1in=6pc
B）相对长度单位
Em和ex:
Px:
1em=14px1em=2ex
Em最好的度量单位
5.URL
绝对URL
相对URL
注意：
url和开始括号之间不能有空格
6.关键字
None:
不同于0，
Inherit:
它的属性值和父元素相同
7.css2单位：
p（110）
a）角度值：
deg,grad和rad
b）时间值：
s,ms1000ms=1s
c）频率值：
hz,mhz
5．字体
1.字体系列
制定字体系列：
p{font-family:
TimesNR,serif;
Times,TimesNR,'
NewCenturySchoolbook'
Georgia,'
NewYork'
serif;
有空格、包括“#”和”$”的时候加“单引号”
Cursive必须加“双引号”
2.字体加粗
a）Font-weight:
boldboldermormal100--900lighter
b）相对大小关键字:
Bolder是相对于父级字体粗细而言
3.字体大小
a）Font-size:
xx-smallx-smallsmallmediumlargex-largexx-largesmallerlargerinherit
b）相对大小关键字：
largersmaller
c）绝对大小：
xx-smallx-smallsmallmediumlargex-largexx-large
d）百分数：
根据父元素继承的大小来计算strong{font-weight:
lighter;
font-size:
larger;
}strongb{font-weight:
lighter;
200%;
4.风格和变形
a）字体风格：
Font-style:
italicobliquenormalinherit
b）字体变形：
font-variant:
small-capsnormalinherit（只对英文有用，对汉语没有影响）
c）转换大小写：
p{text-transform:
uppercase;
5.拉伸和调整字体
a）字体拉伸：
font-stretch:
normal|wider|narrower|ultra-condensed|exTRa-condensed|condensed|semi-condensed|semi-expanded|expanded|exTRa-expanded|ultra-expanded|inherit
b）我的浏览器不支持（可以忽略）
6.Font属性
a）等价：
h1{font-style:
inherit;
font-weight:
bold;
font-variant:
small-caps;
font-size：
20px;
font-family:
Candara,Corbel;
h1{font:
inheritboldsmall-caps20pxCandara,Corbel;
}
b）注意;
前两个可以互换，后两个不可以，normal可以省略
c）增加行高：
line-height,
Eg：
body{font-size:
12px;
bolditalic200%/1.2Verdana,Helvetica,Arial,sans-serif;
7.字体匹配
6．文本属性
1.缩进和水平对齐
a）缩进文本：
（只能用于块级元素！
）text-indent:
3em10%
b）水平对齐：
）text-align:
leftcenterrightjustify（两端对齐文本）inherit
2.垂直对齐：
元素中文本基线之间的最小距离
a）Line-height:
”line-height”减去“font-size”等于行间距
i.Line-height:
18px,0.33in,150%,1.5em
ii.适用于所有元素
iii.行高和继承：
Line-height值从父元素继承时，要从父元素计算，而不是子元素上计算。
解决方法设置一个缩放因子div{line-height:
1.5;
b）垂直对齐文本：
vertical-align;
（只用于行内高度）baseline|sub|super|top|text-top|middle|bottom|text-bottom|<
percentage>
|<
length>
|inherit
i.只用于行内高度、替代元素和表单元格，不能继承
ii.上标和下标Sub:
下标，super:
上标
iii.底端对齐：
bottom:
text-bottom：
行内文本的底端{比bottom高一点！
iv.顶端对齐：
top:
text-top:
v.居中对齐：
middle（感觉最好）
vi.百分数表示：
（）可以为负值"
vertical-align:
50%;
升高相对于line-height的一半
vii.水平对齐：
10px;
上升10px;
3.字间隔和字母间隔
a）字间距：
word-spacing:
0.5em,可以为正可以为负，（对于汉字不使用呢！
b）字母间距：
letter-spacing:
0.2em;
可以为正可以为负，（对于汉字可以用呢！
c）间隔和对齐：
4.文本转换
a）Text-transform:
uppercase|lowercase|capitalize|none|inherit
b）Capitalize:
只对每个单词的首字母大写。
（适用于标题！
5.文本装饰
a）Text-decoration:
none|[underline||overline||line-through||blink]|inherit
b）text-decoration:
blink;
让文本闪烁。
6.文本阴影
a）Text-shadow:
颜色长度长度长度（第一和二个长度确定了阴影与文本的偏移距离{右，下}，第三个长度确定“模糊半径”）
i.Eg:
text-shadow:
silver2px2px2px;
p{color:
text-shadow:
004pxblack;
ii.长度为负值时阴影落在原文本的左上方
b）处理空白符：
white-space:
normal|nowrap|pre|pre-wrap|pre-line|inherit
i.Br元素是换行的意思
ii.Normal：
正常，没有间隙，没有换行
iii.Pre会保留原始的空格
iv.Nowrap会阻止换行（行之间有间隙）
v.pre-wrap元素中的文本会保留空白符序列，但是文本行会正常地换行
vi.pre-line仅仅是让有换行，正常文本中一样合并空白符序列，但保留换行符。
vii.
viii.文本方向：
direction:
ltr|rtl|inherit
1.块级元素可以直接使用，文本的书写方向、表中列布局的方向、内容水平填充、两端对齐最后一行的位置，
2.对于行内元素，只有当unicodebidi属性为embed或bidi-override时才会应用direction
3.Unicode-bidi:
控制字母方向
7．基本视觉格式化
1.基本框
2.块级元素
a）水平格式化:
<
pstyle="
width:
200px;
padding:
10px;
margin:
20px;
>
wideness?
/p>
实际宽度是260px（width+padding+margin）,可见宽度是220px（width+padding）
假如div的width为30em,则内容宽度，内边框，边框或者外边距的总和就是30px
b）水平属性
c）Auto:
只有左外边距、右外边距和width的值可以是auto，其它要么设置，要么为0.
i.3个为设定值，会将margin-right强制为auto；
ii.其中有2个为设定值，则第三个为父块宽度减去这两个设定值
iii.其中有2个为auto时，eg:
1.如果是左右边距为auto，它们会设置为相等的长度，因此将元素在其父元素中居中；
2.Text-align：
center;
是针对块级元素而言的，是块级元素内的内容中间对齐;
3.左边距为auto，右边距设为100px，width为auto时，左边距为0.
iv.三个都为auto时，两个外边距为0，width会尽可能的宽。
左右边距都为0。
v.如果两个外边距显示地设置，而width设置为auto，width值将设置为所需的某个长度，从而达到需要的总宽度（即父元素的内容宽度）
d）负外边距：
依然满足总和为父元素width，但是只有左右两个外边距可以为负，其它都是不可以的。
e）百分数：
所有边矩这和为100%，可是边框不能为百分数
f）替换元素：
和非替换的一样，就是不能使用width而已，宽度改变方法：
<
imgsrc="
App_Themes/default/images/snlogo.png"
style="
display:
block;
width:
100px;
0;
/>
g）垂直属性和水平属性一样一样的。
h）合并垂直外边距：
没有边框和内边距的时候使用
i）列表项：
i.除去前面的”.”：
list-style:
none;
ii.设置“.”的样式：
list-style-image:
url（"
）;
list-style-position:
inside;
list-style-type:
square;
3.行内元素
a）增加框属性
4.改变元素显示
a）改变元素显示：
display:
none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|inherit
b）行内块元素：
inline-block
c）Run-in:
此浏览器不支持，哈哈
5.P元素之间的空格大，div之间的空格小，更适合使用的是div
8．内边距、边框和外边距
1.基本元素框
a）宽度和高度：
不可用于行内非替代元素
b）Width、height:
适用于块级和替换元素
c）Margin:
toprightbottomleft
i.百分数和外边距：
相对于父元素的width计算的
ii.值复制：
eg:
相同：
iii.单边外边距属性：
d）Padding:
2.外边距
a）外边距和行内元素：
外边距可以用于行内边距（但是只有左右有现象，上下没有现象！
3.边框
a）边框：
border:
有宽度（2px）、样式（none）、颜色（前景色）之分
b）边框和背景：
背景会延伸到边框中（我测试的是如此）
i.有样式的边框：
border-style:
double;
1.可用于按钮啊，什么的；
outset；
ii.多种样式：
dasheddotteddoublegroove;
iii.单边样式：
border-top-style,...
iv.边框宽度：
和样式差不多
c）边框颜色：
i.透明边框：
border-color：
transparent
d）简写边框属性：
顺序不重要，且可以省略一些值
e）行内元素和边框
4.内边距
9．颜色和背景
1.颜色
2.前景色
a）影响边框；
b）影响表单元素：
c）颜色可以继承
3.背景
a）无继承
b）有一个值是：
c）Background-image:
none,url（“”）
d）背景图片重叠方式：
background-repeat:
repeat-x;
repeat,repeat-y,no-repeat.
十．浮动和定位
1.浮动
（1）float:
left,right,none,inherit
（2）浮动元素：
浮动的图片或者段落等
（3）外边距不会合并
（4）负外边距：
可以到父元素的外面，超过父元素
（5）清除：
不让自己的身边有漂浮物（针对float的），clear:
left,right,both,none（块级元素）
2.定位
（1）定位属性：
position:
absolutefixedrelativestatic
position:
fixed:
将导致所在的元素固定在页面中。
（2）包含块：
1 根元素的包含块：
body
2 非根元素，如果是position是relative或static,包含块则由最近的块级框、表单元素或行内块祖先框的内容边界构成
3 非根元素，如果是position是absolute，包含块设置为最近的position值不是static的祖先元素,
（3）偏移属性：
top,right,bottom,left：
长度，百分数，auto,inherit（基于绝对定位的）
（4）限制宽度和高度：
min-width,min-height。
Max-width,max-height（应用于除了非替换行内元素和表元素）
（5）内容溢出和剪裁
1.溢出：
overflow:
visible（默认）,hidden，scroll,auto,inherit（应用于块级元素和替换元素），
a）实验证明：
auto最好用！
2.内容裁剪：
clip:
rect（top,right,bottom,left）,auto,inherit
3.元素可见性：
visibility:
visible,hidden,collapse,inherit
a）Visibility:
hiddem存在但是不可见，display:
不可见也不存在
b）Margin-left=margin-right:
居中
（6）Z轴上的放置
i.Z-index:
auto/inherit/值
ii.改变元素相互覆盖的顺序，是一个用于定位元素
（7）固定定位fixed
（8）相对定位relative
十一．表布局
1.表格式化
（1）表显示值
（2）display
（3）表层
（4）表标题：
1.Caption-side：
top,bottom
2.应用于：
2.表单元格边框
a）Border-collapse:
collapse,（无间隙）separate（默认，有间隙），inherit
b）应用于：
c）分隔单元格边框
d）边框间隔：
border-spacing:
length,inherit（和border-collapse:
separate一起使用）
i.如果提供两个值，第一个为水平间隔，第二个为垂直间隔eg:
1px5px;
e）处理空单元格（我的浏览器不支持呢！
i.Empty-cells:
show（默认值）,hideinherit
f）合并单元格边框
3.表大小
a）宽度：
table-layout:
auto（默认）,fixed,inherit
b）固定布局：
c）Vertical-align:
在表中应用会被忽略！
12．列表与生成内容
1.列表
a）列表类型：
list-style-type:
circle;
i.用于display:
list-item
ii.有继承性
b）列表项图片：
App_Themes/default/images/0-item_pic.jpg_b.jpg"
），none
iii.Url为绝对路径
c）列表标志位置：
list-style-position:
inside，outside（默认）,inherit;
d）简写列表样式：
typeimagepositin;
e）列表布局：
2.生成内容
a）指定内容：
content:
close-quoteno-close-quoteno-open-quotenormalopen-quoteinherit
i.应用于：
beforeand:
after的伪元素
ii.无继承性
iii.换行用“\A”或者“\00AB”
iv.插入属性值：
attr（href）;
b）计数器：
我没有怎么看，觉得不是那么重要！
不过要知道有这么个东东！
13．用户界面样式
1.系统字体和颜色
a）系统字体;
font:
menu,caption,...
b）颜色：
color
升级会员 