1.主流浏览器及其内核:
主流浏览器:①.有一定市场份额 ②.有自己独立研发的内核
例如:IE、Firefox、Google chrome、Safari、Opera
对应的内核为trident、Gecko、Webkit/blink、Webkit、presto
2.html注释格式 <!-- -->
快捷键 control + ?
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一样
class选择器
为多对多关系
标签选择器
div和span里面不设置id、class属性
通配符选择器
*{/直接在里面写内容/}
四种选择器优先级
important>行间样式css引入>id>class==属性选择器>标签选择器>通配符选择器
css权重
7.复杂选择器
父子选择器/派生选择器
*不一定非要用标签选择器写,可以用任何选择器写
直接子元素选择器
只对直接子类有用,对子类的子类没用
父子之间加>即可
并列选择器
所有的选择器都可以并列起来,只要去掉空格就行
权重计算问题
下图中,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;
设置容器以及边界长宽高可以画三角
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:无论滚动条怎么动该容器都不动