初学CSS

1.主流浏览器及其内核：

主流浏览器：①.有一定市场份额  ②.有自己独立研发的内核

例如：IE、Firefox、Google chrome、Safari、Opera

对应的内核为trident、Gecko、Webkit/blink、Webkit、presto

2.html注释格式  

快捷键  control + ？

---

html代码

3.CSS全称为：cascading style sheet   层叠样式表

4.CSS引入：

①.行间样式

②.页面级css 在head标签里写一个style标签

③.外部css文件

在head里用link标签引入

5.域名：www.baidu.com   ----->经过dns解析   -------> 成为一个物理地址

输入域名会把百度的许多个网页副本（它的网页代码）发到你的浏览器上

6.选择器

id选择器

为一对一的关系，一个id只能用一次，就像darryring、roseonly一样

id选择器实例

id选择器结果

class选择器

为多对多关系

class选择器实例

class选择器结果

标签选择器

div和span里面不设置id、class属性  

标签选择器实例

标签选择器结果

通配符选择器

*{/直接在里面写内容/}

四种选择器优先级

important>行间样式css引入>id>class==属性选择器>标签选择器>通配符选择器

css权重

css权重(且进制为256进制)

7.复杂选择器

父子选择器/派生选择器

*不一定非要用标签选择器写，可以用任何选择器写

父子选择器示例

运行结果

直接子元素选择器

只对直接子类有用，对子类的子类没用

父子之间加>即可

并列选择器

所有的选择器都可以并列起来，只要去掉空格就行

选中的为2（div必须在.demo之前，否则无法识别）

权重计算问题

下图中，1应该显示为何种颜色

权重计算

所有的选择权重相加（无论是否并列是否加空格，有就相加）

权重相同时，后面代码会覆盖前面代码

分组选择器

用逗号将标签分隔开

8.css基础属性

font-size

默认为16px（像素）

font-weight

值：bold(加粗)，lighter(细体)，normal(正常),bolder(更粗)  也可以写数字：100、200、300、400、500、600...

font-style

值：italic(斜体)

font-family(字体)

值：arial(最常用)

color(设置字体颜色)

1).英文单词(少用，因为颜色太单调)    transparent(透明色)

2).颜色代码  #rgb(每个均为两位16进制数代表饱和度)

#000000（黑色）   #ff0000（红色）  #00ff00（绿色）  #0000ff（蓝色） #ffffff（白色）

若没两位都重复，可以将六位改为三位

#f40（淘宝红）

3).颜色函数

color:rgb(255,255,255)  (白色)

border(边框)

border：width,style,color；(三个属性)

border-left-color = red;

border-top-color = green;

设置容器以及边界长宽高可以画三角

利用border画三角

text-align(对齐方式)：left,center.right

line-height(单行文本所占高度)

文本居中方法：让单行文本所占高度为容器高度

text-indent(文本缩进，单位为em)

1em = 1 * font-size  (line-height也能用em为行高)

text-decoration(文本装饰):underline(下划线)  overline(上划线) linethrow(划线)

cursor(光标):pointer（小手）  help（小问号）

opacity:(透明度)

9.伪类选择器

:hover

鼠标移到控制区域后才会受带:hover的标签影响

伪类选择器

10.标签归类

行级元素(inline)

1).特点：内容决定元素所占位置；不可以通过css改变宽高

2).举例：span strong em a del

块级元素(block)

1).特点：独占一行；可以通过css改变宽高

2).举例：div p ul li ol form address

行级块元素(inline-block)

1).特点：内容决定大小；可以改宽高

2).实例：img

特殊属性：display:inline、block、inline-block

可以将标签改变行块级元素

11.编程习惯：

1).一个容器对应一个css类（这种习惯不好）

2).多对多,先定义功能，后适配功能

好的编程习惯

3).利用标签选择器初始化标签

通配符标签初始化

12.盒子模型

盒子组成部分

由外到内顺序为：

margin(外边距)+border(边框)+padding(内边距)+(content=width+height)(内容) = 盒子

控制台(右键--检查)

盒模型可视部分计算

计算

特别的，当padding为两个值时，分别代表上下和左右，为三个值时，分别代表上、左右、下。

可视部分不包括margin，不算在盒模型内。

13.利用盒模型写一个远视图

远视图代码

运行结果

14.定位技术(属性position)

取值有以下几种：

1).absolute；并配合left、top、right、bottom关键字

body标签有个默认的margin有8像素，大多数情况都给手动去掉

用了absolute以后div容器之间可以重叠，而不是互相顶开

2).relative;独特之处：保留原来位置进行定位

3).fixed:无论滚动条怎么动该容器都不动

absolute相对于最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位。

relative相对自己出生的位置进行定位

用relative作为参照物，用absolute作为本身。例如子容器以父容器为参照物进行定位，则父容器设为relative，子容器设为absolute