一.Css分类
1.替代replaced elements:
img input(radio button, checkbox, text)
不可替代nonreplaces elements:
html,xhtml,span,a,div,body,form,p,em,strong,
2.block-level andinline-level:(block可以包含inline 元素,反过来是不可以的!)
block-level:p div li ul
inline-level: a span strong em b i u
二.选择器
2.元素选择器:
P{}
3. GroupingSelectors(分组)
eg:h2, p {color: gray;}
4.The universalselector(通配选择器)
eg:* {color: red;}
5. GroupingDeclarations
eg:h1 {font: 18px Helvetica; color: purple;background: aqua;}
6.类选择器:.ddd
7.ID选择器:#ddd
8.属性选择器
简单属性选择
h1[class]{color: silver;}
根据具体属性值
p[class="warning"]{font-weight: bold;}
根据部分属性值选择
p[class~="warning"]{font-weight: bold;}
子串匹配属性选择器
[foo^="bar"]
[foo$="bar"]
[foo*="bar"]
特定属性选择类型
*[lang|="en"] {color: white;}
9.使用文档结构
后代选择器
blockquote b, p b {color: gray;}
选择子元素
h1 > strong {color: red;}
选择相邻兄弟元素
h1 + p {margin-top: 0;}
10.伪类选择器
静态伪类:
a:visited{}
a:link{}(好像用不了)
动态伪类:
a:focus{}(常用于input元素)
a:hover{}
a:active{}
选择第一个子元素:
Li:first-child{}
根据语言选择()
*:lang(fr){}
结合伪类:
link:hover:active {color:orange;}
伪元素选择器:
设置首字母样式
li:first-letter{ color:Red;
设置第一行的样式:
.aa:first-line{ color:Purple;}
设置之前和之后元素的样式:
a:before{ content:"{}"; color:Silver;}
a:after{ content:"end"; color:Aqua;}
三.结构和层叠
1.特殊性:
重要性:!Important (最强悍!) eg: p.dark {color: #333 !important; background: white;}
内联样式特殊性:1000
ID选择器:0100 li#answer{color: navy;} /* 0,1,0,1 (winner) */
类属性值,属性选择或伪类:0010 h2.grape{color:purple;}/* 0,0,1,1 (winner)*
元素和伪元素:0001 h1 {color: red;} /* 0,0,0,1 */
通配选择器:0000
结合符:无
继承:无 (0特殊性比无特殊性的更强)
Eg: * {color: gray;} ((当h1中有其他元素时win)
h1#page-title {color: black;}
2.继承
a) Border:没有继承
b) Body:可以向上继承到html,其他的都是向下继承
3.层叠:具有相同特殊性的靠后的权重大
按权重和来源排序:(p79)读者的重要声明>创作人员的重要声明>创作人员的正常声明>读者正常>用户代理声明
按特殊性排序
按顺序排序
Lvha顺序比较重要:即live visitedhover active
四.值和单位
1.数字
2.百分数
3.颜色
命名颜色:bluegreen white red black maroon ...
用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.54cm 1cm=0.3394in
1 in=72pt 1 in=6pc
B) 相对长度单位
Em和ex:
Px:1em=14px 1em=2ex
Em最好的度量单位
5.URL
绝对URL
相对URL
注意:url和开始括号之间不能有空格
6.关键字
None:不同于0,
Inherit:它的属性值和父元素相同
7.css2单位:p(110)
a) 角度值:deg, grad 和 rad
b) 时间值:s,ms 1000ms=1s
c) 频率值:hz,mhz
五.字体
1.字体系列
制定字体系列:p {font-family: TimesNR, serif;}
p {font-family:Times, TimesNR,'New Century Schoolbook', Georgia,'New York', serif;}
有空格、包括“#”和”$”的时候加“单引号”
Cursive必须加“双引号”
2.字体加粗
a) Font-weight:bold boldermormal 100 --900 lighter
b) 相对大小关键字:Bolder 是相对于父级字体粗细而言
3.字体大小
a) Font-size:xx-small x-smallsmall medium large x-large xx-largesmaller larger inherit
b) 相对大小关键字:larger smaller
c) 绝对大小:xx-small x-smallsmall medium large x-large xx-large
d) 百分数:根据父元素继承的大小来计算strong {font-weight: lighter; font-size:larger;} strong b {font-weight:lighter; font-size:200%;}
4.风格和变形
a) 字体风格:Font-style:italicoblique normal inherit
b) 字体变形:font-variant:small-caps normal inherit(只对英文有用,对汉语没有影响)
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:inherit bold small-caps 20px Candara, Corbel; }
b) 注意;前两个可以互换,后两个不可以,normal 可以省略
c) 增加行高:line-height,
Eg:body {font-size: 12px;}
h1 {font: bold italic 200%/1.2 Verdana, Helvetica, Arial, sans-serif;}
7.字体匹配
六.文本属性
1.缩进和水平对齐
a) 缩进文本:(只能用于块级元素!)text-indent:3em 10%
b) 水平对齐:(只能用于块级元素!)text-align:left centerright justify(两端对齐文本) 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.水平对齐:vertical-align: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:silver 2px 2px 2px;p {color: white; text-shadow: 0 0 4px black;}
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:控制字母方向
七.基本视觉格式化
1.基本框
2.块级元素
a) 水平格式化:<p style="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而已,宽度改变方法:
<img src="App_Themes/default/images/snlogo.png" style=" display:block; width:100px; margin: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) 行内块元素:display:inline-block
c) Run-in:此浏览器不支持,哈哈
5.P元素之间的空格大,div之间的空格小,更适合使用的是div
八.内边距、边框和外边距
1.基本元素框
a) 宽度和高度:不可用于行内非替代元素
b) Width、height:适用于块级和替换元素
c) Margin:top right bottom left
i. 百分数和外边距:相对于父元素的width计算的
ii. 值复制:eg:相同:
iii.单边外边距属性:
d) Padding:
2.外边距
a) 外边距和行内元素:外边距可以用于行内边距(但是只有左右有现象,上下没有现象!)
3.边框
a) 边框:border:有宽度(2px)、样式(none)、颜色(前景色)之分
b) 边框和背景:背景会延伸到边框中(我测试的是如此)
i. 有样式的边框:border-style:double;
1. 可用于按钮啊,什么的;border-style:outset;
ii. 多种样式:border-style:dashed dotted double groove;
iii.单边样式:border-top-style,...
iv. 边框宽度:和样式差不多
c) 边框颜色:
i. 透明边框:border-color:transparent
d) 简写边框属性:
顺序不重要,且可以省略一些值
e) 行内元素和边框
4.内边距
九.颜色和背景
1.颜色
2.前景色
a) 影响边框;
b) 影响表单元素:
c) 颜色可以继承
3.背景
a) 无继承
b) 有一个值是:transparent
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:absolute fixed relative static
position:fixed:将导致所在的元素固定在页面中。
(2)包含块:
① 根元素的包含块:body
② 非根元素,如果是position是relative 或static,包含块则由最近的块级框、表单元素或行内块祖先框的内容边界构成
③ 非根元素,如果是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:border-spacing:1px 5px;
e) 处理空单元格(我的浏览器不支持呢!)
i. Empty-cells:show(默认值),hideinherit
f) 合并单元格边框
3.表大小
a) 宽度:table-layout:auto(默认),fixed,inherit
b) 固定布局:
c) Vertical-align:在表中应用会被忽略!
十二.列表与生成内容
1.列表
a) 列表类型:list-style-type:circle;
i. 用于display:list-item
ii. 有继承性
b) 列表项图片:
list-style-image:url("App_Themes/default/images/0-item_pic.jpg_b.jpg"),none
i. 用于display:list-item
ii. 有继承性
iii.Url为绝对路径
c) 列表标志位置:list-style-position:inside,outside(默认),inherit;
i. 用于display:list-item
ii. 有继承性
d) 简写列表样式:list-style:type imagepositin;
e) 列表布局:
2.生成内容
a) 指定内容:content:close-quote no-close-quote no-open-quotenormal open-quoteinherit
i. 应用于:before and :after的伪元素
ii. 无继承性
iii.换行用“\A” 或者 “\00AB”
iv. 插入属性值:content:attr(href);
b) 计数器:我没有怎么看,觉得不是那么重要!不过要知道有这么个东东!
十三.用户界面样式
1.系统字体和颜色
a) 系统字体;font:menu,caption,...
b) 颜色:color/background-color:ActiveBorder,ActiveCaption,AppWorkspace,Background,ButtonFace...
2.光标
a) 光标:cursor:auto defaultpointer move e-resize ne-resize nw-resize n-resize se-resize sw-resizesw-resize s-resize w-rezize text wait help progress inherit
b) 指示和选择光标:pointer,text,crosshair
c) 移动光标:move,e-resize
d) 等待和前进:wait, progress
e) 提供帮助:help
f) 图形光标:cursor:url(“”),point.
3.轮廓
a) 设置轮廓样式:(取值和border差不多,但是这个更加灵活!)outline-style:double dashed dotted groove hidden inset none outset ridge;
b) 轮廓宽度:outline-width:medium thickthin inherit,取值;
c) 设置轮廓颜色:outline-color:invert inherit<color>
d) 汇总:border:10px doublered;
e) 和border的区别:可以得到边框的效果,但不会导致跳跃。
十四.非屏幕媒体
1.设计特定于媒体的样式表
2.分页媒体
3.声音样式