css样式的属性包括,css属性有哪些？css常⽤属性的总结（实
例）
css属性有哪些？css 属性有很多，今天在这⾥，我给⼤家总结⼀下我们经常⽤的⼀些css属性，包括css⽂本属性，css边框属性，css定位属性，列表样式等等，除此之外，还给⼤家介绍了⼀下css的写法样式。
常⽤的css属性
1. css区块属性(*block)
⾏⾼ line-height：数值 | inherit | normal;
字间距 letter-spacing: 数值 | inherit | normal;
词间距 word-spacing: 数值 | inherit | normal;
空格 white-space: pre(保留) | nowrap(不换⾏) | normal;/*表格宽度⾃适应*/
th {
white-space: nowrap;
}
显⽰ display:
none; /*不显⽰，使⽤的场景⾮常多*/
block; /*把内联标签变成块级标签*/
inline; /*把块级标签变成内联标签*/
list-item; /*列表项*/
run-in; /*追加部分*/
compact; /*紧凑*/
marker; /*标记*/
table;
inline-table;
table-raw-group;
table-header-group;
table-footer-group;
table-raw;
table-column-group;
table-column;
table-cell;
table-caption; /*表格标题*/
2.css盒⼦属性(*box)
宽度 width: 长度 | 百分⽐ | auto;
⾼度 height: 长度 | 百分⽐ | auto;
清除 clear: none | left | right | both;
边界 margin: 上 右 下 左 ;
填充 padding: 上 右 下 左 ;
定位 position: absolute | relative | static;
透明度 visibility: inherit | visible | hidden;
溢出 overflow: visible | hidden | scroll auto;
3.css漂浮属性(float)
漂浮 float: left | right | none; 在页⾯布局的时候⽤的最多常见⽤法：
p1
p2
⼀个问题：
⼦标签使⽤了float时候，⽗标签的样式失效
p1
p2
解决⽅案⼀：clear: both
p1
p2
解决⽅案⼆：clearfix
p1
p2
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
4.css定位属性(position)
fixed
⼀般⽤来写⽹页顶端的固定导航条，或者两侧的菜单。
菜单
php中⽂⽹
php中⽂⽹
php中⽂⽹
php中⽂⽹
php中⽂⽹
php中⽂⽹
php中⽂⽹
php中⽂⽹
php中⽂⽹
php中⽂⽹
php中⽂⽹
php中⽂⽹
php中⽂⽹
php中⽂⽹
运⾏效果截图：
absolute与relative
这两者⼀般配合使⽤，⽤于调整div之间的相对位置
这是⼀个菜单
运⾏效果截图如下:
5.css 透明度.image{
opacity: 0.5
}
6.css字体属性(font)
颜⾊ color: 数值;
⼤⼩ font-size: 数值;
字体 font-family: "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)
变体 font-variant: small-caps;(⼩型⼤写字母) normal;(正常)
7.css背景属性(background)
背景 background: transparent; /透视背景*/
颜⾊ background-color: 数值;
图⽚ background-image: url() | none;
重复 background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;background-repeat : repeat; /*重复排列-⽹页默认*/ background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/
滚动 background-attachment: fixed | scroll;
位置 background-position：数值 | top | bottom | left | right | center;background-position : 90% 90%; /*背景图⽚x与y轴的位置*/ background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/
简写 background：背景颜⾊ | 背景图象 | 背景重复 | 背景附件 | 背景位置 ;
8.css⽂本属性(text)
⼤⼩写 text-transform: capitalize | uppercase | lowercase | none;
修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
排列 text-align: justify | left | right | center;
缩进 text-indent: 数值 | inherit;
阴影 text-shadow：数值;
9.css边框属性(border)
边框样式 border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
边框宽度 border-width: ;
边框颜⾊ border-color: top值 right值 bottom值 left值;
简写 border: width style color；边  框 {border:border-width border-style color}
上 边 框 {border-top:border-top-width border-style color}
右 边 框 {border-right:border-right-width border-style color}
下 边 框 {border-bottom:border-bottom-width border-style color}
左 边 框 {border-left:border-left-width border-style color}
css表格样式10.css列表样式(list-style)
类型 list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none;list-style-type:none; /*不编号*/
list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*⼩写罗马数字*/
list-style-type:upper-roman; /*⼤写罗马数字*/
list-style-type:lower-alpha; /*⼩写英⽂字母*/
list-style-type:upper-alpha; /*⼤写英⽂字母*/
list-style-type:disc; /*实⼼圆形符号*/
list-style-type:circle; /*空⼼圆形符号*/
list-style-type:square; /*实⼼⽅形符号*/
位置 list-style-position: outside | inside;
图像 list-style-image: URL;
简写 list-style:⽬录样式类型 | ⽬录样式位置 | url;
11.css边界属性(margin)
margin-top:10px; (上边界)
margin-right:10px; (右边界)
margin-bottom:10px; (下边界值)
margin-left:10px; (左边界值)
margin-inside:;
margin-outside:;
12.css填充属性(padding)padding-top:10px; /*上边框留空⽩*/
padding-right:10px; /*右边框留空⽩*/
padding-bottom:10px; /*下边框留空⽩*/
padding-left:10px; /*左边框留空⽩
13.css垂直属性(vertical)vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*⽂字垂直向上对齐*/
vertical-align:text-bottom; /*⽂字垂直向下对齐*/
14.链接 (a)a /*所有超链接*/
a:link /*超链接⽂字格式*/
a:visited /*浏览过的链接⽂字格式*/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。