一、常用css属性
(1) *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) *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;
裁切 clip: rect(12px,auto,12px,auto)
(3) float（漂浮）
漂浮 float: left | right | none; 在页面布局的时候用的最多
常见用法
<div style=‘float:left;width: 50%;‘ >div1</div><div style=‘float:right;width: 50%;‘ >div2</div>一个问题
子标签使用了float时候，父标签的样式失效
<div style=‘background-color:red;‘> ???<div style="float: left">div1</div> ???<div style="float: left">div2</div></div>解决方案一：clear: both
<div style=‘background-color:red;‘> ???<div style="float: left">div1</div> ???<div style="float: left">div2</div> ???<div style="clear: both;"></div> <!--加上clear：both之后就正常了--></div>解决方案二：clearfix
<div style=‘‘ class="clearfix"> ???<div style="float: left">div1</div> ???<div style="float: left">div2</div></div>.clearfix:after{ ???content: "."; ???display: block; ???height: 0; ???clear: both; ???visibility: hidden;}(4) position（定位）
fixed
一般用来写网页顶端的固定导航条，或者两侧的菜单。
<!--对于块级标签来说加上position:fixed之后，该div就不会占一整行，一般需要手动定义宽度，如width:100%--> <div style="position:fixed;height:10%;color:white;width:100%;top:0px;">我是导航</div><div style=""> ???<div style="position:fixed;bottom: 0px;top:10%;float: left;width: 20%;我是菜单</div> ???<div style="float: right;width:80%;"><p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???????<p>我是内容</p> ???</div></div>absolute与relative
这两者一般配合使用，用于调整div之间的相对位置
<div style="position:relative;width: 300px;height: 150px;"> ???<div style="position:absolute;float: left;width: 20%;bottom: 0px;right: 0px;">我是菜单</div></div>(5) 透明度
.image{ ???opacity: 0.5}<img src="http://www.jotlab.com/wp-content/uploads/2008/08/python.jpg" style="opacity: 0.5; width:50%; height:50%; ">(6) 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;(正常)
(4) background（背景）
背景 background: transparent; /透视背景*/
颜色
图片 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:背景颜色 | 背景图象 | 背景重复 | 背景附件 | 背景位置 ;
(7) 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:数值;
(8) 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}(9) 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;
(10) margin（边界）
margin-top:10px; (上边界)
margin-right:10px; (右边界)
margin-bottom:10px; (下边界值)
margin-left:10px; (左边界值)
margin-inside:;
margin-outside:;
(11) padding（填充）
padding-top:10px; /*上边框留空白*/padding-right:10px; /*右边框留空白*/padding-bottom:10px; /*下边框留空白*/padding-left:10px; /*左边框留空白(12) vertical（垂直）
vertical-align:sub; /*下标字*/vertical-align:super; /*上标字*/vertical-align:top; /*垂直向上对齐*/vertical-align:bottom; /*垂直向下对齐*/vertical-align:middle; /*垂直居中对齐*/vertical-align:text-top; /*文字垂直向上对齐*/vertical-align:text-bottom; /*文字垂直向下对齐*/(13) a（链接）
a /*所有超链接*/a:link /*超链接文字格式*/a:visited /*浏览过的链接文字格式*/a:active /*按下链接的格式*/a:hover /*鼠标转到链接*/(14) cursor（光标）
光标形状 cursor:hand | crosshair | text | wait | move | help | e-resize | nw-resize | w-resize | s-resize | se-resize | sw-resize;
/*也可以自定义*/cursor: hand; /*链接手指*/cursor: crosshair /*十字体 */cursor: s-resize /*箭头朝下 */cursor: move /*十字箭头, 朝右*/cursor: help /*加一问号 */cursor: w-resize /*箭头朝左 */cursor: n-resize /*箭头朝上 */cursor: ne-resize /*箭头朝右上 */cursor: nw-resize /*箭头朝左上 */cursor: text /*文字型*/cursor: se-resize /*箭头斜右下 */cursor: sw-resize /*箭头斜左下*/cursor: wait /*漏斗*/二、css实践
(1) css的三种写法
行内样式：写在对应标签的style属性里面
<html> ???<head> ?????????<title>Test</title> ???</head> ???<body> ???????<div style=‘123</div> ???</body></html>内页样式：写在HTML页面里面的style标签里面
<html> ???<head> ???????<title>Test</title> ???????<style> ???????????.logo{ ???????????????background-color:red; ???????????} ???????</style> ???</head> ???<body> ???????<div class=‘logo‘>123</div> ???</body></html>外部样式：通过link标签引入CSS样式
<html> ???<head> ???????<title>Test</title> ???????<link rel=‘stylesheet‘ href=‘common1.css‘/> ???</head> ???<body> ???????<div class="logo">123</div> ???</body></html>.logo { ???background-color: red; ???color: white;}(2) 常规用例
p {font-family: "sans serif";} ?/*值为若干单词，则要给值加引号*/.logo {background-color: red;}.logo a,.logo p {background-color: red;}#morra {background-color: green;}a, div { color: red;} ??/*a或div都使用这个css*/a div { color: red;} ???/*只有a下面的div使用该css*/注：css 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
三、Demo
<!DOCTYPE html><html><head> ???<title>This is a demo</title> ???<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> ???<style type="text/css"> ???????body { ???????????background-color: #e1ddd9; ???????????font-size: 12px; ???????????font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif; ???????????color: #564b47; ???????????padding: 0px; ???????????margin: 0px; ???????} ???????#inhalt { ???????????position: absolute; ???????????height: 200px; ???????????width: 400px; ???????????margin: -100px 0px 0px -200px; ???????????top: 50%; ???????????left: 50%; ???????????text-align: center; ???????????padding: 0px; ???????????background-color: #f5f5f5; ???????????border: 1px dotted #000000; ???????????overflow: auto; ???????} ???????p, h1 { ???????????margin: 0px; ???????????padding: 10px; ???????} ???????h1 { ???????????font-size: 11px; ???????????text-transform: uppercase; ???????????text-align: center; ???????????color: #564b47; ???????????background-color: #90897a; ???????} ???????a { ???????????color: #ff66cc; ???????????font-size: 11px; ???????????background-color: transparent; ???????????text-decoration: none; ???????} ???</style></head><body><div id="inhalt"> ???<p> ???<h1>Morra‘s Demo</h1><br/><br/> ???This area should be horizontally and vertically centered.<br/> ???This text stays left aligned<br/> ???<a href="http://www.cnblogs.com/whatisfantasy/">what is fantasy?</a> ???</p> ???<p></div></body></html>常用css属性
原文地址：https://www.cnblogs.com/lovelygang/p/9091072.html