网页重构基础（三）

21．CSS语法

　　a.规则为一个选择器后面加多个或一个声明，声明的格式为“属性：值”,需要用花括号括起来

　　b.记得用引号将值括起来，如果值为多个单词。但是key:1px solid #fff;这种对应多值得例外

　　c.每条声明都要加分号隔开，并且建议独立一行，易读。

22．如何将CSS应用到网页

　　

<head>
    <link rel="stylesheet" href=xxx.css">
</head>

 

23．CSS选择符

　　a.id选择符

　　b.class选择符

　　c.属性选择符

　　d.派生选择符

24．选择符：class和id

　　a.class选择器可以多个

　　b.id只有一个，所以对应的选择器只适用于这一个

25．font类属性

　　a.font-family:文字风格

　　b.font-size:文字大小

　　c.font-weight:文字粗细

　　d.font-style:斜体还是粗体

26．text类属性

　　a.text-align:文本位置

　　b.text-indent:首行缩进。建议用em

　　c.word-spacing:字间隔

　　d.letter-spacing:字母间隔

　　e.text-transform:字体转换

　　f.text-decoration:none。文本装饰。常用来清楚链接的下划线

　　g.vertival-align:middle。 内联元素，上下位置. 可用于表格等。

27．background背景属性

　　a.background-image:背景图像

　　b.background-size:背景大小 可以100%，100%

　　c.background-repeat:背景是否重复

　　d.background-position:背景位置

　　f.background-color:背景颜色

28．border边框属性

　　a.border-color:颜色

　　b.border-style:样式，dotted,solid

　　c.border-width:宽度

　　d.border-radius:边角形状

　　f.box-shadow:边框阴影  可以用来做凹凸效果

29．float浮动

　　a.float:left/right

　　b.浮动以后会脱离原来的文档流，悬浮起来。出现超出父元素区域，可以添加overflow：hidden;

30．position定位

  a.position:relative.  可以单用，相对于正常位置。也可以做相对点，定位坐标

  b.position:absolute;  一般是相对一个点做定位。常用。

　　注：他相对的是临近的第一个父元素

  c.position:fixed;    固定显示在屏幕的某个部位。可以用来将网页头部显示在顶部。

31．盒模型

  a.margin:  对应区域外边距。

  b.border:  区域边框

  c.padding: 内边距

  d.box-sizing: 当属性为border-box时，width定义的是包括边框border和内边距padding的宽度。当属性为content-box是，width定义的只是内容区域的宽度。

　　　　　　　　在布局定义总体宽度时有影响。

32．补白

　　指内边距padding。通常可以在边框内加补白，显得更美观。

33．浏览器兼容性

  a.大部分兼容都指的是IE家族。兼容性问题需详细篇幅研究

　　b.一般兼容前缀：

　　　　-moz-:火狐firefox

     -webkit-:mac浏览器safari

     -o-:Opeara

 

posted on 2015-12-15 10:16  流离之人  阅读(155)  评论(0)    收藏  举报