CSS常见样式
CSS语法结构
选择器表达式{key:value;.......
}
margin、padding
margin：外边距
padding：内边距
<!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>
常见的简单样式
<!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样式
<!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样式
<!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样式
<!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样式
<!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
<!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
<!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>
导航栏案例
<!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>
阴影特效
<!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>
表单再补充
<!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>
岁月的印记全过程文档及程序)
)
![[Java并发基础]多进程编程](http://pic.xiahunao.cn/[Java并发基础]多进程编程)
