CSS是用于页面展示的语言
-
1、快速复制一行
ctrl+c
然后 ctrl+v
-
2、选定多个相同的单词
双击选定一个单词然后ctrl+d
-
3、添加多个光标
ctrl+Alt+上箭头(下箭头)
-
4、全局替换某写单词
ctrl + h
注意选择全部替换即可
-
5、选定某个区块
shift+alt
然后拖动鼠标
-
6、放大缩小整个编辑器界面
ctrl +
无序和有序列表前面默认的列表样式。
在不同浏览器效果不同,所以直接去掉这些列表样式。代码如下
li { list-style: none; }
1. 圆角边框(CSS3)
-
语法:
border-radius:length;
-
其中每一个值都可以为数值或百分比的形式
-
技巧:让一个正方形 变成圆圈
border-radius:50%; /*圆形*/
border-radius:10px; /*圆角矩形,假设前面的高度是20px*/
-
以上效果图矩形的圆角不必用百分比,因为百分比会是表示高度和宽度的一半。
2.盒子阴影(CSS3)
-
语法:
box-shadow: 水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离 |
spread | 可选。阴影的尺寸 |
color | 可选。阴影的颜色 |
inset | 可选。将外部阴影(outset)改为内部阴影 |
div {
width:200px;
height:200px;
border:10px solid red;
box-shadow: 0 15px 30px rgba(0,0,0,-4)
}
4. CSS书写规范
[强制]选择器与 { 之间必须包含空格。
.selector {
}
[强制]属性名与之后的 ":" 之间不允许包含空格, ":" 与属性值之间必须包含空格。
font-size: 12px;
[强制]并集选择器,每个选择器必须独占一行。
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
[建议]一般情况下选择器的嵌套层级应不大于3级,位置靠后的限定条件应尽可能精确。
#username input {}
.comment .avatar {}
属性规范
[强制]属性定义必须另起一行。且必须以分号结尾。
.selector {
margin: 0;
padding: 0;
}
5.
-
布局定位属性:display/position/float/clear/visibility/overflow
-
自身属性:width/height/margin/padding/border/background
-
文本属性:color/font/text-decoration/text-align/vertical-align/white-space/break-word
-