CSS基本样式

CSS 基本样式

宽度

width: auto;                  // 自动适应宽度

高度

height: auto;                 // 自动适应高度

文本样式 => 位置

text-align: center;           // 文本水平居中对齐

文本样式 => 字体大小

font-size: 12px;              // 字体大小为12像素

文本样式 => 字体加粗

font-weight: 600;             // 字体加粗程度为600

文本样式 => 字体样式

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;    // 使用指定字体

字体颜色

color: aqua;                  // 设置字体颜色为浅绿色
color: rgb(90, 95, 95);       // 设置字体颜色为具体的RGB值
color: #8b2e2e;               // 设置字体颜色为具体的十六进制值

背景色

background-color: #8b2e2e;    // 设置背景色为具体的十六进制值

背景图片

background-image: url(../logo.jpg);       // 设置背景图片的URL
background-repeat: no-repeat;             // 背景图片不重复渲染
background-size: 20px 20px;               // 设置背景图片的尺寸
background-position: 10px 10px;           // 设置背景图片的位置

外边距

margin: 1px 2px 3px 4px;                  // 设置外边距的四个值（上、右、下、左）
margin-top: 1px;                          // 设置顶部外边距
margin-right: 2px;                        // 设置右侧外边距
margin-bottom: 3px;                       // 设置底部外边距
margin-left: 4px;                         // 设置左侧外边距

内边距

padding: 1px 2px 3px 4px;                 // 设置内边距的四个值（上、右、下、左）
padding-top: 1px;                         // 设置顶部内边距
padding-right: 2px;                       // 设置右侧内边距
padding-bottom: 3px;                      // 设置底部内边距
padding-left: 4px;                        // 设置左侧内边距

浮动

float: left;                             // 元素向左浮动
float: right;                            // 元素向右浮动

边框

border: 1px solid #000;                  // 设置边框的粗细、线条样式和颜色

边框倒角

border-radius: 20px;                     // 设置边框的圆角半径
border-left: 20px;                       // 设置左边框的宽度
border-top: 20px;                        // 设置上边框的宽度
border-bottom: 20px;                     // 设置下边框的宽度
border-right: 20px;                      // 设置右边框的宽度
border-top-left-radius: 20px;            // 设置左上角的边框圆角半径
border-top-right-radius: 20px;           // 设置右上角的边框圆角半径
border-bottom-left-radius: 20px;         // 设置左下角的边框圆角半径
border-bottom-right-radius: 20px;        // 设置右下角的边框圆角半径

位移

transform: translateX(10px);             // 横向位移10像素
transform: translateY(10px);             // 纵向位移10像素

定位

position: relative;                      // 相对定位，元素仍占据原始位置
top: 10px;                               // 相对定位垂直方向偏移量
left: 10px;                              // 相对定位水平方向偏移量

position: absolute;                      // 绝对定位，元素不占据任何位置，按父元素设置定位
top: 10px;                               // 绝对定位垂直方向偏移量
left: 10px;                              // 绝对定位水平方向偏移量

层级

z-index: 99;                            // 设置元素的堆叠顺序

!important

width: 10px !important;                 // 优先级最高的宽度设定