目录

CSS常用样式

  1. 文本样式
  2. 背景样式
  3. 边框样式
  4. 盒子模型
  5. 定位样式
  6. 浮动样式
  7. 布局样式
  8. 动画样式
  9. 其他样式

文本样式

color: #333; /* 文本颜色 */
font-size: 16px; /* 文本大小 */
font-weight: bold; /* 文本粗细 其他值有normal(正常)、bolder(更粗)、lighter(更细) */
font-style: italic; /* 文本样式 其他值有normal(正常)、italic(斜体)、oblique(倾斜) */
text-align: center; /* 文本对齐 其他值有left(左对齐)、right(右对齐)、center(居中对齐)、justify(两端对齐) */
text-decoration: underline; /* 文本装饰 其他值有none(无)、underline(下划线)、overline(上划线)、line-through(删除线) */
text-transform: uppercase; /* 文本转换 其他值有none(无)、uppercase(大写)、lowercase(小写)、capitalize(首字母大写) */
line-height: 1.5; /* 行高 */
letter-spacing: 2px; /* 字间距 */
word-spacing: 2px; /* 词间距 */

背景样式

background-color: #f5f5f5; /* 背景颜色 */
background: linear-gradient(to right, #f00, #00f); /* 背景色线性渐变 */
background: radial-gradient(circle, #f00, #00f); /* 背景色径向渐变 */
background: conic-gradient(from 0deg, #f00, #00f); /* 背景色圆锥渐变 */
background-image: url('bg.jpg'); /* 背景图片 */
background-repeat: no-repeat; /* 背景重复 其他值有repeat(重复)、repeat-x(水平重复)、repeat-y(垂直重复) */   
background-position: center center; /* 背景位置 */
background-size: cover; /* 背景大小 其他值有auto(自动)、cover(覆盖)、contain(包含) */

边框样式

border: 1px solid #333; /* 边框 */
border-radius: 5px; /* 边框圆角 */
border-top: 1px solid #333; /* 上边框 */
border-right: 1px solid #333; /* 右边框 */
border-bottom: 1px solid #333; /* 下边框 */
border-left: 1px solid #333; /* 左边框 */

盒子模型

width: 100px; /* 宽度 */
height: 100px; /* 高度 */
margin: 10px; /* 外边距 */
padding: 10px; /* 内边距 */

定位样式

position: relative; /* 定位方式 其他值有static(静态)、relative(相对)、absolute(绝对)、fixed(固定) */
top: 10px; /* 上边距 */
right: 10px; /* 右边距 */
bottom: 10px; /* 下边距 */
left: 10px; /* 左边距 */
z-index: 1; /* 层级 */

浮动样式

float: left; /* 浮动方式 其他值有left(左浮动)、right(右浮动)、none(不浮动) */
clear: both; /* 清除浮动 其他值有left(清除左浮动)、right(清除右浮动)、both(清除左右浮动) */

布局样式

display: block; /* 显示方式 其他值有block(块级)、inline(行内)、inline-block(行内块级)、none(隐藏) */
visibility: hidden; /* 可见性 其他值有visible(可见)、hidden(隐藏) */
overflow: hidden; /* 溢出处理 其他值有visible(可见)、hidden(隐藏)、scroll(滚动)、auto(自动) */

动画样式

transition: all 0.3s; /* 过渡效果 */
animation: move 1s infinite; /* 动画效果 */
@keyframes move {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

其他样式

cursor: pointer; /* 鼠标样式 */
outline: none; /* 外边框 */
opacity: 0.5; /* 透明度 */
filter: alpha(opacity=50); /* IE透明度 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); /* 文本阴影 */

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至[email protected]

文章标题:CSS常用样式

字数:611

本文作者:LCX

发布时间:2024-08-27, 00:00:01

最后更新:2024-09-24, 08:51:51

原始链接:https://987654321.org/posts/css_common_style/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。