css
CSS
css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化。
存在方式有三种:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。
语法:style = 'key1:value1;key2:value2;'
- 在标签中使用 style='xx:xxx;'
- 在页面中嵌入 < style type="text/css"> </style > 块
- 引入外部css文件
必要性:美工会对页面的色彩搭配和图片的美化负责,开发人员则必须知道是如何实现的。
一。css选择器:
标签选择器: 设置所有div
<style>
div{
background-color:black;
color:white;
}
</style>
<div>aaaaaaaaaa</div>
<span>bbbbbbb
<div>dddddddd</div>
bbbbbbbb</span>
<div>cccccccccc</div>
class选择器:
<style> /*注释*/
.c1{
color:yellow
}
</style>
<div class="c1">css的初体验</div> <!--类选择器(可以重复)-->
<span class="c1">span标签1</span>
<span class="c1">span标签2</span>
id选择器:
<style>
#i1,#i2{
background-color:red;
}
#i3{
background-color:green;
}
</style>
<div id="i1">css的初体验1-1</div> (不要只用数字,不要重复)
<div id="i2">css的初体验1-2</div>
<div id="i3">css的初体验1-3</div>
关联选择器(层级选择器): 将333333设置为红色
<style> span div{ 或者 ./c1 div{ color:red } </style>
<div class="c1">111111111</div>
<span class="c1">22222222
<div>33333333</div>
22222222</span>
<div class="c1">44444444</div>
组合选择器:
<style> #i1,#i2,#i3{ color:red } </style>
<div id="i1">aaaaaaaaaa</div> <div id="i2">bbbbbbbbbb</div> <div id="i3">cccccccccc</div>
属性选择器: 对选择到的标签根据属性再进行一次筛选
<style> .c1[n="alex"]{width:10px;height=10px;} input[n="lsj"]{width:20px;height=20px;} </style> <input class="c1" type="text" n="alex"> <input type="password" n="lsj">
更多选择器 <----点我
css选择器的优先级:标签上的style优先(body), 编写顺序越下面优先级越高(head)
将head中样式写在单独的css文件中,可在html的head中引用:<link rel="stylesheet" href="css文件路径文件名">
二。css常用属性:
background(背景)
border(边框)
<div style="border:1px solid red;font-size:100px;text-align:center;">asdadasd</div> 宽度,样式,颜色,字体,水平居中
border-top/bottom/left/right-color
line-height:???px 与边框px相同,居中
fount-weight:??? 加粗
margin 与 padding ( 外边距与内边距 )
<div style="border:1px solid red;height:70px;"> <div style="background-color:green;height:50px;margin-top:50px;"></div> </div>
<div style="margin:0 auto;"></div> 去掉边框与屏幕边缘的空格 </div> <div style="background-color:green;height:50px;padding-top:50px;"></div> </div>
display(显示) 块级标签与内联标签的转换
<div style="background-color:red;display:inline;">aaaaaaa</div> <a style="background-color:red;display:block;">bbbbbbbb</a> <!--行内标签无法设置 高度,宽度,边距 块级标签可以设置--> <div style="background-color:red;display:inline-block;">aaaaaaa</div> 具有块级与内联标签的双重属性 内联:默认自己有多少占多少 块级标签:设置高度,宽度,边距 display:none;让标签消失
cursor(光标)
float(浮点) 让块级标签浮动起来,
<div style="width:20%;background:red;">aaaaaa</div> <div style="width:80%;background:green;">bbbbbbb</div> <div style="width:20%;background:red;float:left">aaaaaa</div> <div style="width:80%;background:yellow;float:left">bbbbbbb</div>
当左对齐占满时,自动换到下一行
<div style="width:300px;border:1px solid black;float:left"> <div style="width:96px;height:30px;border:1px solid red;float:left"></div> <div style="width:96px;height:30px;border:1px solid red;float:left"></div> <div style="width:96px;height:30px;border:1px solid red;float:left"></div> <div style="width:96px;height:30px;border:1px solid red;float:left"></div> <div style="clear:both;"></div> <!--避免大表格边框被小表格覆盖--> </div>
position(位置)
position:fixed 固定在页面的某一位置
上下翻动滚轮,“返回顶部”位置不变
在div中添加(onclick="document.body.scrollTop=0"),实现返回顶部
<div style="width:70px;height:50px;background-color:yellow; position:fixed;bottom:15px;right:15px;">返回顶部</div> <div style="height:500px;background-color:#dddddd;"></div>
上下翻动滚轮,“头部位置”不变
.c1{ height:48px; background-color:black; color:#dddddd; position:fixed; top:0; right:0; left:0; } .c2{ height:5000px; background-color:#dddddd } </style> <div class="c1">头部</div> <div class="c2" style="margin-top:48px;">内容</div>
position:absolute 固定在页面的某一位置 ;一般与 relative 一起使用
上下翻动滚轮,“黄色阴影” 位置跟着改变
<div style="width:50px;height:50px;background-color:yellow;position:absolute;right:0;bottom:0"></div> <div style="height:5000px;background-color:#dddddd;"></div>
position :absolute + relative
在页面中包含黄色矩形,黑色方块相对于矩形定位
<div style="position:relative;width:400px;height:150px;border:1px solid red;margin:0 auto;"> <div style="position:absolute;left:0;bottom:0;width:50px;height:50px;background-color:black;"></div> </div>
透明度
overflow(改造默认样式)
<div style="height:200px;width:300px;overflow:hidden;"> 照片超过范围,隐藏超出的部分 <img src="照片"> </div>
<div style="height:200px;width:300px;overflow:auto;"> 照片超出范围,出现滑轮
<img src="照片">
</div>
hover 当鼠标放在当前标签上时,所设置属性生效(颜色,大小。。。)
<style> .c1:hover{ background-color:green; } c2{ background-color:green; } </style> <div class="c1">asdasdasd</div> <div class="c2">asdasdasd</div>
更多