CSS常见样式
CSS语法结构
css
选择器表达式{
key:value;
....
...
}margin、padding
margin：外边距
padding：内边距
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
width: 800px;
height: 800px;
border: 1px solid rebeccapurple;
}
div{
width: 400px;
height: 400px;
border: 1px solid red;
/* 内边距：内容部分跟边框的距离 */
/* padding: 10px; */
/* 外边距：标签跟父容器之间的距离 */
/* margin: 10px; */
/* 单独操作某个边距 */
/* margin-left: 20px; */
/* 使用多参数模式 */
/* 垂直方向 水平方向 */
/* margin: 10px 50px; */
/* top left bottom right */
/* margin: 10px 50px 100px 200px; */
/* 参数顺序与margin同 */
/* padding: 10px;
padding: 10px 100px;
padding: 0px 100px 1000px 2000px; */
/* 可以控制标签水平方向居中 */
margin: auto;
}
</style>
</head>
<body>
<div>123</div>
</body>
</html>常见的简单样式
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid rebeccapurple;
/* 内容颜色 */
color: black;
background-color: red;
/* 透明 取值范围0-1 0完全透明 1不透明*/
/* 透明属性 可以隐藏标签但是不会取消标签在页面中相对位置 */
/* opacity: 0; */
/* display: none 会让标签完全消失在页面中 */
/* display: none; */
/* visibility 类似opacity：0将标签隐藏但是保留其位置关系*/
/* visibility: hidden; */
/* 移出屏幕 */
/* margin-left: -150px; */
/* 将网页置灰 */
filter: grayscale();
}
span{
display: inline-block;
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div>123123</div>
<span></span>
</body>
</html>border样式
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
/* border:red solid 1px; */
border-width: 10px;
border-style: solid;
border-color: rebeccapurple;
/* border-radius可以用来设置边框弧度 支持某个角的单独设置 */
/* border-radius: 50%; */
border-bottom-left-radius: 20px;
border-top-right-radius: 20px;
/* boder样式支持每一条边进行单独设置 */
border-left: 5px dotted green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>font样式
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid rebeccapurple;
/* 字体大小 */
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
/* bold会自动选择适合字体最粗程度的效果 */
font-weight: bold;
/* font-style可以用来设置字体斜体 */
font-style: italic;
/* font-smooth: unset; */
}
</style>
</head>
<body>
<div>
家
</div>
</body>
</html>text样式
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid rebeccapurple;
/* 水平居中 */
/* text-align: center; */
/* 垂直居中 */
/* line-height: 100px; */
/* 设置上中下划线 */
text-decoration: overline;
/* 设置大小写以及首字母大写 */
text-transform: capitalize;
/* 实现省略号的效果 两个属性需要搭配使用 */
/* text-overflow: ellipsis;
overflow: hidden; */
/* 自动换行以及 滑动条 */
word-wrap: break-word;
overflow: scroll;
}
</style>
</head>
<body>
<div>
ABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEF
</div>
</body>
</html>backgrond样式
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 10000px;
height: 10000px;
border: 1px solid rebeccapurple;
background-color: aqua;
background-image: url("img/123.webp");
/* background-size: 100px 100px; */
/* 常用于截取精灵图中的图片 */
/* 精灵图一般是为了节省服务器的开销而存在的 */
/* background-position: -28px -116px; */
/* repeat可以用于将提前至循环图片 展示在页面上 让页面有一个看似无边无际的背景 */
/* background-repeat: repeat; */
/*background-size除了可以规定具体夸高意外，还可以使用cover让图片自适应页面*/
background-size: cover;
/* fixed是将背景图片固定在页面上，不随滑动而发生改变 */
background-attachment: fixed;
background: url("img/1.jpeg");
}
</style>
</head>
<body>
<div>
<p>1231231231231231</p>
<p>1231231231231231</p>
<p>1231231231231231</p>
<p>1231231231231231</p>
<p>1231231231231231</p>
<p>1231231231231231</p>
</div>
</body>
</html>Position样式
- fixed
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
height: 10000px;
background-image: url("img/123.webp");
}
.container{
width: 500px;
height: 500px;
background-color: blue;
}
.postion_div{
width: 100px;
height: 100px;
background-color: white;
/* fixed 定位会将标签脱离父标签的掌控，使它跟页面保证固定的位置关系*/
position: fixed;
right: 10px;
bottom: 10px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="postion_div">
回到顶部
</div>
</div>
</body>
</html>- absolute
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 800px;
background-color: rebeccapurple;
position: relative;
}
/* 绝对定位是指子标签跟父标签产生绝对的位置关系，这种位置关系不会被其他标签所影响 */
/* 如果子标签是absolute定位那么父标签必须是relative定位，否则子标签会向上一级寻找具有relative定位标签 */
.postion_div{
width: 100px;
height: 100px;
background-color: white;
position: absolute;
/* 子标签左边距离父标签的左边的距离 */
/* left: 0px; */
/* 子标签上边距离父标签的上边的距离 */
/* top: 0px; */
/* 子标签底边距离父标签的底边的距离 */
bottom: 0px;
/* 子标签右边距离父标签的右边的距离 */
right:0px
}
</style>
</head>
<body>
<p>23112312312312311231231231</p>
<p>231123122311231231231312312311231231231</p>
<p>23112312312312311231231231</p>
<p>23112312312312311231231231</p>
<p>231123122311231231231312312311231231231</p>
<p>23112312312312311231231231</p>
<p>23112312312312311231231231</p>
<p>231123122311231231231312312311231231231</p>
<p>23112312312312311231231231</p>
<p>23112312312312311231231231</p>
<div class="postion_div">
回到顶部
</div>
</body>
</html>导航栏案例
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.contaner {
height: 40px;
border: 1px solid red;
}
.contaner>div {
/* 最初float是用于文字环绕图片特效的后来用于布局，让标签进行左对齐或右对齐 */
/* 当float是right时候，标签顺序会发生逆转 */
float: right;
height: 40px;
line-height: 40px;
margin-left: 20px;
}
.contaner>div:hover {
color: cadetblue;
}
.contaner>.homepage:hover>div {
display: block;
}
.homepage>div {
display: none;
position: absolute;
top:30px;
}
.homepage{
position: relative;
}
</style>
</head>
<body>
<div class="contaner">
<div class="homepage">首页
<div>
<div>菜单1</div>
<div>菜单1</div>
<div>菜单1</div>
<div>菜单1</div>
</div>
</div>
<div>客服</div>
<div>收藏</div>
<div>电话</div>
</div>
</body>
</html>阴影特效
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 150px;
height: 80px;
border: 1px solid rebeccapurple;
text-align: center;
line-height: 80px;
border-radius: 20px;
/* 第一参数是阴影x轴的偏移量 */
/* 第二个参数是阴影在y轴上偏移量*/
/* 第三个参数是阴影模糊度 */
/* 第四个参数是颜色 */
text-shadow: 2px 2px 10px rebeccapurple,
-2px 2px 10px rebeccapurple,
2px -2px 10px rebeccapurple,
-2px -2px 10px rebeccapurple;
box-shadow:none;
/* 过渡效果对大部分css样式起作用 */
transition: 2s;
}
div:hover{
width: 75px;
height: 40px;
line-height: 40px;
box-shadow: 2px 2px 10px rebeccapurple,
-2px 2px 10px rebeccapurple,
2px -2px 10px rebeccapurple,
-2px -2px 10px rebeccapurple;
}
</style>
</head>
<body>
<div>按钮</div>
</body>
</html>表单再补充
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input{
height: 500px;
}
</style>
</head>
<body>
<form action="#" method="get" enctype="application/x-www-form-urlencoded">
<!-- cols表示多行文本框有多少列 -->
<!-- rows表示多行文本框有多少行 -->
<textarea name="my_introduce" id="" cols="30" rows="10">
</textarea>
<input type="submit" name="" id="">
</form>
</body>
</html>