CSS基础知识(一)

结构、样式、行为相分离

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选择器:多对多


3.标签选择器:直接在css文件里选标签,eg:div那么所有的div都会被选择)



4.通配符选择器:*。*代表任意的,所有标签都会受影响
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。


 

阅读更多

没有更多推荐了,返回首页