首页 > 编程语言 > CSS初学者入门教程笔记 > CSS样式属性大全列表

CSS样式属性大全列表

2168

CSS字体属性

字体大小：font-size: px/em/pt;（值使用数值即可）

字体样式：font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)

字体行高：line-height: normal;(正常) 单位：PX、PD、EM

字体粗细：font-weight: bold;(粗体) lighter;(细体) normal;(正常)

字体变体：font-variant: small-caps;(小型大写字母) normal;(正常)

文字间距：letter-spacing: normal; 数值 pt/em/pt

文字对齐：text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)

文字缩进：text-indent: 数值 px;

词间距：word-spacing: normal; 数值 px;

字体大小写：text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

字体修饰：text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

字体：font-family:”Courier New”, Courier, monospace, “Times New Roman”, Times, serif, Arial, Helvetica, sans-serif, Verdana<html>

<head>
<style type="text/css">
.test{font-size:15px}
</style>
</head><body>
<p class="test">测试文字效果</p>
</body></html>

CSS背景属性

背景颜色：background-color: #FFFFFF;

背景图片：background-image: url();

背景图片重复：background-repeat: no-repeat;

背景图片滚动：background-attachment: fixed;(固定) scroll;(滚动)

背景图片位置：background-position: left(水平) top(垂直);

简写方法： background: #000 url(..) repeat fixed left top;<html>

<head>
<style type="text/css">
body{background:#ddd url(http://www.yukx.com/logo.jpg) no-repeat fixed center;height:1000px;}
</style>
</head>
<body>
</body>
</html>

CSS区块属性

垂直对齐：vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;

元素空格：white-space: pre;(保留) nowrap;(不换行)

显示：display: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;(表格标题)

<html>
<head>
<style type="text/css">
p {display: inline}
div {display: none}
</style>
</head><body>
<p>本例中的样式表把段落元素设置为内联元素。</p><p>而 div 元素不会显示出来！</p><div>div 元素的内容不会显示出来！</div>
</body>
</html>

CSS方框属性

宽度：width: 数值 px;

高度：height: 数值 px;

外边距：margin: 1px 1px 1px 1px; 上右下左简写：marign: 1px;

内边距：padding: 1px 1px 1px 1px; 上右下左简写：padding:1px;

清除浮动：clear:left(左侧不运行浮动)/right(右侧不允许浮动)/both(左右不允许浮动)/inherit(继承父元素)

<html>
<head>
<style type="text/css">
p {display: inline}
div {display: none}
</style>
</head><body>
<p>本例中的样式表把段落元素设置为内联元素。</p><p>而 div 元素不会显示出来！</p><div>div 元素的内容不会显示出来！</div>
</body>
</html>

CSS边框属性

边框样式：border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;

边框宽度：border-width: 数值 px;

边框颜色：border-color:#fffff;

简写方法：border：width style color; 正文模板11，可在这输入内容， - 96微信图文排版,微信图文编辑器,微信公众号编辑器，微信编辑首选。

CSS列表属性

列表类型：list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;

列表位置：list-style-position: outside;(外) inside(内);

列表图像：list-style-image: url(..);

<html>
<head>
<style type="text/css">
div{border:1px solid #eee;width:50%;height:50%;}
</style>
</head><body>
<div><p>我是边框内的内容</p></div>
</body></html>

CSS定位属性

定位位置：Position: absolute; relative; static;

元素是否可见：visibility: inherit; visible; hidden;

内容溢出：overflow: visible; hidden; scroll; auto;

裁剪：clip: rect(12px,auto,12px,auto)

<html>
<head>
<style type="text/css">
.absolute{position:absolute;left:100px;top:150px}
</style>
</head><body>
<h2 class="absolute">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body></html>

原文链接: https://www.yukx.com/moran/article/details/1823.html 优科学习网CSS样式属性大全列表

上一篇: CSS下拉菜单制作

下一篇: word-break: break-all 文本自动换行样式