CSS知识点总结Word文件下载.docx
- 文档编号:7696908
- 上传时间:2023-05-08
- 格式:DOCX
- 页数:21
- 大小:771.01KB
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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- CSS 知识点 总结