「HTML+CSS」来源:渡一教育
css初级篇
注释
引入css的方式
- 行间样式
- 页面级css
- 外部css文件
.css文件选择器
- id选择器
- class选择器
- 标签选择器
- 通配符选择器
- 属性选择器
- !important选择器
- 并列选择器
- 分组选择器
结构式相分离开发
hmtl—css–javascript
结构—样式—行为html的大部分用不上,后面又在持续增加,自身又自成一体,用不上
比如:html5.0包含了javascript
现在h5浏览器是主流
| 主流浏览器有: | 主流:一定的市场份额,及其自主内核,例 |
|---|---|
| 浏览器 | 自主内核 |
| IE | trident |
| Firefox | Gecko |
| Google chrome | Webkit / blink(又开发出一个用) |
| Safari | Webkit |
| Opera | presto |
注释
作用:
1.注释内容
2.调式bug
一天有40%的时间写代码
其余时间在写报告,沟通
一个新项目的话
一周做完,三周调试
改来改去
自己调式虚拟数据
前后端连调数据
开发就成了
7分调式,三分开发
引入css的方式
css
全称:cascading style sheet
层叠样式表
引入css的方式
1.行间样式
<div style="css代码">
2.页面级css
<style type="text/css">
这样下面的套娃就有样式
<div>
</div>
</style>
3,外部css文件
<head>
<link rel="stylesheet" type="text/css" href="url或路径">
</head>
那么浏览器是怎么工作的呢
开俩个线程边(异步方式),下载边加载
同步(单个时间长差) 异步(多个时间差)
一个队伍打饭 多个队伍打饭
.css文件选择器
.css文件选择器
1.id选择器 |
编辑器 | .css文件
<div id="only"></div> | #only{css代码;}
说明:id只能一对一,不能一对多
id 一个元素只能对应一个元素值
2.class选择器
编辑器 | .css文件
<div class="demo"></div> | .dmeo{css代码;}
说明:class能一对多
就是多个class对应demo值
3.标签选择器
编辑器 | .css文件
只要是<div>标签都会受到影响| div{css代码;}
,且无视套娃
4.通配符选择器
编辑器 | .css文件
所有标签都受到影响 | *{css代码;}
|
5.属性选择器
编辑器 | .css文件
<div id="only class="demo"> | [id]{css代码;}
套娃 | 或
| [id="only"]{}
6.!important选择器
编辑器 | .css文件
| 比如有俩个,但我添加后就是第一
| div{css代码!important;}
7.并列选择器
组合多个选择器条件
编辑器 | .css文件
<div></div> |div.demo{css代码;}
<div class="demo"></div> |
<p class="demo"></p> |
选择的是div下的demo而不是p下的demo
重点:相同的 并列选择器 锁定一个目标时;有俩种判断情况
1.把选择器的权重相加,值高的选择
2.当权重相同时,后来先到.用后面的
8.分组选择器
共用一个css样式
编辑器 | .css文件
<em></em> | em.strong.span{css代码;}
<strong></strong> |
<span></<span>> |
css权重
首先来个排序热热身
!important >行间样式>class|属性>标签>通配符
同级间的顺序又可以进行排序,自己排去
css权重-css权重-css权重
1.!important 正无穷大
2.行间样式 1000(256进制)
3.id 100(256进制)
4.class|属性|伪类 10(256进制)
5.标签|伪元素 1(256进制)
6.通配符 0(256进制)
3120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
