1、css介绍
概念
- 层叠样式表
- 层叠：多个样式表表可以叠加效果
- 样式表：定义html元素如何显示
作用
- 渲染,美化页面
- 提高工作效率
- 比html的样式更加丰富
2、html和css的整合
- 内联样式表
- 通过标签的style属性完成整合
- 内部样式表
- 通过head标签的style子标签完成整合
- 外部样式表
- 在外部创建一个后缀名为.css的文件
- 在内部使用head标签下面的link子标签中href属性导入即可
#div2{
background-color: yellow;
}
#div1{
width: 80%;
background-color: red;
}
HTML页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html和css整合方式</title>
<style type="text/css">
#div1{
background-color:#0000ff ;
}
</style>
<link rel="stylesheet" href="../css/01.css" />
</head>
<body>
<!--
div:块级元素
独占一行
span:内联元素
可以和其他元素同用一行
-->
<div style="background-color: red;">内联样式表</div>
<div id="div1">内部样式表</div>
<div id="div2">外部样式表</div>
</body>
</html>
3、css的选择器
CSS语法
{属性:属性值;属性1:属性值1}选择器的格式
选择器{
属性:属性值;
属性1:属性值1;
......
}选择器的种类
- id选择器
- 有id且有值
- #id值{......}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
#div1{
background-color: red ;
}
</style>
</head>
<body>
<div id="div1">id选择器</div>
</body>
</html>
- class选择器
- 有class且有值
- .class值{......}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
.divCal{
background-color: red;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<div class="divCal">class选择器</div>
<h1 class="divCal">class选择器</h1>
</body>
</html>
- 标签选择器
- 标签{........}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style type="text/css">
span{
background-color: greenyellow;
}
</style>
</head>
<body>
<div>这个没有样式啊啊~~</div>
<span>标签选择器</span>
<span zz="zz">标签选择器</span>
<span>标签选择器</span>
<span>标签选择器</span>
</body>
</html>
- 属性选择器
- <div dxd="dxd"/>
- 可以定位到标签的任意属性的区域上面
- 标签[dxd="dxd"]{......}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
span[zz="zz"]{
background-color: blanchedalmond;
}
</style>
</head>
<body>
<span>标签选择器</span>
<span zz="zz">属性选择器</span>
<span>标签选择器</span>
<span>标签选择器</span>
</body>
</html>- 锚伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a:link {color: red} /* 未访问的链接 */
a:visited {color: blue} /* 已访问的链接 */
a:hover {color: yellow} /* 鼠标移动到链接上 */
a:active {color: blank} /* 选定的链接 */
</style>
</head>
<body>
<a href="">移上来试试</a>
</body>
</html>- 派生选择器
- a,b{.......} a和b公用一套样式
- a b{.......} 满足选择器a的情况下 满足选择器b 改变选择器b的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*div,h1{
background-color: red;
}*/
div span{
background-color: green;
}
</style>
</head>
<body>
<!--<div>传智播客</div>
<h1>黑马程序员</h1>-->
<div>
<span>派生选择器</span>
</div>
<span>派生选择器1</span>
</body>
</html>css属性
基本属性
- 字体属性：大小,家族,系列.....
字体单位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css文字属性</title>
<style type="text/css">
#div1{
font-family: "楷体";
}
#div2{
font-size: 2cm;
}
#div3{
font-style: italic; /*斜体*/
}
#div4{
font-weight:bolder; /*加粗*/
}
</style>
</head>
<body>
<div id="div1">字体的类型</div>
<div id="div2">字体的大小</div>
<div id="div3">字体的风格</div>
<div id="div4">字体的粗细</div>
</body>
</html>
- 文本属性：改变字体的颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css文本属性</title>
<style type="text/css">
#div1{
color: red;
}
#div2{
text-align: center;
}
a{
/*取消下划线*/
text-decoration: none;
}
</style>
</head>
<body>
<div id="div1">红色字体</div>
<div id="div2">字体居中</div>
<a href="#">百度</a>
</body>
</html>
- 背景属性：背景颜色 背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
background-image: url(../img/small08.jpg);
height: 300px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>背景图片</div>
</body>
</html>- 列表属性：可以改变标识的类型
- 边框属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框属性</title>
<style type="text/css">
div{
border:1px solid red;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div>DIV的边框</div>
</body>
</html>
高级属性
- float:浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 20%;
height: 40px;
background-color: red;
float: left;
}
#div2{
width: 30%;
height: 60px;
background-color: green;
float: left;
}
#div3{
width: 40%;
height: 35px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div id="div1">这是第一个div</div>
<div id="div2">这是第二个div</div>
<div id="div3">这是第三个div</div>
</body>
</html>
- clear：清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 20%;
height: 40px;
background-color: red;
float: left;
}
#div2{
width: 30%;
height: 60px;
background-color: green;
float: left;
}
#div3{
width: 40%;
height: 35px;
background-color: blue;
float: left;
}
/*清除浮动*/
#clear{
clear: both;
}
#div4{
width: 80%;
height: 70px;
background-color: salmon;
}
</style>
</head>
<body>
<div id="div1">这是第一个div</div>
<div id="div2">这是第二个div</div>
<div id="div3">这是第三个div</div>
<div id="clear"></div>
<div id="div4"></div>
</body>
</html>
- display：是否显示及如何显示
- none 隐藏
- block 显示,独占一行
- inline 取消换行动作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
background-color: #ff0;
border: 1px dashed red;
height: 50px;
width: 50px;
}
#div0{
display: none;
}
#span0{
display: block;
}
h1{
display: inline;
}
</style>
</head>
<body>
<div >1</div>
<div id="div0">2</div>
<div >3</div>
<div >4</div>
<span id="span0">独占一行</span>
<hr />
<h1>热门商品</h1>你好啊
</body>
</html>框模型
padding:内边距
margin:外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框模型</title>
<style type="text/css">
body{
margin: 0px;
}
div{
background-color: #ff0;
width: 200px;
height: 200px;
float: left;
border: 10px solid red;
margin: 10px;
padding: 20px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
1240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
