一、概述：
HTML用来编写网页的骨架
css用来美化网页
二、三种引入方式
目的：为了修饰一些标签的不同的写法
行内样式
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<div style="width: 200px; height: 20px; color: aqua;">
大漠孤烟直
</div>
</body>
</html>
内联样式
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 内联样式 写在head标签内 -->
<!-- 在head头标签中写一个子标签 叫 style 之后根要被修饰的标签元素
然后大括号括起来，里面去css的基本语法格式
使用偏多
-->
<style type="text/css">
div {
width: 200px;
height: 20px;
background-color: red;
}
</style>
</head>
<body>
<div>
大漠孤烟直
</div>
</body>
</html>
外联样式
示例：
test.css:
div {
width: 200px;
height: 100px;
color: darkorange;
}
外联.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 在head标签中，写一个标签叫link，来连接外部的css文件 -->
<!-- rel:连接文件的类型， type:css文件 href:css所在路径 -->
<link rel="stylesheet" type="text/css" href="./test.css"/>
</head>
<body>
<div>
大漠孤烟直
</div>
</body>
</html>
注意：内联和外联用的偏多
三、css的选择器
目的：就是为了找到这个标签的
标签选择器
通过 标签的名字 获取要被修饰的标签
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签选择器</title>
<style>
/* 注释问题，在css中写注释的时候和java相似
标签选择器，就是通过标签的名字 获取要被修饰的标签
*/
span {
color:red;
}
div {
color:yellow;
}
footer {
color:blue;
}
</style>
</head>
<body>
<span>朗行千里吃肉</span>
<div>要问酒家何处</div>
<div>清明时节雨纷纷，路上行人没吃饭</div>
<footer>风萧萧兮易水寒</footer>
</body>
</html>
class选择器
通过class属性的属性值，来获取class属性修饰的标签。
使用 .属性值 获取被修饰的标签
【注意】：class属性可以起多个名字，中间用空格隔开
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* class 选择器在标签中写一个class的属性，后面
自己写一个值，在css中可以通过.值 找到被修饰的标签
可以在class属性起多个名字
*/
.wb {
color: orange;
}
</style>
</head>
<body>
<div class="ww df wb">大漠孤烟直</div>
</body>
</html>
id选择器
通过id属性的属性值，来获取id属性修饰的标签
使用 #属性值 获取被修饰的标签
【注意】：id属性必须是唯一的，不能有重复的
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* id选择器 在标签中写一个id属性，属性值起一个，但是保证唯一。
通过 #获取id所对应的标签
*/
#wangbo {
color:purple;
}
</style>
</head>
<body>
<div id="wangbo">落霞与孤鹜齐飞，秋水共长天一色</div>
</body>
</html>
层级选择器
一层一层往下去找直到直到为止,中间用空格隔开
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 层级选择器 中间是空格 */
#div1 .div2 div {
color:blue;
width: 200px;
height: 200px;
background-color: #FF0000;
}
</style>
</head>
<body>
<div id="div1">
<div class="div2">
<div>扬天大笑出门去,从此君王不早朝</div>
</div>
</div>
</body>
</html>
组合选择器
多个标签一起使用，中间用逗号隔开
通配选择器
所有的都能匹配 *
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 组合选择器，中间使用逗号隔开 */
#hh, .xx, p {
color:green;
}
/* 通配选择器 */
* {
/* 优先级最低 */
color:red;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="hh">众里寻他千百度，蓦然回首。吓我一跳</div>
<span class="xx">但使龙城飞将在,不教胡马度阴山</span>
<p>举杯邀明月对影成三人</p>
<footer>呵呵哒</footer>
<header>哈哈哒</header>
</body>
</html>
伪类选择器
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
a{
font-size:50px;
text-decoration: none;
}
/* 1.link 链接本身的颜色 */
a:link {
color:red;
}
/* 4.访问过后的颜色 */
a:visited {
color: pink;
}
/* 2.鼠标悬停的颜色 */
a:hover {
color: blue;
}
/* 3.鼠标点上去以后别松手 */
a:active {
color:green;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">去百度溜溜</a>
</body>
</html>
四、css的属性
color:设置字体的颜色
width:设置宽
height:设置高
background-color:设置背景颜色的
背景图片的属性
<style>
body {
/* 会品平铺整个body体 */
background-image: url(011.png);
/* 平铺的一种方式
no-repeat:不平铺
repeat-x:横向平铺
repeat-y:纵向平铺
*/
background-repeat: no-repeat;
/* 图片的位置 第一个是x轴偏移， 第二个是y轴的偏移 */
background-position: 100px 100px;
/* 图片动态效果
fixed:展示在页面的固定位置，不随着页面滚动而滚动
scroll:随着页面滚动而滚动
*/
background-attachment: fixed;
}
</style>
边框的css属性
<style>
#div1 {
width: 100px;
height: 200px;
/* 边框的样式 实线
border-style:solid;
/* 边框的颜色
border-color:blue;
/* 边框的宽度
border-width: 10px;*/
/* 简写的情况 */
border: 10px solid green;
}
</style>
文本属性
<style>
.wb{
width: 1800px;
height: 300px;
border:2px solid red;
/* 设置字体颜色 */
color:green;
/* 设置字体的大小
font-size: 50px;
/* 设置字体的样式
font-family: 楷体;
/* 设置字体的加粗
font-weight: bold;*/
/* 简写的情况 */
/* 简写的情况，字体的大小和字体的样式不能省略的 */
font:bold 50px 宋体;
/* 文本线的形状
overline:上划线
underline:下划线
line-through:删除线
none:没有线
*/
text-decoration: line-through;
/* 文本缩进 */
text-indent: 100px;
/* 文本内容相对于div的对齐方式 */
text-align: left;
/* 线的高度 。 line-height的值必须和div的高保持一致，才能然个文本居中*/
line-height: 300px;
}
</style>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
