一,为什么要使用DIV+CSS
DIV+CSS布局:(DIV是一个空的标签,没有什么效果)
代码:比较简洁
页面优化:有利于搜索引擎的搜索
打开速度:载入一点就显示一点,载入速度块
重构页面:内容样式相分离,当我们重构页面布局时(如:更换皮肤时),只会针对div元素重新定义其具体位置,样式就行了
兼容性:不太好
Table布局:(布局时需要加Tr,Td相互配合,不写的话布局不了,所以直接使用div布局最好,不需要繁琐的加 tr , td )
代码:很繁琐,重复太多
页面优化:不利于搜索引擎的搜索
打开速度: 只有在表格体内的内容全部载入完后,才一次性显示该系统,所以打开速度非常慢(如果在网速非常卡的时候,需要 很长的时间才能显示出来,在使用div的时候,无论网速是否卡顿,网页都会加载一点显示一点,所以加载速度块)
重构页面:table基础上进行改版,几乎必须改变所有内容注入渠道,太过于麻烦,div就比较简单
兼容性:好,(但是现在随着浏览器的进步,兼容性已经不态重要)
注:所以主要使用div+css来避免大容量表格的出现,在一些细节处理上,有时候用表格div来的简单奏效,比如格式数据。一些成熟的大网站都是如此。
二,分区标签
使用分区标签不会对内容造成任何修饰,利于网页内容的修饰
标签名:<div></div>
用法:区域标签,容器标签,用来作为多种HTML标签的组合容器,对该区域进行操作和设置,就可以完成对区域块中元素的操作和设置。《注意:不能嵌套在<p></p>段落标签中》
标签名:<span></span>
用法:片段,文字,图片等内容的容器标签。
文本级元素,默认不会占整行,一行可以显示多个span.
三,CSS基础知识介绍
1,css时层叠样式表,即多重样式定义被层叠在一起成为一个整体,在页面设置中是标准的布局语言,用来控制怨怒苏的尺寸,颜色和排版。
2,用来将“页面结构代码”和“网页格式风格代码”分离开,从而使页面设计者可以对页面的布局进行更多的控制。
HTML负责结构,CSS负责样式,它俩地分开来写,即内容样式行为相分离,行为:JS交互
内容样式行为相分离,将他们分开来写的好处是:便于代码的优化
3.1css基本语法(选择器)
选择器的分类:
html元素选择器:(HTML标签)写上那个标签,就选中页面中所有的对应的标签
class类选择器:需要加上class,给对应的class命名,之后选择不同的class类的名字,进行设置(选中的名字前加上因为的句号《 . 》)
" * "通用选择器:找到页面中的所有元素
" 逗号 ”群组选择器:用逗号分隔,将所需要的元素(标签)用逗号分割包括类选择器和id选择器都可以连接
" 空格 "后代选择器:空格标签后代选择器,将父级元素加上,空格之后加上子代的元素,子代的所有元素都会被找到
" 大于号 "直接子代选择器:父级元素>子级元素,只选择父级下面的子级元素,子级以下的元素不选择
属性选择器:根据标签上的属性来设定,标签属性也可以自行设定,除了特殊字符以外(字符),属性如果有两个以上选择是需要加上 [ ].
兄弟选择器:+号,代表相邻的兄弟
~ 波浪线,代表所有的兄弟
总结:选择器总共有九类选择器
id选择器,class类选择器,ele元素选择器,*通用选择器,“空格”子代选择器,“逗号”群组选择器,“大于号”直接子代选择器,属性选择器,兄弟选择器
CSS的继承:只要是修饰字体的(颜色,大小,字体,样式等)都会被继承。
有些属性也是不能被继承:border边框,padding填充,margin边框粗细
3.2,CSS的引入方式
第一:内联样式,直接把CSS代码用style属性添加到开始标签中
<body>
<h1 style="color:red">这是我们的内联样式</h1>
</body>
第二:内部样式,直接把代码添加到头部head标签的style标签中
<head>#style标签必须放在head标签内,网页读取时有优先级,先让网页读取head头部的程序
<style type='text/css'> #type:指定type类型,引入的是css文件
h2{
background:green;
}
</style>
</head>
<body>
<h2>内部引入的css样式,内部样式</h2>
</body>
第三:外部连接样式,需要建立一个css文件夹,在文件夹内添加style.css文件
#style.css文件夹内容
h3{
background:black;
}
<head>
<link rel="stylesheet" type='text/css' href='css/style.css' />
#link是HTML的标签,可以引入css,rel是一个固定语法修饰网页属于css,type:指定type类型,引入的是css文件
</head>
<body>
<h3>这是link引入的Css样式,外部样式</h3>
</body>
第四:外联样式
#s1.css文件内容
body{
background:salmon;
}
<head>
<style>
@import "css/s1.css"; #css引入外联的样式,css3的新属性
</style>
</head>
总结:在开始标签内没有style引入的样式,都得放在head标签内
四种引入方式:1内部,2内联,3外部,4外联
注释:/* */ 有利于自己或他人在修改代码时理解代码得含义
3.4,css的单位和值
颜色的命名方式:数值,百分百,16进制,英文
<style>
h1{
color:red;
}
h2{
color:#223355;
}
h3{
color:rgb(200,50,1);/*范围在0~255,还可以使用百分比*/
}
h4{
color:red;
}
</style>
长度单位:
px:像素,1像素就是屏幕上的一个小方格,由于显示器不同,方格也是有差异的。
em:1em就是当前字体的大小,如果当前字体为16px,那么1em就是16px,2em,就是32px,依次加倍。
<style>
div{
width:100px;
height:100px;
border:1px solid #3b3f54;
font-size:24px;/*像素*/
}
div span{/*根据父元素的像素来加倍像素,父元素是12,span的像素就为24,依次加倍*/
font-size: 2em;
}
</style>