CSS01.认识css

发布时间 2023-03-22 21:11:51作者: u_Dawn

1.什么是CSS?

CSS是用于页面展示的语言

CSS决定了页面长什么样子

 

2.开发者工具

vscode快捷操作

  • 1、快速复制一行

ctrl+c 然后 ctrl+v

  • 2、选定多个相同的单词

双击选定一个单词然后ctrl+d

  • 3、添加多个光标

ctrl+Alt+上箭头(下箭头)

  • 4、全局替换某写单词

ctrl + h 注意选择全部替换即可

  • 5、选定某个区块

shift+alt然后拖动鼠标

  • 6、放大缩小整个编辑器界面

ctrl + 加号或者减号

 

3.去掉列表默认的样式

无序和有序列表前面默认的列表样式。

在不同浏览器效果不同,所以直接去掉这些列表样式。代码如下

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. CSS属性书写顺序

建议遵循以下顺序:

  1. 布局定位属性:display/position/float/clear/visibility/overflow

  2. 自身属性:width/height/margin/padding/border/background

  3. 文本属性:color/font/text-decoration/text-align/vertical-align/white-space/break-word

  4. 其他属性(CSS3):content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient...