css 知识汇总与补充（一）

css : cascading style sheet 层叠样式表

一、引入css 

1.行间样式   

<div style="width: 100px;height: 100px;background-color: green;"></div>

2.页面级css

<style type="text/css">div{width: 100px;height: 100px;background-color: red;}</style>

3.外部css文件

<link rel="stylesheet" type="text/css" href="1.css">

二、正确认识域名和地址

www.baidu.com  域名 ---   dns解析 --- 192.168.000.001  地址

异步加载：多进程同时进行（一个线程下载html，一个线程下载css）

异步：同时进行（与现实生活相反）

三、选择器

1.class 可以公用（多个标签同一个class） 

 id  一对一

标签选择器：span

通配符选择器： *

2.各类选择器的优先级比较：

!important > 行间样式 > id > class | 属性选择器[] > 标签选择器 > 通配符

3.权重（以256进制计算）

!important        Infinity行间样式          1000  256进制id                100class|属性|伪类   10标签|伪元素       1通配符            0

4.

父子选择器/派生选择器（不是必须用标签选择器） div span{ }

直接子元素选择器  div > em{}

section 与 div 效果相同

并列选择器 div.demo{}

分组选择器 div,span,em{}

5.字体颜色

1>土鳖式（纯英文单词）

2>颜色代码

r:red    g:green   b:blue  

00-ff 

#000000 黑

transparent 透明色

3>颜色函数 rgb(0-255,0-255,0-255)

四、快速画出一个三角形

div{/*三角形*/width:0px;height: 0px;border:100px solid black;border-left-color: transparent;/*透明色*/border-right-color:  transparent;border-bottom-color:  pink;border-top-color:  transparent;}

通过更改颜色变换为