概括的说css就是用来给html标签添加颜色,调整样式、位置的。
style中的样式:height、width、background-color、color
<body> <div style="height:20px;width:200px;background-color: red;color:white">A</div> <div style="height:20px;width:200px;background-color: yellow;color:green">B</div> <div style="height:20px;width:200px;background-color: blue;color:white">C</div> </body>
效果
字体的颜色可以使用#xxxxx会rgb()来描述,此处不做展开,需要用的时候直接查即可。
我们可以对每个标签分别设置不同的样式,
但是,此时,我们考虑如何复用这些格式
2.1、直接复制
2.2、选择器的使用 head标签中添加style标签,结合选择器中来使样式复用
2.2.1 id选择器 #id
<head> <meta charset="UTF-8"> <title>Title</title> <style> #x1{ background-color: orange;color:green;height:50px; } #x2{ background-color: deeppink;color:white;height:50px; } </style> </head> <body> <div id="x1">ID选择器 id=x1</div> <div id="x2">ID选择器 id=x2</div> </body> </html>
2.2.2 css选择器 最常用的选择器 .classname
<head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color:#3ada1d;color:black;height:20px;width:100px; } .c2{ background-color:yellow;color:black;height:20px;width:100px; } </style> </head> <body> <div class="c1">A</div> <span class="c2">B</span> <span class="c1">CDE</span> </body> </html>
2.2.3 标签选择器
<head> <meta charset="UTF-8"> <title>Title</title> <style> div{ font-size: 100px; } span{ background-color: deeppink; } p{ color:mediumslateblue; } label { background-color: yellow; } </style> </head> <body> <p>p标签</p> <div>div标签</div> <label>label标签</label> <span>span标签</span> </body>
2.2.4 关联(层级)选择器
2.2.5 层级选择器可以和其他的选择器搭配使用
2.2.6 组合选择器
将多个样式一样的选择器合并在一起,逗号是或的关系
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 .c2,.c3{ background-color: skyblue; } </style> </head> <body> <div class="c1"> <P > it is p1<br /> <span class="c3">p1 span</span> </P> <p class="c2"> it is p2<br/> <span>p2 span</span> </p> </div> </body> </html>
input,div,p{ background-color:red; }
2.2.7 属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> [type=‘text‘]{ color:deeppink; } [type=‘password‘]{ background-color: lightgray; } </style> </head> <body> <label for="username">用户名</label> <input id="username" type="text" value="username"> <br /> <label for="passwd">密码</label> <input id="passwd" type="password" value="123456"> </body> </html>
我们并不建议将多个选择器组合在一起使用,当组合的时候需要明确优先级
1、复合选择器优先
写的越精确,优先级越高
2、同一级别
同一级别中后写的会覆盖先写的样式
head中style内样式的注释方法
文件中引用css样式的方法
标签选择器 <类选择器 < id选择器 <行内样式表
<head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color:deeppink; } .c2{ background-color: lightgray; } </style> </head> <body> <label for="username">用户名</label> <input id="username" type="text" value="username"> <br /> <label for="passwd">密码</label> <input id="passwd1" type="password" value="123456" class="c1" class="c2"><br/> <input id="passwd1" type="password" value="123456" class="c2" class="c1"><br/> <input id="passwd2" type="password" value="123456" class="c1 c2"><br/> <input id="passwd2" type="password" value="123456" class="c2 c1"><br/> </body>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href=‘commons.css‘> </head> <body> <label for="username">用户名</label> <input id="username" type="text" value="username"> <br /> <label for="passwd">密码</label> <input id="passwd1" type="password" value="123456" class="c1" class="c2"><br/> <input id="passwd1" type="password" value="123456" class="c2" class="c1"><br/> <input id="passwd2" type="password" value="123456" class="c1 c2"><br/> <input id="passwd2" type="password" value="123456" class="c2 c1"><br/> </body> </html> ------------------------------------------- commons.css .c1{ background-color:deeppink; } .c2{ background-color: lightgray; }
指令分为三个部分:像素+样式+颜色
像素表示线的粗细程度
样式 实线虚线等 实线虚线 solid dotted dashed
颜色,rgb
border与left/right/top/bottom的结合使用
<input type="text" style="border: 10px dotted red;"> <input type="text" style="border: 5px solid red;"> <br /> <input type="text" style="height:50px;width:50px;border-left: 10px solid orangered;border-top:10px solid greenyellow;"> <br /> <br /> <input type="text" style="
height:50px;width: 80px;
border-left: 3px solid orangered;
border-top:5px dotted greenyellow;
border-bottom:5px dashed yellow;
border-right: 3px solid plum"
>
可以用过像素指定大小,也可以使用百分比的方式
水平居中text align
垂直居中line-heigh 和div像素一致
font-size
font-weight:bold(加粗常用)
<div style="background-color: greenyellow;height: 300px;width:40%;text-align: center;line-height: 300px;font-size: 50px;font-weight: bolder">大小</div>
需要注意父标签对子标签的控制 <div style="clear: both;"></div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="commons.css"> <style> .pg_goods{ height: 200px; width:150px; border: 2px solid red; float: left; } .pg_goods_img{ height: 100px; width: 100px; text-align: center; } </style> </head> <body style="margin:0 auto"> <div style="height: 100px;background-color: skyblue;color: white;font-weight: bold;font-size: 30px;line-height: 100px"> yomi的小卖部 </div> <div style="border: 3px dashed lightslategray"> <div style="border:5px solid antiquewhite;width:10%;height:600px;float: left;background-color: lightgray"></div> <div style="border:5px dotted powderblue;width:88%;height:600px;float: right;"> <div class="pg_goods"> </div> <div class="pg_goods"> </div> <div class="pg_goods"> </div> </div> <div style="clear: both;"></div> </div> </body> </html>
display:inline
display:block
display none
display inline-block
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href=‘commons.css‘> </head> <body> <div style="display: inline;background-color: red">it is div</div> <div style="display: none;">看不见我</div> <span style="display: block;background-color: yellow">it is span</span> <span style="display:inline-block;height: 20px;width: 400px;background-color: greenyellow">it is span ago,now it is inline-block</span> <div style="display:inline-block;height: 20px;width: 400px;background-color: skyblue">it is div ago,it is inline-block</div> <div style="display: none;">看不见我</div> </body> </html>
margin不仅能设置边距,还能设置auto居中
<div style="background-color:greenyellow;height: 150px;width:100px;margin:20px">
float与margin的结合使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="margin:0 auto"> <div style="background-color: lightgray;"> <div style="width: 1500px;margin:0 auto"> <div style="float: left;height: 30px;line-height: 30px">收藏本站</div> <div style="float: right;height: 30px;margin-left: 3px;line-height: 30px"><a href="http://www.baidu.com">登录</a></div> <div style="float: right;height: 30px;line-height: 30px"><a href="http://www.qq.com">注册</a></div> <div style="clear: both;"></div> </div> <div style="clear: both;"></div> </div> </body> </html>
10.1、css复用
将公有的样式放到一个css中私有的再单独写css,增加阅读性条理性。
<style>
如果整个页面的宽度 > 900px时:
.c{共有 }
.c1{独有}
.c2{独有}
<div class=‘c c1‘></div>
<div class=‘c c2‘></div>
10.2、自适应 和 改变大小变形
左右滚动条的出现
宽度,百分比
页面最外层:像素的宽度 => 最外层设置绝对宽度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width:500px;margin:0 auto"> <p> 庆历四年春,滕子京谪守巴陵郡。越明年,政通人和,百废具兴。乃重修岳阳楼,增其旧制,刻唐贤今人诗赋于其上。属予作文以记之。(具 通:俱) 予观夫巴陵胜状,在洞庭一湖。衔远山,吞长江,浩浩汤汤,横无际涯;朝晖夕阴,气象万千。此则岳阳楼之大观也,前人之述备矣。然则北通巫峡,南极潇湘,迁客骚人,多会于此,览物之情,得无异乎? 若夫霪雨霏霏,连月不开,阴风怒号,浊浪排空;日星隐曜,山岳潜形;商旅不行,樯倾楫摧;薄暮冥冥,虎啸猿啼。登斯楼也,则有去国怀乡,忧谗畏讥,满目萧然,感极而悲者矣。(隐曜 一作:隐耀;霪雨 通:淫雨) 至若春和景明,波澜不惊,上下天光,一碧万顷;沙鸥翔集,锦鳞游泳;岸芷汀兰,郁郁青青。而或长烟一空,皓月千里,浮光跃金,静影沉璧,渔歌互答,此乐何极!登斯楼也,则有心旷神怡,宠辱偕忘,把酒临风,其喜洋洋者矣。 嗟夫!予尝求古仁人之心,或异二者之为,何哉?不以物喜,不以己悲;居庙堂之高则忧其民;处江湖之远则忧其君。是进亦忧,退亦忧。然则何时而乐耶?其必曰:“先天下之忧而忧,后天下之乐而乐”乎。噫!微斯人,吾谁与归? 时六年九月十五日。 </p> </div> </body> </html>
10.3、默认img标签,有一个1px的边框
img{border: 0;}
11.1 position:
a. fiexd => 固定在页面的某个位置 ,如页面工具栏,模态登录框
b.absolute=>第一次打开页面时候固定,后面拖动滚轮会移动。
b. relative + absolute 相对于relative标签,absolute与其保持固定的相对位置,如点赞
<div style=‘position:relative;‘>
<div style=‘position:absolute;top:0;left:0;‘></div>
</div>
11.2 模态登录框需要结合的参数:
opcity: 0.5 透明度 1->0 0消失
z-index: 层级顺序 越大越在上面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .body{ margin: 0 auto; } .pg_width{ width:1760px; } .pg_head{ height:44px; color:white; background-color: #2459a2; position: fixed; top: 0; left: 0; right: 0; } .pg_body{ background-color: #ededed; height: 700px; margin-top: 46px; } .pg_info{ margin: 0 auto; width: 1100px; } .c1{ background-color: white; } .p{ border: 1px solid black; height: 80px; } [name=‘pg_head‘] a{ text-align: center; line-height: 44px; padding: 0 10px; } [name=‘pg_head‘] a:hover{ font-weight: bold; background-color: blue; font-size: large; } </style> </head> <body class="body"> <div name="to_top" style="height: 50px;width: 50px;background-color: gainsboro;position: fixed;bottom: 2px;right: 2px;z-index:10;font-size: 20px;text-align: center;line-height:25px">返回顶端</div> <div name="pg_head" class="pg_width pg_head" style="width: 100%"> <div class="pg_info"> <a>LOGO</a> <a>全部</a> <a>42区</a> <a>骰子</a> <a>图片</a> </div> </div> <div name="pg_body" class="pg_body"> <div class="pg_info c1"> <div class="p"> <div style="height: 20%;font-size: 10px">这是一篇文章的标题</div> <div style="height: 60%;font-size: 10px">Python [1](英国发音:/?pa?θ?n/ 美国发音:/?pa?θɑ?n/), 是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum于1989年发明,第一个公开发行版发行于1991年。</div> <div style="height: 20%;font-size: 10px;position: relative"> 点赞 <span style=" color:red; position: absolute; top:-10px; left: 20px;">+1</span> </div> </div> <div style="height: 70px;width:140px;overflow: hidden"> <img src="手柄.png"> </div> <div style="height: 70px;width:140px;overflow: auto"> <img src="手柄.png"> </div> </div> </div> <div name="pg_tail" style="width:100%" > <div class="pg_info"> <div style="text-align: center;">© 2018 yomi</div> </div> </div> </body> </html>
不加overflow -->撑开
overflow
拿图片测试 使用auto,则超出部分变为滚动条,使用hidden则隐藏
<div style="width:600px;height:300px; overflow: hidden"> <img src="lx素材.jpg" > </div>
拿文字测试
<div style="width:100px;height:100px;margin:0 auto;overflow: auto">
此处不截图了,效果和图片是一样的
不做截图了,上面有
[name=‘pg_head‘] a:hover{
font-weight: bold;
background-color: blue;
font-size: large;
}
此处我们先不思考使用background添加图片和使用img标签添加图片的优劣对比
几个点:repeat、no-repeat、repeat-x、repeat-y、background-positon-x、background-position-y
repeat情况:
no-repeat的情况
repeat -x与repeat-y的情况 x轴重复与y轴重复
<div style="background:url(icon_素材.png);height: 300px;width: 300px;background-repeat: repeat-x">
background-position-x、background-position-y的情况:通常用于一张大图截取不同的图标,结合在一张图上可以减少建立会话的数量
<div style="height: 25%;font-size: 10px;position: relative"> <span style=" display: inline-block; height: 18px;width: 18px; background: url(icon_素材.png); background-position-y:18px"> </span> 点赞 </div>
<div style="height: 35px;width: 400px;border:1px solid red"> <input type="text" style="height: 35px;width: 400px;" > <span class="c3"></span> </div>
去掉border:1px solid red <div style="height: 35px;width: 400px;"> <input type="text" style="height: 35px;width: 400px;" > <span class="c3"></span> </div>
开始放图片调整位置 <div style="height: 35px;width: 200px;position: relative"> <input type="text" style="height: 35px;width: 200px;" > <span style="position: absolute;display: inline-block;right: 2px;top:10px;height: 16px;width: 16px;background: url(i_name.jpg);"></span> </div> 出现挡住文字的情况
使用padding调整 <div style="height: 35px;width: 200px;position: relative"> <input type="text" style="height: 35px;width: 200px;padding-right: 30px" > <span style="position: absolute;display: inline-block;right: 2px;top:10px;height: 16px;width: 16px;background: url(i_name.jpg);"></span> </div> 发现图片发生偏移
调整input标签 padding多少减多少 成功 <div style="height: 35px;width: 200px;position: relative"> <input type="text" style="height: 35px;width: 170px;padding-right: 30px" > <span style="position: absolute;display: inline-block;right: 2px;top:10px;height: 16px;width: 16px;background: url(i_name.jpg);"></span> </div>
原文:https://www.cnblogs.com/yomi/p/9244801.html