1.主流浏览器及其内核：
主流浏览器：①.有一定市场份额 ②.有自己独立研发的内核
例如：IE、Firefox、Google chrome、Safari、Opera
对应的内核为trident、Gecko、Webkit/blink、Webkit、presto
2.html注释格式 <!-- -->
快捷键 control + ？
html代码
3.CSS全称为：cascading style sheet 层叠样式表
4.CSS引入：
①.行间样式<div style = " css内容">
②.页面级css 在head标签里写一个style标签
<style></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:无论滚动条怎么动该容器都不动
网友评论