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>
更多