学习css的总结

一．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.声音样式