- CSS样式:层叠样式表(Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
- CSS作用:CSS就是网页的化妆师,可以让页面变得更加美观。
- 使用方法:1. 直接写在标签 2. 写在style 标签内 3. 使用外部 .css 文件
- 外部css文件:
<link rel="stylesheet" href="index.css">
css选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*优先级 id>class >标签*/
/*简单选择器 :id 选择器 class选择器 标签选择器*/
/*id 选择 #作为标识 */
#p1 {
color: green;
}
/*标签选择器*/
/*p {*/
/* color: red;*/
/*}*/
#p3 {
color: purple;
}
/*class 选择器 .class标识 北斗帅帅 */
.p2 {
color: yellow;
}
/* 群组选择器*/
span, #p1, #p3 {
color: blue;
}
/*全选选择器*/
* {
/*字体大小*/
font-size: 36px;
}
</style>
</head>
<body>
<p id="p1">以前我只想致富,现在我只想脱贫1</p>
<p class="p2" id="p3">以前我只想致富,现在我只想脱贫2</p>
<span class="ap">别说晚上要节食</span>
<p class="ap">不然冰箱里会有灯</p>
<div class="ap">宝,我今晚去运动了,什么运动,</div>
</body>
</html>
伪类选择器
实现网页中链接点击变色的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*未访问时*/
a:link {
color: black;
}
/*鼠标悬浮时*/
a:hover {
color: red;
}
/*鼠标点击手*/
a:active {
color: purple;
}
a:visited {
color: yellow;
}
#boss span {
color: red;
}
#boss .box1 span {
color: green;
}
</style>
</head>
<body>
<a href="#">点击一下 清都山水郎</a>
<div class="box" id="boss">
<div class="box1">
<span> 颜色</span>
</div>
</div>
</body>
</html>
字体样式和文本样式
给网页中的文本修饰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*字体样式*/
p {
/*字体类型*/
/*font-family: 楷体;*/
/*!*字体大小*!*/
/*font-size: 36px;*/
/*!*字体粗细*!*/
/*font-weight: bold;*/
/*!*斜体*!*/
/*font-style: italic;*/
/*!*字体大小写*!*/
/*font-variant: small-caps;*/
/*颜色*/
color: red;
/*复合样式*/
/*字体样式 字体大小写 字体粗细 字体大小 字体的类型*/
/*font: italic bold 36px 宋体 ;*/
/*文本样式*/
/*字体居中*/
/*text-align: center;*/
text-indent: 2em; /*缩进2个中文的长度*/
/*下划线*/
/*text-decoration: underline;*/
text-decoration: line-through; /*删除线*/
/*字体行高*/
line-height: 40px;
/*词据*/
word-spacing: 10px;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<p>宝 输了液 什么液 想你的夜</p>
<a href="">超链接</a>
</body>
</html>
背景样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
/*背景颜色*/
/*background-color: green;*/
/*!*背景图片*!*/
/*background-image:url("../image/1.jpg");*/
/*!*背景图片大小*!*/
/*background-size:100px 100px;*/
/*!*取消平铺*!*/
/*background-repeat: no-repeat;*/
/*!*背景定位*!*/
/*background-position: center;*/
/*复合样式*/
background: skyblue url("这里是你的图片路径") no-repeat center/100px 100px ;
/*背景颜色 背景图片 是否需要平铺 背景定位 / 背景大小*/
/*边框 solid 实线*/
border: 2px green solid ;
border-radius: 10px;
}
</style>
</head>
<body>
<button>按钮</button>
<div></div>
</body>
</html>