第一周总结之CSS

CSS简介

一、CSS 级联样式表 层叠样式表 cascading style sheets

 

二、CSS语法：选择符{属性：属性值}

 

三、CSS样式

内部样式 内联样式 外部样式

1.内部样式<style type=”text/css”></style>(最好放在head里面)

2.外部样式（最好放在head中）

<link rel=”stylesheet” type=”text/css” href=””/>

<style>

@import url();

</style>

注：@与import之间没有空格 URL和标号之间也没有空格，必须以;结尾

3.内联样式表

<属性值 style=”属性：属性值”></标签>

内联优先级大于其他两者，而内部和外部是看书写顺序有关，就近原则

 

四、CSS选择符

元素选择器

Id选择器

Class选择器

群组选择器

包含选择器

伪类选择器

：link

：visited

：hover

：active

使用时应注意顺序，错误顺序有时会失效

 

 

 

 

/*****************************************************************************/

 

 

 

五、权重：

1000   10 10 1

内联   id     class/伪类 类型选择符/伪元素选择符

0   0 0 0

 

{通配符 子选择器 继承}  权重为0

包含选择符是每个元素权重之和

 

六、CSS文本声明

font-size： 设置文字大小，默认16px，1em=16

color： 设置文本颜色（十六进制，三元色，英文单词）

font-family：字体，字体，字体；设置文字字体（中文或英文有空格需加双引号）

 

font-weight: 设置文本加粗

bolder bold normal lighter（100-400   500-900）

 

font-style 设置文本倾斜

ltalic    oblique normal （前两者属性浏览器区分不明显）

 

text-align 设置文本水平对齐方式（可以让内联元素居中）

left right center justifuy（两端对齐）

 

vertical-align 设置文本垂直对齐

top bottom middle

注：只能控制图片跟文字之间垂直关系，属性加在img上

 

line-height 设置文本行高

 

字号 行高 字体声明的简写形式

font：12px/20px  “宋体”

注：简写时，font-size和line-height只能通过/组成一个值，不能分开

顺序不能改变，只在同时制定font-size和font-family有用

 

text-decoretion 设置文本修饰

none   underline （下划线） overline（上划线）

line-through（删除线）   blink（闪烁，高版本不支持）

 

border-width 设置边框高度

 

border-style 设置边框类型

solid（实线） dashed（虚线） dotted（点状） double（双线）

groove（槽线） inset（内嵌式） outset（凸起） ridge（脊线）

 

border-color 设置边框颜色

简写 border：1px solid #ccc；

 

text-indent 设置文本首行缩进

注：可以取负值，只对第一行有用

 

text-transform 设置字母大小写

none capitalize（文本每个字母大写字母开头） uppercase（定义文本只有大写字母） lowercase（定义文本五大写字母） inherit（从父元素继承）

 

letter-spacing 设置英文字母，汉字的间距

word-spacing 控制英文单词词句

 

 

font属性简写

font-style|font-variant（小体大写字母）|font-weight|font-size/line-height|font-family

 

七、CSS列表声明

list-style-type 定义列表符号样式

disc（实心圆） circle（空心圆）

Square（实心方块） none

 

list-style-position 定义列表符号位置

outset（外边） inset（里边）

 

list-style-image 设置图片作为列表符号

简写：list-style:none

          list-style:url（） inside；

八、背景声明

background-color 设置背景颜色

 

background-image 设置背景图片

注：网页上有两种形式图片对齐：插入图片，背景图

 

background-repeat 设置图片是否平铺

repeat no-repeat repeat-x repeat-y

 

background-position：value1 value2 设置背景图片位置

 

background-attachment 设置背景图片状态

scroll（滚动） fixed（固定）

 

简写：background：#ccc url（） repeat  fixed position；

 

九、盒模型

盒模型：是css布局的基石，它规定了网页元素如何显示以及元素间相互关系

 

padding填充：一个元素内容到元素边缘之间的距离，也称补白

用法：1、用来调整内容在容器中的位置关系

      2、用来调整子元素在父元素中的位置关系

注：padding添加在父元素上

Padding是额外加在元素原有大小之上的

 

margin：在元素外边的空白区域，称为边距

用法：控制同辈元素之间的位置关系

  上下排列的时候会重叠

  左右排列的时候不会重叠

  margin可以给负值 padding不可以

如果父元素跟着子元素掉下来（在父元素加float或者border）

 

 

 

 

十、难点，总结

link和@import区别

1.link属于xhtml标签，而@impor完全是css提供的一种方式。Link标签除了可以加载css外，还可以加载其他的，而@import不行

2.加载顺序区别：当一个页面被加载的时候，link引用的css会同时被加载，而@import引用的css会等页面全部下载完成再被加载，所以有的时候开始会没有样式

3.兼容性的差别：@import是css2.1提出的，所以老的浏览器不支持，@import只能在IE5以上才能识别，而link无此问题

4.使用dom控制样式时的差别：当使用javascript控制dom去改变样式时，只能使用link，@import不是dom可以控制的

 

 

float（脱离文档流）

文档流：如果不加css样式，所有的排版会从上往下依次排列

当用了float时，这个板块就脱离了文档流，不在占位置，下面的标签会移上来，造成重叠的视觉效果

 

 

.jpg 适用颜色丰富的图像

.gif 支持透明，支持动画

.png 支持透明，不支持动画