结构、样式、行为相分离
html css javascript
主流浏览器:市场份额高、必须有独立研发的内核
浏览器包括:shell、内核
shell:外壳,浏览器的操作类的展示页面;
内核:操作的路径、速度等等问题
包含:IE、Firefox、Google chrome、Safari、Opera
IE等主流浏览器的内核:看图
Ctrl+?==注释号
CSS部分;
css:cascading style sheet 层叠样式表
引入css:
1.行间样式,头标签加style=""
2.页面级css:在<head>里面写<style>标签
<style>
<div>{
}
</div>
</style>
3.外部css文件:专门建立一个css文件div,在html文件里 用<link rel=stylesheet" type="text/css" href="lesson3.css"(超文本引用相对路径)
快捷输入方式;
打div:div+tab
打link:link+tab
选择器:
1.id 选择器:一一对应
2.class选择器:多对多
5.属性选择器
6.!important
7.伪类选择器
8.伪元素选择器
9. 父子选择器|派生选择器
10. 直接子元素选择器
11. 并列选择器
12. 分组选择器
选择器特点:
1.id 选择器:一一对应
2.class选择器:多对多
3.标签选择器:直接在css文件里选标签,eg:选div那么所有的div都会被选择)
4.通配符选择器:*,*代表任意的,所有标签都会受影响
覆盖问题:
1.id优先级高于class。
2.!important>行间样式>id>class|属性选择器(优先级一样,按前后顺序排,谁在后面听谁的)>标签选择器>通配符选择器。
3.css权重:看图256进制
通过计算权重来确定哪个覆盖哪个
权重值对应表:
示例:
1.父子选择器|派生选择器
父子结构来选中一部分,名称不一定是标签,也可以是内容,也可以是间接的,不一定是“父子结构”,也可以是“子孙结构”。
2.直接子元素选择器
div > em(em是一个示例) 表示div下的直接一层的子元素。
浏览器遍历父子选择器的顺序是从右向左的。
并列选择器:用多个限制条件选定一个元素,并且中间不加空格写到一起,但标签必须写到前面。
判断听谁的,只要写在同一行的选择器,将他们的权重相加。
权重一样时后面的覆盖前面的。
分组选择器:分开的组用逗号相连,这样共用一个款式(例如颜色)。
font-size:设置字体大小,设置的是字体的高。
font-weight:bold(==<strong标签>);
从细到粗:lighter normal bold bolder 数字表达方式 100 200 300 400 --900。
font-style:italic(==<em>)
font-family:arial字体(有很多值,查css3)
color:三种写法:
1.纯英文单词(开发时严禁这种写法)
2.颜色代码(两种)
三原色:红绿蓝
每两位代表一个颜色,为十六进制,代表颜色的饱和度。
三组每个两位的数字都相同的话则可以简写。
3.颜色函数 rgb(0,0,0);范围:0--255;
border:粗细 实心空心 颜色
1px solid (实心) black 符合属性
boder-width:20px;
border-style;solid(实体)、dotted(点状虚线)、dashed(条状虚线)。
透明色(跟背景一个色):transparent。