『黑马程序员济南』JavaEE就业笔记串讲---CSS
【HTML的块标签】
<div></div> :默认一个div独占一行.
<span></span> :默认在同一行.
【CSS的概述】
Ø 什么是CSS:
* HTML相当于网站的骨架！CSS对骨架进行美化！
Ø CSS在那些地方使用：
任何网站都会使用CSS去美化页面！！！
Ø 如何使用CSS
知道CSS的语法.
【CSS的基本语法】
CSS的基本语法通常包含两个部分：一个是选择器，一个声明.
* 选择器{属性:属性值;属性:属性值...}
【CSS的引入的方式】
Ø 行内样式：直接在HTML的元素上使用style属性设置CSS.
<h1 style="color:red;font-size:200px ;">标题</h1>Ø 页面内样式：在HTML的<head>标签中使用<style>标签设置CSS.
<style>
h1{
color:blue;
font-size: 40px;
}
</style>Ø 外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.
<link href="../../css/demo1.css" rel="stylesheet" type="text/css" />【CSS的选择器】
Ø 元素选择器：
div{
border:1px solid blue;
width:40px;
height:45px;
}Ø ID选择器:
#d1{
border:2px solid red;
}Ø 类选择器：
.divClass{
border:2px solid yellow;
}【CSS的浮动】
Ø 使用float属性可以完成DIV的浮动.
float属性的取值:
Ø 清除浮动效果：使用clear属性进行清除:
Ø 案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.divClass{
border:1px solid blue;
width:200px;
height:220px;
}
#d1{
float:left;
}
#d2{
float:left;
}
#d3{
float:left;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="d1" class="divClass">DIV1</div>
<div id="d2" class="divClass">DIV2</div>
<div id="d3" class="divClass">DIV3</div>
<div class="clear"></div>
<div id="d4" class="divClass">DIV4</div>
</body>
</html>【CSS的其他选择器】
Ø 属性选择器：
<style>
input[type="text"]{
background-color: red;
}
</style>
Ø 后代选择器:
div span 查找的是所有div中的所有的span元素.
h1 strong{
color:red;
}
<h1>
This is <strong>very</strong> <strong>very</strong> important.
</h1>
<h1>This is
<strong>very</strong>
<em>really
<strong>very</strong>
</em>
important.
</h1>Ø 子元素选择器：
<div > span找这个div中的第一层级的span元素.
<h1 > strong{
color:red;
}
<h1>
This is <strong>very</strong> <strong>very</strong> important.
</h1>
<h1>This is
<strong>very</strong>
<em>really
<strong>very</strong>
</em>
important.
</h1>Ø 并列选择器:
选择器,选择器{
}
【CSS中的定位】
position属性设置定位：
* relative:相对定位
* absolute:绝对定位
使用另外两个属性:left,top
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
