CSS

CSS

/* 对齐方式 */
text-align: 对齐方式;
/* 居中 */
text-align: center;
/* 左对齐 */
text-align: left;
/* 右对齐 */
text-align: right;

/* 文本颜色 */
color: 文本颜色;

/* 首行缩进 */
text-indent: 首行缩进;
text-indent: 5px;

/* 文本装饰 */
text-decoration: 文本装饰;
/* 下划线 */
text-decoration: underline;
/* 删除线 */
text-decoration: line-through;
/* 上划线 */
text-decoration: overline;
/* 下划线和删除线 */
text-decoration: underline line-through;
/* 无装饰 */
text-decoration: none;


/* 文本阴影 */
text-shadow: 水平偏移量 垂直偏移量 模糊半径 颜色;


/* 字符间距 */
letter-spacing: 字符间距;
/* normal: 默认的字符间距 */
letter-spacing: normal;
/* length: 指定的字符间距,可以为负值 */
letter-spacing: length;
/* initial: 设置为默认值 */
letter-spacing: initial;
/* inherit: 继承父元素的值 */
letter-spacing: inherit;

/* 单词间距 */
/* normal: 默认的单词间距 */
word-spacing: normal;
/* length: 指定的单词间距,可以为负值 */
word-spacing: length;
/* initial: 设置为默认值 */
word-spacing: initial;
/* inherit: 继承父元素的值 */
word-spacing: inherit;


/* 垂直对齐方式 */
/* baseline: 基线对齐 */
vertical-align: baseline;
/* sub: 下标对齐 */
vertical-align: sub;
/* super: 上标对齐 */
vertical-align: super;
/* top: 顶部对齐 */
vertical-align: top;
/* text-top: 文字顶部对齐 */
vertical-align: text-top;
/* middle: 中部对齐 */
vertical-align: middle;
/* bottom: 底部对齐 */
vertical-align: bottom;
/* text-bottom: 文字底部对齐 */
vertical-align: text-bottom;
/* <percentage>: 使用百分比值对齐 */
vertical-align: <percentage>;
/* <length>: 使用长度值对齐 */
vertical-align: <length>;
/* <length>: 使用长度值对齐 */
vertical-align: <length>;
/* initial: 设置为默认值 */
vertical-align: initial;
/* inherit: 继承父元素的值 */
vertical-align: inherit;


/* 行高 */
/* normal: 默认的行高 */
line-height: normal;
/* <number>: 使用数字值作为行高 */
line-height: <number>;
/* <length>: 使用长度值作为行高 */
line-height: <length>;
/* <percentage>: 使用百分比值作为行高 */
line-height: <percentage>;
/* inherit: 继承父元素的值 */
line-height: inherit;


/* 列表编号和符号 */
/* none: 不显示编号或符号 */
list-style-type: none;
/* disc: 实心圆 */
list-style-type: disc;
/* circle: 空心圆 */
list-style-type: circle;
/* square: 实心方块 */
list-style-type: square;
/* decimal: 十进制数字 (1, 2, 3, ...) */
list-style-type: decimal;
/* decimal-leading-zero: 带前导零的十进制数字 (01, 02, 03, ...) */
list-style-type: decimal-leading-zero;
/* lower-roman: 小写罗马数字 (i, ii, iii, ...) */
list-style-type: lower-roman;
/* upper-roman: 大写罗马数字 (I, II, III, ...) */
list-style-type: upper-roman;
/* lower-alpha: 小写英文字母 (a, b, c, ...) */
list-style-type: lower-alpha;
/* upper-alpha: 大写英文字母 (A, B, C, ...) */
list-style-type: upper-alpha;
/* <string>: 自定义列表符号 */
list-style-type: <string>;

/* 列表编号和符号位置 */
/* inside: 编号或符号在列表项内部 */
list-style-position: inside;
/* outside: 编号或符号在列表项外部 */
list-style-position: outside;

/* 列表符号图片 */
list-style-image: 列表符号图片;

/* 列表属性复合定义 */
list-style: 列表属性复合定义;

/* 字体类型 */
/* normal: 普通字体 */
font-weight: normal;
/* bold: 加粗字体 */
font-weight: bold;
/* bolder: 更加粗的字体 */
font-weight: bolder;
/* lighter: 更加细的字体 */
font-weight: lighter;
/* 100 - 900: 数字表示字体粗细的相对程度 */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
/* inherit: 继承父元素的值 */
font-weight: inherit;


/* 字体大小 */
/* <length>: 使用长度值作为字体大小 */
font-size: <length>;
/* <percentage>: 使用百分比值作为字体大小 */
font-size: <percentage>;
/* <length>: 使用相对长度值作为字体大小 */
font-size: <length>;
/* <percentage>: 使用相对百分比值作为字体大小 */
font-size: <percentage>;
/* xx-small: 非常小 */
font-size: xx-small;
/* x-small: 非常小 */
font-size: x-small;
/* small: 小 */
font-size: small;
/* medium: 中等 */
font-size: medium;
/* large: 大 */
font-size: large;
/* x-large: 非常大 */
font-size: x-large;
/* xx-large: 非常大 */
font-size: xx-large;
/* larger: 更大 */
font-size: larger;
/* smaller: 更小 */
font-size: smaller;
/* inherit: 继承父元素的值 */
font-size: inherit;

/* 字体风格 */
/* normal: 普通风格 */
font-style: normal;
/* italic: 斜体风格 */
font-style: italic;
/* oblique: 倾斜风格 */
font-style: oblique;
/* inherit: 继承父元素的值 */
font-style: inherit;

/* 字体粗细 */
/* normal: 普通粗细 */
font-weight: normal;
/* bold: 加粗粗细 */
font-weight: bold;
/* bolder: 更加粗细 */
font-weight: bolder;
/* lighter: 更加细的粗细 */
font-weight: lighter;
/* 100 - 900: 数字表示字体粗细的相对程度 */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
/* inherit: 继承父元素的值 */
font-weight: inherit;

/* 字体属性复合定义 */
font: 字体属性复合定义;


/* 定义超链接公共样式 */
a:link {
    color: #FF0000;
    /* 链接颜色 */
    text-decoration: none;
    /* 链接无下划线 */
}

/* 链接样式定义 */
a:visited {
    /* 样式定义 */
}

/* 鼠标经过时链接样式定义 */
a:hover {
    /* 样式定义 */
}

/* 鼠标点击时链接样式定义 */
a:active {
    /* 样式定义 */
}

/* 为对象的第一个字母添加样式 */
p:first-letter {
    /* 样式定义 */
}

/* 为对象第一行文本添加样式 */
p:first-line {
    /* 样式定义 */
}

/* 在元素之前添加内容 */
h1:before {
    content: "文字";
    /* 内容 */
    color: orange;
    /* 颜色 */
}

/* 在元素之后添加内容 */
h2:after {
    content: "文字";
    /* 内容 */
    font-size: 24px;
    /* 字体大小 */
}

/* 背景颜色 */
background-color: 背景颜色;

/* 背景图片 */
background-image: 背景图片;

/* 背景图像平铺 */
background-repeat: 背景图像平铺;
/* repeat: 平铺 */
background-repeat: repeat;
/* repeat-x: 横向平铺 */
background-repeat: repeat-x;
/* repeat-y: 纵向平铺 */
background-repeat: repeat-y;
/* no-repeat: 不平铺 */
background-repeat: no-repeat;
/* round: 以整数倍数平铺 */
background-repeat: round;
/* space: 均匀分布平铺 */
background-repeat: space;

/* 背景图像位置 */
background-position: 背景图像位置;

/* 背景图像固定 */
background-attachment: 背景图像固定;
/* scroll: 默认值,背景图像随着元素内容滚动 */
background-attachment: scroll;
/* fixed: 背景图像固定在视口 */
background-attachment: fixed;
/* local: 背景图像随着元素的滚动而滚动 */
background-attachment: local;

/* 背景图像大小 */
background-size: 背景图像大小;
/* auto: 默认值,保持图像的原始尺寸 */
background-size: auto;
/* cover: 调整图像大小以填充整个容器 */
background-size: cover;
/* contain: 调整图像大小以适应容器,保持图像的宽高比 */
background-size: contain;
/* <length>: 使用长度值来设置背景图像的大小 */
background-size: <length>;
/* <percentage>: 使用百分比值来设置背景图像的大小 */
background-size: <percentage>;

/* 背景的显示区域 */
background-clip: 背景的显示区域;
/* border-box: 背景绘制在边框之内 */
background-clip: border-box;
/* padding-box: 背景绘制在内边距之内 */
background-clip: padding-box;
/* content-box: 背景绘制在内容区域之内 */
background-clip: content-box;

/* 背景的裁剪区域 */
background-origin: 背景的裁剪区域;
/* border-box: 背景裁剪从边框开始 */
background-origin: border-box;
/* padding-box: 背景裁剪从内边距开始 */
background-origin: padding-box;
/* content-box: 背景裁剪从内容区域开始 */
background-origin: content-box;

/* 背景 */
background: 背景;
/* 详见单独列出的背景属性 */

/* 背景属性复合定义 */
background: 背景属性复合定义;

/* 上边框 */
border-top: 上边框;

/* 右边框 */
border-right: 右边框;

/* 下边框 */
border-bottom: 下边框;

/* 左边框 */
border-left: 左边框;

/* 边框属性复合定义 */
border: 边框属性复合定义;

/* 圆角边框定义 */
border-radius: 圆角边框定义;

/* 对象阴影 */
box-shadow: 对象阴影;


/* 外边距 */
margin: 外边距;
/* <length>: 使用固定长度值作为外边距 */
margin: <length>;
/* <percentage>: 使用百分比值作为外边距 */
margin: <percentage>;
/* auto: 自动计算外边距 */
margin: auto;
/* initial: 设置为默认值 */
margin: initial;
/* inherit: 继承父元素的值 */
margin: inherit;

/* 内填充 */
padding: 内填充;
/* <length>: 使用固定长度值作为内填充 */
padding: <length>;
/* <percentage>: 使用百分比值作为内填充 */
padding: <percentage>;
/* initial: 设置为默认值 */
padding: initial;
/* inherit: 继承父元素的值 */
padding: inherit;

/* 宽度 */
width: 宽度;
/* auto: 自动计算宽度 */
width: auto;
/* <length>: 使用固定长度值作为宽度 */
width: <length>;
/* <percentage>: 使用百分比值作为宽度 */
width: <percentage>;
/* initial: 设置为默认值 */
width: initial;
/* inherit: 继承父元素的值 */
width: inherit;

/* 高度 */
height: 高度;
/* auto: 自动计算高度 */
height: auto;
/* <length>: 使用固定长度值作为高度 */
height: <length>;
/* <percentage>: 使用百分比值作为高度 */
height: <percentage>;
/* initial: 设置为默认值 */
height: initial;
/* inherit: 继承父元素的值 */
height: inherit;

/* 浮动属性 */
float: 浮动属性;
/* left: 左浮动 */
float: left;
/* right: 右浮动 */
float: right;
/* none: 不浮动(默认值) */
float: none;
/* initial: 设置为默认值 */
float: initial;
/* inherit: 继承父元素的值 */
float: inherit;

/* 清除左右两边的浮动 */
clear: both;
/* left: 清除左侧浮动 */
clear: left;
/* right: 清除右侧浮动 */
clear: right;
/* both: 清除左右两侧浮动 */
clear: both;
/* none: 不清除浮动 */
clear: none;
/* initial: 设置为默认值 */
clear: initial;
/* inherit: 继承父元素的值 */
clear: inherit;

/* 溢出隐藏 */
overflow: hidden;
/* visible: 内容不会被修剪,会呈现在元素框之外 */
overflow: visible;
/* hidden: 内容会被修剪,并且不会可见 */
overflow: hidden;
/* scroll: 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容 */
overflow: scroll;
/* auto: 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容 */
overflow: auto;
/* initial: 设置为默认值 */
overflow: initial;
/* inherit: 继承父元素的值 */
overflow: inherit;

/* 元素类型转换 */
display: 元素类型转换;
/* block: 将元素呈现为块级元素 */
display: block;
/* inline: 将元素呈现为行内元素 */
display: inline;
/* inline-block: 将元素呈现为行内块元素 */
display: inline-block;
/* none: 元素不会被显示(隐藏) */
display: none;
/* initial: 设置为默认值 */
display: initial;
/* inherit: 继承父元素的值 */
display: inherit;
/* 将当前元素转换成块级元素 */
display: block;
/* 将当前元素转换成行内元素 */
display: inline;
/* 将当前元素转换成行内块元素 */
display: inline-block;
/* 将当前元素隐藏 */
display: none;

/* 定位属性 */
position: 定位属性;
/* absolute: 绝对定位 */
position: absolute;
/* relative: 相对定位 */
position: relative;
/* fixed: 不动 */
position: fixed;

/* 透明度 */
opacity: 透明度;

/* 左侧定位 */
left: 左侧定位;

/* 右侧定位 */
right: 右侧定位;

/* 上方定位 */
top: 上方定位;

/* 下方定位 */
bottom: 下方定位;


/* 层叠顺序 */
z-index: 层叠顺序;

/* 选取第一个子元素 */
E:first-child {
    /* 样式定义 */
}

/* 选取倒数第一个子元素 */
E:last-child {
    /* 样式定义 */
}

/* 选取第三个子元素 */
E:nth-child(3) {
    /* 样式定义 */
}

/* 选取奇数子元素 */
E:nth-child(2n+1) {
    /* 样式定义 */
}

/* 选取偶数子元素 */
E:nth-child(even) {
    /* 样式定义 */
}

/* 选取前三个子元素 */
E:nth-child(3n+3) {
    /* 样式定义 */
}

/* 选取倒数三个子元素 */
E:nth-last-child(-n+3) {
    /* 样式定义 */
}

/* 选取E元素的第一级F子元素 */
E>F {
    /* 样式定义 */
}

/* 选取E元素后面的第一个兄弟元素F */
E+F {
    /* 样式定义 */
}

/* 选取E元素后面的所有兄弟元素F */
E~F {
    /* 样式定义 */
}
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容