二月繁华编程技术 2020-09-29

CSS样式常见知识点

CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容，为用户展现较具观赏的外表的。以下是小编来在优化网站时遇到的CSS一些小知识点。
CSS样式常见知识点

边距清空:

1
2
3
4
5
6

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldse,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{font-size:12px;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;}
a{text-decoration:none;}

清除浮动 :
1
2
.clearfix:after{conter:"";display:block;clear:both;}
.clearfix{zoom:1;}
浏览器当做编辑器:
浏览器地址栏输入代码，可直接将浏览当做编辑器

1
data:text/html,<html contenteditable>
鼠标隐藏:
1
*{cursor:none!important;}
文字模糊效果:
1
p{color:transparent;text-shadow:#111 0 0 5px;}
居中样式 :
垂直居中样式(translate css3需IE9)

1
.center-vertical{position:relative;top:50%;transform:translateY(-50%);}

水平居中样式(translate css3需IE9) :

1
.center-horizontal{position:relative;left:50%;transform:translateX(-50%);}
多重边框 :
1
div{box-shadow:0 0 0 6px rgba(0,0,0,0.2),0 0 0 12px rgba(0,0,0,0.2),0 0 0 18px rgba(0,0,0,0.2),0 0 0 24px rgba(0,0,0,0.2);height:200px;margin:50px auto; width:400px;}
实时编辑css （IE6无效）
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
<style style="display:block" contentEditable>
body{color:blue}
</style>
</body>
</html>
文本框灰置
有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使

1
<input type="text" name="input1" value="中国">

的内容，”中国”两个字不可以修改。实现的方式归纳一下，有如下几种。

方法1: onfocus=this.blur() 当鼠标放上就离开焦点

1
<input type="text" name="input1" value="中国" onfocus=this.blur()>

方法2:readonly

1
2
<input type="text" name="input1" value="中国" readonly>
<input type="text" name="input1" value="中国" readonly="true">

方法3: disabled

1
<input type="text" name="input1" value="中国" disabled="true">
css3 移动web样式媒体查询的变化
外联：当屏幕等于小于480px调用new_file.css

1
<link type="text/css" rel="stylesheet" href="css/new_file.css" media="only screen and (min-width:480px)" />

内联：当屏幕大于480px调用使用本样式

1
2
3
4
5
6
7
<style>
@media screen and (max-width:480px){
body {
background: blue;
}
}
</style>

一定要注意and后面的空格

CSS

分享到：

相关推荐