CSS

什么是css

1          Cascading Style Sheets：层叠式样式表

2          Css是用来对html页面进行美化的，所以使用css的前提是有html的基础

3          多重样式将重叠为一个（即：在不同地方为同一个元素定义多种样式的话，将按不同地方的优先权来取，取其中的拥有最高优先权的），以下是优先级（从低到高）

3.1        浏览器缺省值

3.2        外部样式表（于css文件内，使用link引入页面）

3.3        内部样式表（于head内的style标签内定义）

3.4        内联样式表（于html标签内，通过html标签的style属性定义）

 

 

Css语法

1          Css语法由三部分构成：选择器{属性：值}，例：a{color:red}

2          为同样的选择器定义多个属性值时使用;分号分割，例：body{color:red; size:12px}

3          为多个选择器定义同样的属性时使用,逗点分割，例：h1,h2,h3{color:red}

 

 

Css选择器

1          html标签选择器：通过html标签定位，例：a{…}定义标签a的样式

2          id选择器：通过元素id定位，例：#divTitle{…}定义id为divTitle的样式（注意#号）

3          class选择器：通过css类定位，例：.cs{…}定义class为cs的元素的样式（注意.号）

4          关联选择器：通过关联关系定位，例：#gv a{…}定义id为gv下的所有标签为a的元素的样式（注意空格）

5          伪元素选择器：通过已定义的伪元素进行定位，例：#tab tr:hover{…}定义id为tab的元素的tr中的活动元素的样式

 

 

Css背景（background=x，[]中的为默认值）

1.       x-color:[transparent]，背景颜色，例：x-color:red

2.       x-image:[none]，背景图片，例：x-image:url(image/img.gif)

3.       x-repeat:[repeat]，背景图片是否重复，例：x-repeat:no-repeat

4.       x-attachment:[scroll]，背景图片是否随页面滚动，例：x-attachment:fixed

5.       x-position:[0%,0%]，背景图片起始位置，例：x-position:center left

6.       x:……简写以上属性，例：x:red url(imgs/img.gif) no-repeat fixed center可缺省设置，缺省设置的值为默认值，例：x:red url(imgs/img.gif)

 

 

css文本（text=x，[]中的为默认值）

1.       x-align:[left]，文本对其，例：x-align:center

2.       word-spacing，空格宽度，例：word-spacing:10px

3.       letter-spacing，字间距，例：letter-spacing:3px

 

 

css字体（font=x，[]中的为默认值）

1.       x-style，字体风格，例：x-style:normal

2.       x-weight，字体粗细，例：x-weight:500（直接设置数值）

3.       x-size，文字大小，例：x-size:12px

4.       x-family，使用何种字体，例：x-family:宋体,黑体,隶书;如果不支持前一种则使用后一种，以此类推

 

 

css列表（list-style=x，[]中的为默认值）

1.       x-type:[disc]，列表项标记类型，x-type:circle

2.       x-image:[none]，列表项图片，x-image:url(../imgs/img.gif)

3.       x:……简写以上属性，例：x: url(../imgs/img.gif)

 

 

css表格

1.       border-collapse:[separate]，是否合并表格边框，例：border-collapse:collapse

2.       border-spacing:[not specified]，边框间距，例：border-spacing:3px

 

 

css盒模型

1.       margin:top right bottom left，外边补白，例：margin:1px

2.       padding:top right bottom left，内边补白，例：padding:1px,2px,3px,4px

 

 

css边框(border=x)

1.       x-style，边框样式，x-style:solid

2.       x-width，边框宽度，x-width:1px

3.       x-color，边框颜色，x-color:red

4.       x:……以上样式的简写，例：x:solid 1px red

 

 

css定位（position=x）

1          position:[static]，如何定位

1.1        static，默认设置，作为正常的流输出

1.2        relative，相对于其原本位置偏移，并保留原本的空间(注意：当使用了absolute或fixed或display=none时，流中将不会再有这些元素，所以请重新审视流)

1.3        absolute，相对于其包含块进行偏移，并不保留其原本的空间

1.4        fixed，相对于窗口本身进行偏移，并不保留其原本空间

2          top、right、bottom、left偏移，例，top:100px

3          overflow:[auto]/scroll/hidden，内容溢出时如何处理，例：overflow:hidden

4          z-index:[0]，设置元素堆叠顺序，例：z-index:1

 

 

杂项

1          浮动：float:right/left

1.1        浮动的框可以向左或向右移动，知道它的外边缘碰到包含框或另一个浮动边框为止

1.2        由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样

2          cursor:move/pointer等等，鼠标的类型(图标)

3          display:none/block，设置如何显示元素，为none时就不存在于流中

4          visibility:hidden/visible，设置元素可见或不可见，注意与display的区别

5          伪类

5.1        :hover，将鼠标悬浮在元素上方时，例：a:hover{font:20px}

5.2        :link，未被访问过的链接

5.3        :visited，访问过的链接