(一)初识div+css
关于div+css,一直以来都是听其名,而不知其为何。今天看了半天的视频,终于对此略有了解,感觉挺好的,相比之前的table布局页面,div+css就是一把页面布局利器!!
div全称division(分割、分开、部门),css全称Cascading style sheet(层叠式样式表)
网页的布局分为三个时期:table布局,table+css布局(过渡时期),div+css布局(当前主流)
相对于div+css布局,table布局的缺点:1、显示样式和数据绑定在一起;2、布局的灵活度不高;
3、大量的<table>标签,造成代码冗余;4、带宽较大;5、搜索引擎不喜欢
优点: 1、理解比较简单;2、不同浏览器,显示结果相同;3、显示数据效果很好
简单描述了div+css之后,那么如何使用它们呢?
使用css,需要小了解css的常用选择器:
1、类选择器:定义格式(.class1{属性1:值; 属性2:值;})
引用格式:<div class="class1"> </div>
2、id选择器:定义格式(#id1{属性1:值; 属性2:值;})
引用格式:<div id="id1"> </div>
3、html元素选择器:定义格式(元素{属性1:值; 属性2:值;})
引用格式:<元素></元素>
4、通配符选择器:定义格式(*{属性1:值; 属性2:值;})
应用于页面内的所有内容
5、父子选择器:定义格式(.class1 span{属性1:值; 属性2:值;}或.id1 span{属性1:值; 属性2:值;})
<div class="class1"或者id="id1">不<span>抛弃</span>不<span>放弃</span></div>
注意:父子选择器不能有太多级数
选择器的优先级:id选择器>类选择器>html元素选择器>通配符选择器
构造了css之后,那么如何在html文件中进行引用呢?
html中引用css有三种方式:
1、外部样式表:
<head>
<link rel="stylesheet" type="text/css" href="名字1.css"/>
<link rel="stylesheet" type="text/css" href="名字2.css"/>
<link rel="stylesheet" type="text/css" href="名字3.css"/>
</head>
2、内部样式表
<head>
<style type="text/css">
body{属性1:值; 属性2:值;}
p{属性1:值; 属性2:值;}
</style>
</head>
3、内联样式表
<p style="属性1:值; 属性2:值"></p>
优先级:内联样式表>内部样式表>外部样式表
css文件中,若多个选择器有相同的属性值,如何操作呢,或者一个css文件如何引入另一个css文件呢?
1、若一个css文件中的多个选择器有相同的属性值
.class1,#id1,p{属性1:值; 属性2:值;} /*相同属性进行合并*/
2、一个css文件引入另一个css文件
@import url() /*将多个css文件导入到一个css文件中,如今通常使用link方法*/
css的使用基本就是这些了,关于属性的设置还有很多内容,由于刚开始学习,知道的属性少之又少,看来这部分主要靠查阅帮助文档进行熟记了。。