html5+css(2)

css构造：h1{ 属性： 值；}

特殊性：标签<类<多个类<id重要性：！import（特殊情况，否则不推荐）

操作表样式

1.外，嵌入，内联

2.与媒体相关的样式表 在link里加media属性，screen print

选择器

元素 ｛｝

h1 em{ }上下文

.类｛｝

#id{ }

strong.类｛｝

a:link{ }伪类

a[属性]｛｝

多个类的时候，类名之间没有空格

li:first-child/last-child{  }

first-line first-letter

状态！：

a.link 从未被激活的指向

a.visited 访问者已激活过的链接的外观

a.focus 前提是链接通过键盘选择并已准备好激活的

a.hover 设置光标指向链接时链接的外观

a.active 设置激活过的链接外观

【属性~=“value”】以空格分隔的多个单词，其中含value

 |= 以value-打头

^= 以value打头，value作为完整的单词或者单词的一部分

$= 以value结尾，~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*= 属性值为指定值的子字符串

文本样式：

字体：font-family 可以多个 系统找最近的有的加载，中间逗号

斜体：font-style:italic;

粗体：font-weight: bold bolder lighter

大小：-size 对body设置 font-size=100% 后面用em

行高：line-height 段落内每行之间的距离

  同时设置所有：size/line-height(可选，出现必在sizi/后) family 

颜色：-color

  背景：background background-color background-image -repeat -position -attachment(滚动) fixed scroll  

background{    color url(img) no-repeat 170px 20px }

间距： word-spacing  letter-spacing

缩进：text-indent

对齐：text-align: center/left/right/justify(两边对齐)

大小写：text-transform: uppercase/lowercase

大型小写字母：font-variant:small-caps

装饰文本：text-decoration underline overline line-through

css布局：

默认样式重置化：normalize.css

box-sizing: border-size;

显示类型和可见性：inline block inline-block     visibility

高度宽度：width

*｛

-webkit-box-sizing: border-size;

box-sizing: border-size;

}

内边距：padding

边框：border: 1px solid(style) yanse

外边据：margin   居中：margin：0 auto;

浮动：float 

清除浮动：clear: left;    clearfix方法    overflow: hidden;

元素定位：position：relative/absolute

栈中定位元素：z-index;

处理溢出：overflow: hidden/scroll/auto;

垂直对齐：vertical-align: bottom;

修改鼠标指针：cusor:.....

构造响应式网站：

可伸缩图像：max-width: 100%

创建弹性布局网络：.page{max-width:960px}

   main{ width:62.5% }

百分数相对于包含元素的容器，em相对于元素的font-size

媒体查询： @media print{          }

使用css3进行增强：

圆角：border-radius:    50%时是圆

文本添加影音阴影：text-shadow: x偏移 y偏移 模糊半径（可选） 颜色

    多重阴影是加都好

为其他元素加阴影：box-shadow:  x y r color inset(可选，内阴影)

多重背景：

渐变背景：background-color:

    background: linear-gradient(to xx,color1,color2)    radial-gradient(范围x 范围y at位置 颜色 可加百分比)

不透明度：opacity： 默认为1

生成内容的效果：.more:after{ content:"xxx"   }  可加三角形

sprite拼合图像