【HTML的块标签】
<div></div> : 默认一个div独占一行
<span></span> : 默认在同一行
【CSS的概述】
层叠样式表
把样式添加到4.0中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
【CSS的基本语法】
CSS的基本语法通常包含两个部分:一个是选择器,一个声明
* 选择器{属性:属性值;属性:属性值}
【CSS的引入方式】
行内样式:直接在HTML的元素上使用style属性设置CSS
<h1 style="color: red;font-size: 100px">标题</h1>
页面内样式:在HTML的<head>标签中使用<style>标签设置CSS
<style>
h1{
color: red;
font-size: 50px;
}
</style>
外部样式:单独定义一个.css文件,在HTML中引入该CSS文件
<link rel="stylesheet" href="../css/Demo.css" type="text/css" />
【CSS的选择器】
元素选择器:
div{
border: 1px solid cadetblue;
width: 40px;
height: 45px;
}
ID选择器:
#d1{
border: 12px solid blueviolet;
}
类选择器:可以叠加使用
.divClass{
border: 1px solid yellow;
}
【CSS的浮动】
使用float属性可以完成div的浮动
Float属性的取值
清除浮动效果:使用clear属性
【CSS的其他选择器】
属性选择器:
input[type=“text”]
后代选择器:
空格 ·div span 查找的是所有div的所有span元素
子元素选择器:
div > span找这个div中第一层级的审判元素
并列选择器
选择器,选择器{}
【CSS的样式】
背景 字体 文本 列表
【CSS中的盒子模型】
margin
border
padding
【CSS浮动】
float
【清除浮动】
clear
【定位】
position:
absolute:跟随滚动条滚动
fixed:固定在页面上,不随滚动条滚动
【显示和隐藏】
display:
none:隐藏
block:显示
inline:显示到一行
【CSS的伪类】 |