CSS样式
一、css介绍
层叠样式表(英文全称：Cascading Style Sheets)
是一种用来表现HTML标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力
二、使用
2.1使用方式
css不可以单独使用 需要内嵌到HTML中
使用方式：
方式一：行内样式:使用style属性，引入css样式 name id class style
方式二：内联式 ： style标签内部引入css样式
方式三：外部样式
注意：
推荐使用第三种
就近原则：行内样式 > 内部样式和外部样式（谁离标签近 谁的优先级高
<!DOCTYPE html>
<html lang="en">
<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><!--方式2： 内联式 ： style标签内部引入css样式--><link rel="stylesheet" href="../css/demo.css"><style>h1{color: aqua;}p{color: blue;}</style><!--方式3： 外部样式--></head>
<body><!--方式一： 行内样式:使用style属性，引入css样式 name id class style--><!--优先级： 行内样式 > 外部样式-内联式(就近原则，谁离文本近谁有优先级最高)--><p style="color: chartreuse;">人间烟火气，最抚凡人心</p><p>窗前明月光，疑是地上霜</p><p>举头望明月，低头思故乡</p><h1 >本是天上逍遥的仙儿</h1>
</body>
</html>
2.2选择器
理解
选择器定位到具体修饰的标签
选择器的种类：
1、标签选择器：根据标签名定位到具体的标签
2、id选择器： 根据id属性名定位到该标签【id有且唯一】
3、class选择器，根据class的值定位标签 *
class的值可以有多个：【多个标签可以有相同的class】【一个标签可以有多个class】4、组合选择器：可以根据多种选择器类型匹配选择器定位标签【中间用逗号隔开】
5、层级选择器 ： 由外到内一层一层的定位 【空格】
6、 *选择器
7、伪类选择器：通过 选择器：状态 定位标签
优先级： 层级选择器 > id选择器 > 其他选择器【就近原则】
案例
<!DOCTYPE html>
<html lang="en">
<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>选择器</title>
</head>
<style>/* 1、标签选择器： 根据标签的名字定位到该标签 */p{font-size: larger;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;color: deeppink;}/* 2、id选择器： 根据id属性名定位到该标签【id有且唯一】 */#p1{color: blue;}/* 3、class选择器，根据class的值定位标签 *//* class的值可以有多个：【多个标签可以有相同的class】【一个标签可以有多个class】 */.d1{font-size: x-large;color: aqua;}/* 4、组合选择器：可以根据多种选择器类型匹配选择器定位标签【中间用逗号隔开】 */#p1,.d1{color: gold;}/* 5、层级选择器 ： 由外到内一层一层的定位 【空格】 */.d2 div span{font-size: small;color: blueviolet;}/* 6、 *选择器 ： */*{margin: 0px;}/* 7、伪类选择器：通过 选择器：状态 定位标签 *//* 未点击状态 */#a:link{font-size: x-large;color: rgb(236, 18, 164);}/* 点击后状态 */#a:visited{color: rgb(221, 41, 17);font-size: medium;}/* 鼠标悬停状态 */#a:hover{color: dimgrey;font-size: x-large;}/* 鼠标点击不松开状态 */#a:active{font-size: x-small;color: magenta;}/* 优先级： 层级选择器 > id选择器 > 其他选择器【就近原则】 */
</style>
<body><p>我落人中然自在，本是天上逍遥的仙儿~</p><p id="p1">哎呀我说生存呐~</p><div class="d1">哎呀我说命运呐~</div><p class="d1">玫瑰无原则 心动至上</p><div>我如果爱你，绝不像攀援的凌霄花</div><div class="d2"><div><span>内部标签</span></div></div><span>外部标签</span><hr><a id="a" href="https://www.baidu.com">点击跳转百度</a>
</body>
</html>
三、css的语法
格式：key:value; 键值对
样式名与样式值之间用冒号隔开
样式与样式之间用分号隔开
完整格式
选择器{
样式名：样式值； 样式名：样式值；
………………
}
四、常见样式
4.1尺寸修饰
<style>.d1{width: 20%;height: 500px;background-color: coral;font-size: 2em;/* em : 倍数 --相对与父窗口中的内容*/}
</style><body>尺寸修饰<div class="d1">div的内容</div>
</body>
4.2字体修饰
normal - 文字正常显示
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
font-weight 属性指定字体的粗细：
<style>.sp1{color: darkorange;font-size: 20px;font-weight: bolder; /* bolder 字体是否加粗*/font-style: italic; /* italic 字体是否倾斜*/font-family: "宋体"; /* 设置字体样式*/}.sp2{/* 简写 *//* 顺序不能能变：style-weigth-size-family */font:italic bolder 15px 宋体 ; color:rgb(28, 235, 97);}
</style>
<body><span class="sp1">我是个沉默不语的，靠着车窗想念你的乘客</span><br><span class="sp2">当107路再次经过</span><p>当107路再次经过</p>
</body>
4.3文本修饰
color: 字体颜色
text-align: center; - - 文本对齐方式
text-decoration:none; - - 文本的线
text-shadow: pink 5px 5px 2px; - - 文本的阴影 【阴影颜色-水平方向的偏移量-垂直方向的偏移量-模糊距离】
line-height: - - 行高 （文本在标签内所占的高度）
width:
height:
border: 1px #ffffff solid; - - 盒子边框【边框粗细-颜色-边框线样式】
<style>.p{color: rgb(0, 255, 21); /* 字体颜色 */text-align: center; /* 文本对齐方式 */text-decoration:none; /* 文本的线 */text-shadow: pink 5px 5px 2px; /* 文本的阴影 【阴影颜色-水平方向的偏移量-垂直方向的偏移量-模糊距离】*/line-height: 400px; /* 行高 （文本在标签内所占的高度）*/width: 400px;height: 300px;border: 1px rgb(76, 14, 223) solid; /* 盒子边框【边框粗细-颜色-边框线样式】 */}</style>
</head><body><p class="p">我不是你的先生宋东野</p><a href="https://www.baidu.com"></a>
</body>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4IWqIRPk-1647871288781)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\CSS样式.assets\image-20220321213356486.png)]](https://img-blog.csdnimg.cn/fbc1bc247ea4427eaa51e29f2488ed0b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUElLYXBpa2FhYWE=,size_12,color_FFFFFF,t_70,g_se,x_16)
4.4背景修饰
width: 500px;
height: 1200px;
background-color: pink; - - 背景颜色
background-image: url(…/img/background.jpg); - - 背景图片
background-repeat: no-repeat; - - 背景图片是否平铺
background-position: left top; - - 指定背景图片的位置
background-attachment: fixed; - - 背景图片是否随着标签滚动 【fixed-固定 scroll-滚动】
<style>.d{width: 500px;height: 1200px;background-color: pink; /* 背景颜色 */background-image: url(../img/background.jpg); /* 背景图片 */background-repeat: no-repeat; /* 背景图片是否平铺 */background-position: left top; /* 指定背景图片的位置 */background-attachment: fixed; /* 背景图片是否随着标签滚动 【fixed-固定 scroll-滚动】 */}</style>
</head>
<body><div class="d"></div>
4.5定位修饰
relative- -相对定位 相对变迁原先的位置为起点 【通过top left right bottom 来调整 】
absolute- -绝对定位 以页面的左上为起点 【通过top left right bottom 来调整 】
fixed- -固定定位 【位置不会变化】
<style>.d1{width: 100px;height: 100px;background-color: aqua;}.d2{width: 150px;height: 150px;background-color:red;position: relative; /* 位置【 absolute-绝对定位 fixed-固定定位】*/top: 50px;left: 50px;/* relative-相对定位 相对变迁原先的位置为起点 通过top left right bottom 来调整 *//* absolute-绝对定位 以页面的左上为起点 通过top left right bottom 来调整 *//* fixed-固定定位 位置不会变化*/}</style>
</head>
<body><div class="d1"></div><div class="d2"></div>
</body>
4.6浮动
float ：left | right
特点：
1、一经读懂脱离文档流
2、标签将不再独占一行
3、顶部对齐
注意：
浮动会影响后面的标签布局，因此使用了浮动之后需要清除浮动
清除浮动
div style=“clear: both;”></div
<style>.d1{width: 100px;height: 100px;background-color: aqua;float: right;}.d2{width: 50px;height: 50px;background-color: rgb(115, 255, 0);float: left; /* 浮动 【会影响页面布局，需要清除标签】 */}.d3{width: 150px;height: 150px;background-color: rgb(255, 0, 242);float: left;}</style>
</head>
<body><div class="d1"></div><div class="d2"></div><div class="d3"></div><!-- 清除浮动 --><div style="clear: both;"></div>
> 概述：是一个双列集合，属于map集合的实现类。
* 集合中的key值是唯一的，元素是无序的
* HashMap集合去重原理和无序原理和HashSet集合原理一致
* 通过比较key的哈希值和equals的结果来实现去重
* HashSet集合底层就是使用HashMap来实现的
### LinkedHashMap集合概述：是一个双列集合，是HashMap集合的子类
**特点：** 本类没有特殊的方法，只能使用父类中继承的 集合中元素有序 集合中的key值唯一
### 【笔试题】HashMap集合和HashTable集合的区别相同点：**两个集合都是Map接口的实现类，都属于双列集合
两个集合底层是使用哈希表来存储数据
* 两个集合中的方法大致相同
**不同点：** 版本不同：HashMap是jdk1.2出现的，HashTable是jdk1.0出现
* 线程安全性不同：HashMap是线程不安全的，HashTable线程安全的
* 存储的值不同：HashMap可以存储null键null值，HashTable不可以存储null
</body>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ywj72qxG-1647871288784)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\CSS样式.assets\image-20220321214316996.png)]](https://img-blog.csdnimg.cn/999cd055dc1b4bda82548e22a5de7386.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUElLYXBpa2FhYWE=,size_19,color_FFFFFF,t_70,g_se,x_16)
4.7display
特点：
1、可以实现底部对齐
2、可以实现块标签、行标签以及行内块的转换
3、隐藏标签
块标签：独占一行 可以设置宽高
行标签：不独占一行 不可以设置宽高
行内块：不独占一行 可以设置宽高
<style>.d1{width: 100px;height: 100px;background-color: aqua;display: inline-block; /* 转为行内块 ：可以设置宽高、但不独占一行 */}.d2{width: 50px;height: 50px;background-color: rgb(115, 255, 0); display: inline-block; /* 转为行内块 */ }.d3{width: 150px;height: 150px;background-color: rgb(255, 0, 242);display: inline-block; /* 转为行内块 */}.sp1{display: inline-block;width: 50px;height: 50px;background-color: coral;}.sp2{display: block;width: 50px;height: 50px;background-color: rgb(2, 62, 228);}h2{display: none; /* 隐藏标签 */}</style>
</head>
<body><h2>display的使用</h2><div class="d1"></div><div class="d2"></div><div class="d3"></div><span class="sp1">span1内容</span><span class="sp2">span2内容</span>body
</body>
4.8盒子模型
为页面提供了一种思路
边框： border
内边距：padding—-盒子中的内容与盒子边框的距离
外边距：margin——盒子中的内容与盒子边框的距离
注意：
盒子总大小 ： width / height + 边框×2 + margin×2 + padding×2
<style>.d1{width:100%;height:30px;background-color: #e3e4e5;}.d2{width: 100%;height: 140px;background-color: #ffffff;}.d3{width: 100%;height: 1000px;background-color: #f4f4f4;}</style>
</head>
<body><div class="d1"></div><div class="d2"></div><div class="d3"></div>
</body>
案例
案例一、京东头部
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<style>*{margin: 0px;padding: auto;}.dd{width: 100%;height: 40px;background-color: #e3e4e5;}ul{/* 去除ul列表前的圆点 */list-style-type: none;margin-left: 700px;font-size: 12px;color: #999999;}ul li{float: left;/* li标签间隔 */margin-left: 15px;/* 垂直方向居中 */line-height: 40px;}
</style>
<body><div class="dd"><ul><li>您好，请登录</li><li>|</li><li>我的订单</li><li>|</li><li>我的京东</li><li>|</li><li>京东会员</li><li>|</li><li>企业采购</li><li>|</li><li>客户服务</li><li>|</li></ul></div>
</body>
</html>
案例二、京东登录静态页面
<!DOCTYPE html>
<html lang="en">
<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>*{margin: 0px;padding: auto;}.header{/* border: 1px solid black; */width: 100%;height: 80px;}.header img{float: left;margin-left: 465px;margin-top: 8px;}.header font{font-size: 24px;line-height: 80px;color: #484e53;float: left;margin-top: 5px;margin-left: 24px;}.dd img{margin-top: 12px;position: absolute;line-height: 40px;margin-left:490px ;}.dd p{/* float: left; */margin-left:510px ;line-height: 40px;}.dd{position: absolute;width: 100%;height: 40px;background-color: antiquewhite; }.body{/* border: 1px solid rgb(11, 220, 235); */width: 100%;height: 475px;background-color: #8ABFE9;background-repeat: no-repeat;background-size: 100% 100%;/* background-image: url(img/body.jpg); */margin-top: 40px;}.login{/* border: 1px solid rgb(11, 220, 235); */position: absolute;width: 347px;height: 370px;background-color: #ffffff;margin-left: 1108px;margin-top:-440px;position: absolute;float: left;}.body .login p font {position: absolute;color: #b5b5b6;margin-left: 50px;margin-top: 30px;font-size:large;}.body .login p font1{position: absolute;font-size:large;color: #fa0909;margin-top: 30px;margin-left: 222px;margin-bottom: 5px;}.body .login font2{position: absolute;margin-top: 63px;color: #b5b5b6;font-size: small;}.body .login p .um{width: 40px;height: 40px;border: 1px solid #c3c3c3;background-image: url(img/ren.jpg);background-size: 100% 100%;float: left;margin-top: 19px;margin-left: 20px;}.body .login p input{width: 266px;height: 38px ;float: left;border: none;margin-top: 19px;border: 1px solid #c3c3c3;}.body .login p1 .sm{width: 40px;height: 40px;border: 1px solid #c3c3c3;background-image: url(img/锁.jpg);background-size: 100% 100%;float: left;margin-top: 12px;margin-left: 20px;}.body .login p1 input{width: 266px;height: 38px ;float: left;border: none;margin-top: 12px;border: 1px solid #c3c3c3;}#pp{position: absolute;margin-top: 200px;}#button{position: absolute;float: left;width: 314px;height: 40px;background-color: #df0a17;margin-top: 160px;margin-left: -314px;text-align: center;font-size:x-large;line-height: 40px;color: #ffffff;text-decoration: none;}#forget{position: absolute;color: rgb(63, 62, 62);margin-top: 130px;margin-left: -50px;}#login-footer{width: 347px;height: 50px;background-color: #f3ecec88;margin-left: 1108px;margin-top:-120px;position: absolute;float: left;}#qq{position: absolute;margin-top: 20px;margin-left: 20px;}#wei{position: absolute;margin-top: 20px;margin-left: 90px;}#reg{position: absolute;margin-top: 20px;margin-left: 250px;}.QQ{position: absolute;color: rgb(63, 62, 62);margin-top: 18px;margin-left: 43px; }.weixin{position: absolute;color: rgb(63, 62, 62);margin-top: 18px;margin-left: 113px; }.REG{position: absolute;color: rgb(63, 62, 62);margin-top: 18px;margin-left: 273px; }.footer{width: 100%;height: 40px;background-color: #FFFFFF;}ul{/* 去除ul列表前的圆点 */list-style-type: none;margin-left: 480px;font-size: 12px;color: #999999;}ul li{float: left;/* li标签间隔 */margin-left: 13px;/* 垂直方向居中 */line-height: 40px;}#footword{position: absolute;color: #999999; font-size: 12px;margin-top: 40px;margin-left: 830px;}#tip{position: absolute;margin-top: 50px;margin-left: 1108px;z-index: 99;background-color: antiquewhite;text-align: center;font-size: small;line-height: 40px;color: #858282;width: 347px;height: 40px;}#chat{margin-top: 55px;}#page{position: absolute;color: rgb(109, 107, 107);font-size: small;margin-left: 610px;margin-top: 20px;}#img{z-index: -1;margin-left: 470px;font-size: 100% 100%;}</style>
</head>
<body><div class="header"><img src="https://misc.360buyimg.com/lib/img/e/logo-201305-b.png" ><font id="page">登录页面，调查问卷</font><font>欢迎登录</font><img id="chat" src="https://misc.360buyimg.com/user/passport/1.0.0/css/i/q-icon.png"></div><div id="tip"><img src="https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/icon-tips.png"><font>京东不会以任何理由要求您转账汇款，谨防诈骗。</font></div><div class="dd"><img src="https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/icon-tips.png" ><p style="color: #858282; font-size:x-small; ">依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</p></div><div class="body"><img id="img" src="img/body.jpg" alt=""><div class="login"><p><font>扫码登陆</font><font1>账户登录</font1></p><font2>——————————————————————————</font><p><span class="um"></span><input type="text" name="username" placeholder="邮箱/用户名/手机号"></p><p1><span class="sm"></span><input type="password" name="username" placeholder="请输入密码"></p><!-- <span >登 录</span> --><a id="button" href="https://www.baidu.com/">登 录</a><span id="forget" ">忘记密码</span> </div><div id="login-footer"><p id="qq"><img src="img/QQ.jpg" ></p><font class="QQ">QQ</font><p1 id="wei"><img src="img/WEchart.jpg"></p1><font class="weixin">微信</font><p2 id="reg"><img src="img/注册.jpg" ></p2><font class="REG">立即注册</font></div> </div><div class="footer"><ul><li>关系我们</li><li>|</li><li>联系我们</li><li>|</li><li>人才招聘</li><li>|</li><li>商家入驻</li><li>|</li><li>广告服务</li><li>|</li><li>手机京东</li><li>|</li><li>友情链接</li><li>|</li><li>销售联盟</li><li>|</li><li>京东社区</li><li>|</li><li>京东公益</li><li>|</li><li>English Site</li><li>|</li></ul><div id="footword">Copyright © 2004-2022 京东JD.com 版权所有</div></div>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uElRu829-1647871288788)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\CSS样式.assets\image-20220321215455055.png)]
</p2><font class="REG">立即注册</font></div>
</div><div class="footer"><ul><li>关系我们</li><li>|</li><li>联系我们</li><li>|</li><li>人才招聘</li><li>|</li><li>商家入驻</li><li>|</li><li>广告服务</li><li>|</li><li>手机京东</li><li>|</li><li>友情链接</li><li>|</li><li>销售联盟</li><li>|</li><li>京东社区</li><li>|</li><li>京东公益</li><li>|</li><li>English Site</li><li>|</li></ul><div id="footword">Copyright © 2004-2022 京东JD.com 版权所有</div>
</div>
