使用 table 进行布局存在缺陷,而一般的布局都会采用 DIV+CSS 来进行布局。
Div 它是一个html 标签,一个块级元素(单独显示一行)。它单独使用没有任何意义,必须结合 CSS 来使用。它主要用于页面的布局。
Span 它是一个 html 标签,一个内联元素(显示一行)。它单独使用没有任何意义,必须结合 CSS 来使用。它主要用于对括起来的内容进行样式的修饰。
CSS
层叠样式表 Cascading Style Sheets
样式定义如何显示HTML元素
样式通常存储在样式表中
把样式添加到HTML4.0中,是为了解决内容与表现分离的问题
外部样式表通常存储在CSS文件中
CSS 的作用:
HTML 整个网站的骨架
CSS 对整个骨架的内容进行修饰
CSS语法规范:
选择器{
属性名1:属性值1;
属性名2:属性值2;
... ....
}
CSS引入方式:
1、行内引入
<div style="color:red;font-size:100px">JavaEE</div>
2、内部引入
<style type="text/css">
div{
color:red;
font-size:100px;
}
</style>
3、外部引入
style.css
div{
color:red;
font-size:100px;
}
page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../../css/style.css" />
</head>
优先级问题: 谁离需要修饰的元素近,谁的样式生效,其它的被覆盖掉。(就近原则)
CSS选择器
元素选择器、类选择器、id选择器
元素名{
属性名1:属性值1;
属性名2:属性值2;
}
对相同元素设置相同样式。
.类名{
属性名1:属性值1;
属性名2:属性值2;
}
对多个元素设置相同的样式。
#id属性名{
属性名1:属性值1;
属性名2:属性值2;
}
a{text-decoration:none;} 去掉下划线