1.DIV相关的技术
- Div 它是一个 html 标签,一个块级元素(单独显示一行)。它单独使用没有任何意义,必须结合 CSS 来使用。它主要用于页面的布局。
- Span 它是一个 html 标签,一个内联元素(显示一行)。它单独使用没有任何意义,必须结合 CSS 来使用。它主要用于对括起来的内容进行样式的修饰。
2.CSS相关的知识
2.1 什么是css?
CSS概述
- CSS指层叠样式表
- 样式定义如何显示HTML元素
- 样式通常存储在样式表中
- 把样式添加到HTML4.0中是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在CSS文件中
- 多个样式定义可层叠为一
2.2 CSS的作用?
- HTML:它是整个网站的骨架。
- CSS:它是对整个网站骨架的内容进行美化(修饰)
2.3 CSS如何使用?
语法和规范
选择器{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}
2.4 CSS的引入方式
CSS 的引入方式分为三种
第一种:行内引入
<div style="color:red;font-size: 100px;">
JavaEE0516就业班
</div>
第二种:内部引入方式
<style type="text/css">
div{
color:red;
font-size: 100px;
}
</style>
第三种方式:外部引入
如果<style type=”text/css”></style>
优先级问题:
谁离需要修饰的元素近,谁的样式生效,其它的被覆盖掉。(就近原则)
2.5 CSS的选择器
CSS 基本选择器有三种(元素选择器、类选择器、id 选择器)
-
ID 选择器
#id 属性名{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
id保证唯一 -
元素选择器
元素名{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}
如果多个相同的元素设置相同的样式,使用此种方式最为合适。 -
类选择器
.类名{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}
对多个元素设置相同的样式,此时使用类选择器比较合适。
2.6 其它选择器
-
层选择器
元素名 子元素名{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
} -
属性选择器
元素名[属性名=”属性值”]{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}
2.7 CSS的浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。’
浮动float:left(向左)/right(向右)/none(不浮动);
清除浮动clear:both;
2.8 CSS中如何让块级元素成为内联元素
display:inline;
CSS中去掉超链接的下划线
a{
text-decoration: none;
}
让div居中
margin:0px auto;
块级元素内容居中
text-align:center;