【前端自学之路】CSS之基础属性

CSS属性有很多,可以从这几个角度来区分

文字

1
2
3
4
5
6
7
8
9
10
font-size:   16px;     			// 字体大小

<!-- more -->

font-family: sans-serif; // 字体系列
font-weight: 600; // 粗体

font-style: italic; // 字体斜体风格

color: #ff0; // 颜色

文本

1
2
3
4
5
text-align: center;             // 文本对齐方式,left right center
text-decoration: underline; // 文本修饰方式,比如下划线

word-spacing: 1px; // 单词间距
letter-spacing: 1px; // 字母间距

背景

1
2
3
4
5
6
7
background-color: #fff;             // 背景颜色
background-image: url(./abc.png); // 背景图片

background-position: 1px 1px; // 背景位置
background-size: 100% 100; // 背景大小

background: #fff url() no-repeat 1px 1px 100% 100

盒子模型属性

1
2
3
4
5
width: 100px;               // 宽度
height: 100px; // 高度
padding: 10px; // 内边距
margin: 10px; // 外边距
border: 1px solid #f00; // 边框

定位属性

1
position: relative;         // 相对定位,有四种值

CSS单位详解

1
2
3
4
5
6
7
8
9
10
长度单位:   px = pixel; 像素
% = 百分比, 相对于父元素的百分比
em , rem 这两个也是相对单位,后面接触
width: 100%;

颜色单位: #ff00dd; 16进制 可以简写 #f0d; #ff00de ;
red white
rgb(10, 22, 33)
rgba(10, 22, 22, 0.4)
color: #f0d;

CSS属性值解析(存在4个方向的)

1
2
3
4
5
6
7
8
9
10
11
12
存在四个方向的有边框,padding内边距,还有margin外边距等

一般4个方向默认的顺序是 上 右 下 左
例子: padding:1px 2px 3px 4px; 标识 上 1px; 右2px; 下3px, 左4px
padding: 1px 2px 3px; 标识 上 1px; 右2px; 下3px;左2px; (对面方向)
padding: 1px 2px ; 标识 上和下是 1px; 左和右是2px;
padding: 1px; 标识上下左右都是1px

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

当然还有其他属性,各位要稍微留意学习就好

坚持原创技术分享,谢谢鼓励我继续创作!