Web—05-常用css列表

<pre data-source-line="2"><code class="hljs"><br class="Apple-interchange-newline"><span class="maxima"> <span class="hljs-built_in">color <span class="zh-hans">设置文字的颜色，如： <span class="hljs-built_in">color:red;

<span class="hljs-built_in"&gt;font-size <span class="zh-hans"&gt;设置文字的大小，如：<span class="hljs-built_in"&gt;font-size:12px;

<span class="hljs-built_in"&gt;font-family <span class="zh-hans"&gt;设置文字的字体，如：<span class="hljs-built_in"&gt;font-family:'<span class="zh-hans"&gt;微软雅黑';

<span class="hljs-built_in"&gt;font-<span class="hljs-built_in"&gt;style <span class="zh-hans"&gt;设置字体是否倾斜，如：<span class="hljs-built_in"&gt;font-<span class="hljs-built_in"&gt;style:'normal'; <span class="zh-hans"&gt;设置不倾斜，<span class="hljs-built_in"&gt;font-<span class="hljs-built_in"&gt;style:'italic';<span class="zh-hans"&gt;设置文字倾斜

<span class="hljs-built_in"&gt;font-weight <span class="zh-hans"&gt;设置文字是否加粗，如：<span class="hljs-built_in"&gt;font-weight:bold; <span class="zh-hans"&gt;设置加粗 <span class="hljs-built_in"&gt;font-weight:normal <span class="zh-hans"&gt;设置不加粗

line-<span class="hljs-built_in"&gt;height <span class="zh-hans"&gt;设置文字的行高，设置行高相当于在每行文字的上下同时加间距， <span class="zh-hans"&gt;如：line-<span class="hljs-built_in"&gt;height:24px;

<span class="hljs-built_in"&gt;font <span class="zh-hans"&gt;同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： <span class="hljs-built_in"&gt;font<span class="zh-hans"&gt;：是否加粗 <span class="zh-hans"&gt;字号/<span class="zh-hans"&gt;行高 <span class="zh-hans"&gt;字体；如： <span class="hljs-built_in"&gt;font:normal 12px/36px '<span class="zh-hans"&gt;微软雅黑';

text-decoration <span class="zh-hans"&gt;设置文字的下划线，如：text-decoration:none; <span class="zh-hans"&gt;将文字下划线去掉

text-indent <span class="zh-hans"&gt;设置文字首行缩进，如：text-indent:24px; <span class="zh-hans"&gt;设置文字首行缩进24px

text-align <span class="zh-hans"&gt;设置文字水平对齐方式，如text-align:<span class="hljs-built_in"&gt;center <span class="zh-hans"&gt;设置文字水平居中

text-overflow <span class="zh-hans"&gt;设置一行文字宽度超过容器宽度时的显示方式，如：text-overflow:clip <span class="zh-hans"&gt;将多出的文字裁剪掉 text-overflow:ellipsis <span class="zh-hans"&gt;将多出的文字显示成省略号

white-<span class="hljs-built_in"&gt;space <span class="zh-hans"&gt;一般用来设置文本不换行，如：white-<span class="hljs-built_in"&gt;space:nowrap <span class="zh-hans"&gt;设置文本不换行 <span class="zh-hans"&gt;一般与text-overflow<span class="zh-hans"&gt;和overflow<span class="zh-hans"&gt;属性配合使用来让一行文字超出宽度时显示省略号

list-<span class="hljs-built_in"&gt;style <span class="zh-hans"&gt;一般用来设置去掉ul<span class="zh-hans"&gt;或者ol<span class="zh-hans"&gt;列表中的小圆点或数字 <span class="zh-hans"&gt;如：list-<span class="hljs-built_in"&gt;style:none

<span class="hljs-built_in"&gt;width <span class="zh-hans"&gt;设置盒子内容的宽度，如： <span class="hljs-built_in"&gt;width<span class="zh-hans"&gt;：100px;

<span class="hljs-built_in"&gt;height <span class="zh-hans"&gt;设置盒子内容的高度，如： <span class="hljs-built_in"&gt;height<span class="zh-hans"&gt;：100px;

<span class="hljs-built_in"&gt;border-top <span class="zh-hans"&gt;设置盒子顶部边框的三个属性 <span class="zh-hans"&gt;如：<span class="hljs-built_in"&gt;border-top:5px solid red;<span class="zh-hans"&gt;设置盒子顶部边框为<span class="hljs-number"&gt;3<span class="zh-hans"&gt;像素宽的红色的实线，详细设置说明：盒子模型

<span class="hljs-built_in"&gt;border-left <span class="zh-hans"&gt;设置盒子左边边框的三个属性 <span class="zh-hans"&gt;如：<span class="hljs-built_in"&gt;border-left:3px dotted red;<span class="zh-hans"&gt;设置盒子左边边框为<span class="hljs-number"&gt;3<span class="zh-hans"&gt;像素宽的红色的点线，详细设置说明：盒子模型

<span class="hljs-built_in"&gt;border-right <span class="zh-hans"&gt;设置盒子右边边框的三个属性 <span class="zh-hans"&gt;如：<span class="hljs-built_in"&gt;border-right:2px dashed red;<span class="zh-hans"&gt;设置盒子右边框为<span class="hljs-number"&gt;2<span class="zh-hans"&gt;像素宽的红色的虚线，详细设置说明：盒子模型

<span class="hljs-built_in"&gt;border-bottom <span class="zh-hans"&gt;设置盒子底部边框的三个属性 <span class="zh-hans"&gt;如：<span class="hljs-built_in"&gt;border-bottom:1px solid red;<span class="zh-hans"&gt;设置盒子底部边框为<span class="hljs-number"&gt;1<span class="zh-hans"&gt;像素宽的红色的实线，详细设置说明：盒子模型

<span class="hljs-built_in"&gt;border <span class="zh-hans"&gt;同时设置盒子的四个边框，如果四个边的样式统一就使用它 <span class="zh-hans"&gt;如：<span class="hljs-built_in"&gt;border:1px solid #<span class="hljs-number"&gt;000 <span class="zh-hans"&gt;设置盒子四个边都是<span class="hljs-number"&gt;1<span class="zh-hans"&gt;像素宽的黑色实线，详细设置说明：盒子模型

padding <span class="zh-hans"&gt;设置盒子四个边的内边距 <span class="zh-hans"&gt;如：padding:10px 20px 30px 40px <span class="zh-hans"&gt;分别设置盒子上边(10px)<span class="zh-hans"&gt;、右边(20px)<span class="zh-hans"&gt;、下边(30px)<span class="zh-hans"&gt;、左边(40px)<span class="zh-hans"&gt;的内边距(<span class="zh-hans"&gt;顺时针)<span class="zh-hans"&gt;，详细设置说明：盒子模型

margin <span class="zh-hans"&gt;设置盒子四个边的外边距 <span class="zh-hans"&gt;如：margin:10px 20px 30px 40px <span class="zh-hans"&gt;分别设置盒子上边(10px)<span class="zh-hans"&gt;、右边(20px)<span class="zh-hans"&gt;、下边(30px)<span class="zh-hans"&gt;、左边(40px)<span class="zh-hans"&gt;的外边距(<span class="zh-hans"&gt;顺时针)<span class="zh-hans"&gt;，详细设置说明：盒子模型

overflow <span class="zh-hans"&gt;设置当子元素的尺寸超过父元素的尺寸时，盒子及子元素的显示方式 <span class="zh-hans"&gt;如：overflow:hidden <span class="zh-hans"&gt;超出的子元素被裁切，详细设置说明：元素溢出

<span class="hljs-built_in"&gt;display <span class="zh-hans"&gt;设置盒子的显示类型及隐藏，如：<span class="hljs-built_in"&gt;display:<span class="hljs-built_in"&gt;block <span class="zh-hans"&gt;将盒子设置为以块元素显示 <span class="hljs-built_in"&gt;display:none <span class="zh-hans"&gt;将元素隐藏，详细设置说明：元素类型

<span class="hljs-built_in"&gt;float <span class="zh-hans"&gt;设置元浮动 <span class="zh-hans"&gt;如：<span class="hljs-built_in"&gt;float:left <span class="zh-hans"&gt;设置左浮动 <span class="hljs-built_in"&gt;float:right <span class="zh-hans"&gt;设置右浮动，详细设置说明：元素浮动

clear <span class="zh-hans"&gt;在盒子两侧清除浮动 <span class="zh-hans"&gt;如：clear:both <span class="zh-hans"&gt;在盒子两侧都不允许浮动，详细设置说明：元素浮动

<span class="hljs-built_in"&gt;position <span class="zh-hans"&gt;设置元素定位 <span class="zh-hans"&gt;如：<span class="hljs-built_in"&gt;position:relative <span class="zh-hans"&gt;设置元素相对定位，详细设置说明：元素定位

<span class="hljs-built_in"&gt;background <span class="zh-hans"&gt;设置元素的背景色和背景图片，如：<span class="hljs-built_in"&gt;background:url(bg.jpg) cyan;<span class="zh-hans"&gt;设置盒子的背景图片为bg.jpg<span class="zh-hans"&gt;，背景色为cyan<span class="zh-hans"&gt;，详细设置说明：元素背景

<span class="hljs-built_in"&gt;background-size <span class="zh-hans"&gt;设置盒子背景图的尺寸，如：<span class="hljs-built_in"&gt;background-size:30px 40px;<span class="zh-hans"&gt;设置背景图的尺寸宽为30px<span class="zh-hans"&gt;，高为40px<span class="zh-hans"&gt;，这个属性不能合到<span class="hljs-built_in"&gt;background<span class="zh-hans"&gt;属性中，详细设置说明：retina<span class="zh-hans"&gt;屏适配

<span class="hljs-built_in"&gt;opacity <span class="zh-hans"&gt;设置元素整体透明度，一般为了兼容需要加上filter<span class="zh-hans"&gt;属性设置 <span class="zh-hans"&gt;如：<span class="hljs-built_in"&gt;opacity:<span class="hljs-number"&gt;0.1;filter:alpha(<span class="hljs-built_in"&gt;opacity=<span class="hljs-number"&gt;10)

cursor <span class="zh-hans"&gt;设置鼠标悬停在元素上时指针的形状 <span class="zh-hans"&gt;如：cursor:pointer <span class="zh-hans"&gt;设置为手型

outline <span class="zh-hans"&gt;设置文本输入框周围凸显的蓝色的线，一般是设为没有 <span class="zh-hans"&gt;如：outline:none

<span class="hljs-built_in"&gt;border-<span class="hljs-built_in"&gt;radius <span class="zh-hans"&gt;设置盒子的圆角 <span class="zh-hans"&gt;如：<span class="hljs-built_in"&gt;border-<span class="hljs-built_in"&gt;radius:10px <span class="zh-hans"&gt;设置盒子的四个角为10px<span class="zh-hans"&gt;半径的圆角，详细设置说明：css<span class="zh-hans"&gt;圆角

<span class="hljs-built_in"&gt;box-shadow <span class="zh-hans"&gt;设置盒子的阴影，如：<span class="hljs-built_in"&gt;box-shadow:10px 10px 5px 2px pink;<span class="zh-hans"&gt;设置盒子有粉色的阴影，详细设置说明：css<span class="zh-hans"&gt;阴影

transition <span class="zh-hans"&gt;设置盒子的过渡动画，如：transition:all 1s ease;<span class="zh-hans"&gt;设置元素过渡动画为<span class="hljs-number"&gt;1<span class="zh-hans"&gt;秒完成，所有变动的属性都做动画，详细设置说明：过渡动画

<span class="hljs-built_in"&gt;animation <span class="zh-hans"&gt;设置盒子的关键帧动画，详细设置说明：关键帧动画

<span class="hljs-built_in"&gt;transform 设置盒子的位移、旋转、缩放、斜切等变形，如：transform:rotate(45deg);设置盒子旋转45度，详细设置说明：元素变形

box-sizing 设置盒子的尺寸计算方式，如：box-sizing:border-box 将盒子的尺寸计算方法设置为按边框计算，此时width和height的值就是盒子的实际尺寸

border-collapse 设置表格边框是否合并，如：border-collapse:collapse，将表格边框合并，这样就可以制作1px边框的表格。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!