常用CSS样式属性 _生活百科

文章插图
01、常用样式1.1、background背景设置元素背景的样式 background，更好的衬托内容。
属性描述值background背景属性简写。支持多组背景设置，逗号,隔开background:no-repeat url(/png8.png),red;background-color背景颜色，会包含盒子padding的部分background-color: red;background-image背景图片资源地址，还支持渐变色（image数据）background-image: url();background-repeat背景图片重复的排列方式，枚举值 repeat（默认）重复排列；no-repeat：不重复 repeat-x、repeat-y：只水平、垂直重复排列background-size背景图片大小、缩放，支持枚举值和数值，图片会进行缩放。如果用像素/百分比图片可能会被拉伸变形。 cover：等比缩放填满背景区，图片可能显示不全 contain：等比缩放完全显示，背景区可能覆盖不全像素或百分比：图片会变形100px 200px;background-position背景图片的位置坐标（x,y），左上角为坐标系原点（0,0），如设置了repeat则无效方向关键字：left，top，center，right，bottom 尺寸值/百分比：100px 50%background-clip背景图片的裁剪盒子区域border-box、padding-box、content-box、text（仅文本）background-origin背景图片原点的相对盒子位置默认padding-box ， border-box、content-boxbackground-attachment背景图片在窗口滚动时的表现方式默认scroll一起滚动；fixed会固定不变

.dbackg {background: no-repeat url(/res/qq-128.png), red;background-color: rgb(76, 16, 189);background-image: url(../res/bimg.jpg);background-repeat: no-repeat;background-size: 100% 40px;background-size: 100px 200px;background-size: cover;background-position: center top;height: 40px;}

文章插图
1.2、font文字样式针对文字 font 的样式属性，都支持默认继承。
属性描述值color字体颜色color: red;line-height文本行高 / 行盒（line boxes）的最小高度，文本会在行行盒内垂直居中。可设置为无单位数值，1.5=1.5em，建议1.5em便于阅读line-height: 1.5;font字体样式，下面几个字体样式属性的简写?font-family字体类型，可以设置多个（字体栈，font stack），逗号隔开，浏览器依次选择。注意浏览器使用的是本机字体，在线字体参考Web字体避免不同终端字体不匹配，一般都会设置多个，把英文字体放在前面?font-size字体大小， font-size 属性是默认素继承的，根元素<html>默认16px尺寸px、em、rem?font-style字体风格，斜体 italic： /??t?l?k/ 字体本身的斜体 oblique：/??bli?k/ 强制的斜体?font-weight字体粗细，枚举值，默认normal bold：加粗；bolder：更粗；lighter：更细数值100-900：400为normal ， 700bold

.fsum {color: red;color: #ff0000;color: rgb(255, 0, 0);color: rgba(255, 0, 0, 1);font-family: Helvetica, Tahoma, Arial,"Microsoft YaHei","微软雅黑",STXihei,"华文细黑", Heiti, "黑体", SimSun, "宋体", sans-serif;font-size: 20px;font-style: oblique;font-style: italic;font-weight: 600;font-weight: bold;}

用@font-face 加载网络字体。
@font-face {font-family: "myFont";src: url("myFont.ttf");}html {font-family: "myFont", "Bitstream Vera Serif", serif;}1.3、text文本样式针对文本布局、装饰的样式类属性，基本都支持默认继承。
属性描述值/备注text-align文本水平对齐，对所有行内内容有效，不限文本left、center、right、justifytext-indent段落首行缩进尺寸px、em ， text-indent: 2em;text-decoration文本装饰线样式，下面几个属性的简写text-decoration: underline overline blue dashed 1px;?text-decoration-line设置文本的装饰线，如a元素的下划线 underline：下划线；overline：上划线； line-through：中划线 none：无，可用于去掉a标签的默认下划线?text-decoration-style装饰线线的样式波浪线wavy，实线solid，虚线dashed ，双实线double，点线dotted?text-decoration-color装饰线颜色?*-thickness装饰线粗细text-decoration-thickness: 3px;text-shadow文本阴影特效，4个值：水平偏移，垂直偏移，模糊半径，阴影颜色可设置多组值，叠加生效