CSS
基本导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<style>
h1{
color: aqua;
}
</style>
<!--外部样式-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--优先级:就近原则-->
<h1 style="color: black">我是标题</h1>
</body>
</html>
选择器
作用:选择页面上某一个或者某一类元素
基本选择器
- 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: aqua;
background-color: black;
border-radius: 24px;
}
p{
color: aqua;
background-color: black;
border-radius: 24px;
}
</style>
</head>
<body>
<h1>学Java</h1>
<h1>学Java</h1>
<p>=====</p>
</body>
</html>
- 类选择器 class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器格式:.类名{}
好处,可以多个标签归类,是同一个class,可以复用*/
.yrz{
color: #0799f8;
}
.lyc{
color: aquamarine;
}
</style>
</head>
<body>
<h1 class="yrz">标题1</h1>
<h1 class="123">标题2</h1>
<h1 class="lyc">标题3</h1>
</body>
</html>
- id 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器格式:#id名称{}
id必须保证全局唯一,不能重复
id选择器>class选择器>标签选择器*/
#yrz{
color: red;
}
</style>
</head>
<body>
<h1 id="yrz">标题1</h1>
<h1 id="123">标题2</h1>
<h1 id="lyc">标题3</h1>
</body>
</html>
层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器(所有后代)*/
body p{
background: red;
}
/*子选择器(一代,儿子)*/
body>p{
background: #07f6bf;
}
/*相邻选择器(只有一个,向下相邻)*/
.active + p{
background: #2fec0d;
}
/*通用兄弟选择器(当前选中元素的向下的所有兄弟元素)*/
.active~p{
background: #fdf105;
}
</style>
</head>
<body>
<p>p0</p>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>
属性选择器(常用)
属性名 = 属性值(正则)
a[href*=http]{
background: yellow;
}
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
字体样式
font-family : 字体
font-size : 字体大小
font-weight : 字体粗细
color : 字体颜色
文本样式
text-align:center 文本居中
text-indent:2em 段落首行缩进
line-height 行高(行高和块的高度一致,就可以上下居中)
text-decoration:underline (下划线)
text-decoration:line-through (中划线)
text-decoration:overline (上划线)
超链接伪类
/*鼠标悬浮状态*/
a:hover{
color: green;
}
/*鼠标按住未释放的状态*/
a:active{
color: red;
}
渐变
background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
盒子模型及边框使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7MnSZRrm-1617704024167)(C:\Users\HP\Pictures\微信截图\QQ截图20210406134208.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto;
}
h2{
background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
line-height: 30px;
margin: 0;
}
form{
background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #fffb7d 100%);
}
div:nth-of-type(1) input{
border: 3px solid #000000;
margin: 5px 0px 5px 0px;
}
div:nth-of-type(2) input{
border: 3px solid #602d7f;
margin: 5px 0px 5px 0px;
}
div:nth-of-type(3) input{
border: 3px solid #823838;
margin: 5px 0px 5px 0px;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码 :</span>
<input type="text" size="22">
</div>
<div>
<span>邮箱 :</span>
<input type="text" size="22">
</div>
</form>
</div>
</body>
</html>
圆角边框及阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
margin: 0 auto;text-align: center;
width: 100px;
height: 100px;
border:0px solid yellow;
border-radius: 50px;
box-shadow: 0px 0px 100px yellow;
}
</style>
</head>
<body>
<div style="width: 500px;display:block;text-align: center;">
<img src="../109951165325140747.jpg">
</div>
</body>
</html>
display和浮动
display: block;
display: inline;
display: inline-block;
float: left;
父级边框塌陷问题:
- 增加父级元素的高度
#father {
border: 1px #000 solid;
height: 800px;
}
- 增加一个空的div标签,清楚浮动
<div class = "clear"></div>
.clear{
clear:both;
margin:0;
padding:0;
}
- overflow
在父级元素中添加一个 overflow : hidden;
- 父类添加一个伪类:after
#father:after{
content: '';
display: block;
clear: both;
}
border: 1px #000 solid;
height: 800px;
}
- 增加一个空的div标签,清楚浮动
<div class = "clear"></div>
.clear{
clear:both;
margin:0;
padding:0;
}
- overflow
在父级元素中添加一个 overflow : hidden;
- 父类添加一个伪类:after
#father:after{
content: '';
display: block;
clear: both;
}