CSS
CSS
基本导入方式
<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>选择器
作用：选择页面上某一个或者某一类元素
基本选择器
- 标签选择器
<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
<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 选择器
<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>层次选择器
<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)]
<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>圆角边框及阴影
<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标签，清楚浮动
.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标签，清楚浮动
.clear{ clear:both; margin:0; padding:0;}- overflow
在父级元素中添加一个 overflow : hidden;- 父类添加一个伪类：after
#father:after{ content: ''; display: block; clear: both;}
