第三章 CSS样式深入 ① 笔记
1.内容回顾
1.1.课前测
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<!--在head标签内定义style标签-->
<style type="text/css">
h1{
color:red; /*颜色*/
text-align:center; /*水平对齐方式*/
}
p{
color:blue;
}
u{
color:black;
font-size:20px;
}
</style>
</head>
<body>
<!--
1. 编写网页内容
h1,hr,p,u
2. 加css样式
a.在head标签内部写style标签
b.接着在style标签中定义css样式
-->
<h1>人物简介</h1>
<hr/>
<p>
<u>孙悟空:</u>孙悟空（又称齐天大圣、孙行者、斗战胜佛），是中国古典神魔小说《
</p>
<p>
<u>猪八戒:</u>猪八戒前世为执掌天河八万水兵的“天蓬元帅”，精通三十六般变化，所
</p>
</body>
</html>
1.2.上节内容
2.本章重点
2.1.掌握css的基本用法
2.2.掌握常见的CSS属性样式
3.具体内容
3.1.常见css属性
3.1.1 边框样式
/*所有边框样式*/
border: 宽度 样式 颜色;
/*顶部边框*/
border-top: 宽度 样式 颜色;
/*左边边框*/
border-left: 宽度 样式 颜色;
/*右边边框*/
border-right: 宽度 样式 颜色;
/*底部边框*/
border-bottom: 宽度 样式 颜色;
/*某个边框单独设置*/
/*宽度*/
border-top-width: 宽度;
/*颜色*/
border-top-color:颜色;
/*样式:*/
border-top-style:样式;
solid 是css中border-style属性的一个属性值，表示实线。
dashed: 定义虚线。在大多数浏览器中呈现为实线。
dotted: 定义点状边框。在大多数浏览器中呈现为实线。
hidden: 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
none: 定义无边框。
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
.d1{
/*设置class=d1元素的四个方向边框:5像素 实线框 红色*/
border:5px solid red;
/*设置元素宽度*/
width:200px;
/*设置元素高度*/
height:200px;
}
.d2{
/*设置div的上边框*/
border-top:10px solid blue;
/*dashed:虚线框*/
border-bottom:10px dashed orange;
/*分开方式设置右边框的属性*/
/*单独设置边框宽度*/
border-right-width:20px;
/*单独设置边框样式*/
border-right-style:dotted ;
/*单独设置边框颜色*/
border-right-color:pink;
width:300px;
height:300px;
}
</style>
</head>
<body>
<div class="d1">这是一个DIV</div>
<table style="height:100px;width:100px;border:10px solid blue;"></table>
<div class="d2">这是DIV2</div>
</body>
</html>
3.1.2 文字样式
/*文字颜色*/
color: 颜色;
/*文字大小*/
font-size:大小;
/*字体类型*/
font-family:类型;
/*字体风格*/
font-style:风格（斜体）;
/*字体粗细*/
font-weight:粗细;
<style type="text/css">
.d1{
width:800px;
height:500px;
border:2px solid red;
/*颜色*/
color:green;
/*字体大小*/
font-size:20px;
/*字体类型*/
font-family:黑体;
/*字体风格*/
font-style:italic;
/*字体粗细*/
font-weight:bold;
/*水平对齐:left right center*/
text-align:center;
/*行高：可以调整内容的垂直位置
典型用法:将行高和容器的高度设为一样时，容器内的内容会垂直居中
*/
line-height:500px;
/*字符间距*/
letter-spacing:20px;
}
</style>
<div class="d1">
这是一个内容这是一个
</div>
3.1.3 文本样式
/*水平方向文本对齐方式*/
text-align
/*行高 一行文本的高度: 行高与容器高度一致时，容器中的内容会垂直居中*/
line-height
/*字体间距*/
letter-spacing
/*首行缩进*/
text-indent
/*调整垂直方向对齐方式:调整一行内容中某个字的垂直位置*/
vertical-align
/*文本修饰线*/
text-decoration
<style type="text/css">
p{
/*首行缩进两个字符*/
text-indent:2em;
/*设置文本框的修饰线形状:
underline,overline,none
text-decoration:line-through;*/
}
span{
/*控制内容垂直方向的位置*/
vertical-align:-10px;
}
a{
/*去除下划线*/
text-decoration:none;
}
</style>
<body>
<p><a href="#">这一个认真的超链接</a>这是一个<span>段落</span>内容这是一个段落内
<div class="d1">
这是一个内容这是一个
</div>
</body>
/*文本阴影*/
/*规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色： */
text-shadow
/*设置文本框阴影*/
text-shadow:2px 2px 5px blue;
/*设置容器阴影:x轴偏移 y轴偏移 模糊度 阴影颜色*/
box-shadow:20px 20px 20px gray;
/* 列表样式（点/数字）:用于列表标签 ul ol */
list-style
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
ul{
/*设置边框*/
border:5px solid gray;
width:250px;
/*设置列表样式:none(为空)
list-style:none;*/
/*设置列表项的图片*/
list-style-image:url(img/icon2.gif);
/*盒子阴影*/
box-shadow:5px 5px 5px gray;
/*文本阴影*/
text-shadow:3px 3px 3px gray;
}
</style>
</head>
<body>
<ul>
<li>乌鲁木齐天气晴转阴20</li>
<li>乌鲁木齐天气晴转阴20</li>
<li>乌鲁木齐天气晴转阴20</li>
<li>乌鲁木齐天气晴转阴20</li>
<li>乌鲁木齐天气晴转阴20</li>
</ul>
</body>
</html>
运行结果如下：
3.1.4 背景样式
div标签： 是一个没有任何语义的块状标签，一般用于搭建页面架构。
background: 背景
background-color:背景颜色
background-image:背景图片
background-repeat:背景平铺方式
background-position:背景图片位置
background-size:背景图片大小
/*背景样式*/
background:颜色 图片 平铺方式 水平位置 垂直位置 / 宽度 高度;
平铺方式:
no-repeat(不平铺) repeat(全平铺) repeat-x(水平平铺) repeat-y(垂直平铺)
背景位置：
1.像素值
2.百分比
3.关键字（水平:left center right） (垂直:top center bottom)
设置多张背景图片:
background属性后的内容用逗号分隔
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
.con{
width:800px;
height:500px;
border:1px solid red;
/*背景颜色
background-color:red;*/
/*背景图片:默认全方位平铺
background-image:url(gif/3.gif);*/
/*设置平铺方式
no-repeat:不平铺
repeat:全方位平铺
repeat-x:水平方向平铺
repeat-y:垂直方向平铺
background-repeat:no-repeat;*/
/*控制图片的显示位置:针对图片不平铺的场景
水平位置，垂直位置
设置数据:像素值，百分比，
关键字(left center right,top center bottom)
background-position:center center;*/
/*设置背景图片的大小
background-size:50px 50px;*/
/*复合写法设置背景:批量设置样式属性
background:颜色 图片 平铺方式 水平位置 垂直位置 / 宽度 高度
background:red url(gif/7.gif) no-repeat -50px -50px / 150px 150px;*/
background:url(gif/7.gif) no-repeat 50px 50px / 150px 150px,
url(gif/4.gif) no-repeat 150px 150px / 150px 150px;
}
</style>
</head>
<body>
<div class="con">这是一个内容</div>
</body>
</html>
运行结果如下：
3.1.5 动画效果
鼠标悬浮
选择器:hover {
样式属性:值;
}
过渡效果：transition 过渡是元素从一种样式逐渐改变为另一种的效果
当元素中的某个属性变化的时候，以动画的方式呈现属性的变化过程
选择器{
transition: 样式属性 时间;
}
overflow: 属性规定当内容溢出元素框时发生的事情
综合案例：滑动菜单
鼠标放上去慢慢展开子菜单
分析：
1. 先搭建整体的双层菜单结构
2. 设置基本样式（颜色，宽度，居中，高度）
3. 设置overflow：hidden;属性 让超出父菜单的部分隐藏。
4. 设置过渡效果，当鼠标悬浮到父菜单时，调整整体的高度 到 能展示四个菜单的程度。
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
ul{
list-style:none;
padding:0px;
width:120px;
text-align:center;
font-size:20px;
}
#menu>li{
background-color:#99ccff;
}
#menu li ul{
background-color:#cccccc;
/*display:none;*/
height:0px;
overflow:hidden;
transition:height 1s;
}
#menu>li:hover>ul{
/*display:block;*/
height:52px;
}
</style>
</head>
<body>
<ul id="menu">
<li class="item">
一级菜单1
<ul class="sub">
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
</ul>
</li>
<li class="item">
一级菜单2
<ul class="sub">
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
</ul>
</li>
<li class="item">
一级菜单3
<ul class="sub">
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
</ul>
</li>
</ul>
</body>
</html>
运行结果如下：
总结：
明白什么是css
css如何使用，样式表的使用。
553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
