CSS各属性表

本文深入探讨了CSS背景属性、颜色定义、边框属性、文本属性、字体属性、外边距与内边距属性、列表属性、尺寸属性、定位属性、打印属性与表格属性等核心内容,提供详细的操作指南与实例解析。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、CSS 背景属性(Background)

属性描述CSS
background在一个声明中设置所有的背景属性。1
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。1
background-color设置元素的背景颜色。1
background-image设置元素的背景图像。1
background-position设置背景图像的开始位置。1
background-repeat设置是否及如何重复背景图像。1

设定顺序为:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

 

eg:

   background-color: #FFCC66;
   background-image: url("butterfly.gif");
   background-repeat: no-repeat;
   background-attachment: fixed;   //固定在屏幕上,scroll:表示背景图随着页面移动,即固定在页面上。
   background-position: right bottom;


2、颜色的几种定义和输入方式

描述
color_name规定颜色值为颜色名称的背景颜色(比如 red)。
hex_number规定颜色值为十六进制值的背景颜色(比如 #ff0000)。
rgb_number规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。
transparent默认。背景颜色为透明。
inherit规定应该从父元素继承 background-color 属性的设置。

 

 

CSS 边框属性(Border 和 Outline)

属性描述CSS
border在一个声明中设置所有的边框属性。1
border-bottom在一个声明中设置所有的下边框属性。1
border-bottom-color设置下边框的颜色。2
border-bottom-style设置下边框的样式。2
border-bottom-width设置下边框的宽度。1
border-color设置四条边框的颜色。1
border-left在一个声明中设置所有的左边框属性。1
border-left-color设置左边框的颜色。2
border-left-style设置左边框的样式。2
border-left-width设置左边框的宽度。1
border-right在一个声明中设置所有的右边框属性。1
border-right-color设置右边框的颜色。2
border-right-style设置右边框的样式。2
border-right-width设置右边框的宽度。1
border-style设置四条边框的样式。1
border-top在一个声明中设置所有的上边框属性。1
border-top-color设置上边框的颜色。2
border-top-style设置上边框的样式。2
border-top-width设置上边框的宽度。1
border-width设置四条边框的宽度。1
outline在一个声明中设置所有的轮廓属性。2
outline-color设置轮廓的颜色。2
outline-style设置轮廓的样式。2
outline-width设置轮廓的宽度。2
1、图示:

code eg:

body {
      margin-top:100px;
      margin-right:40px;
      margin-bottom:10px;
      margin-left:70px;
}
2、border-style

 

不同样式的边框

 

 

CSS 文本属性(Text)

属性描述CSS
color设置文本的颜色。1
direction规定文本的方向 / 书写方向。2
letter-spacing设置字符间距。1
line-height设置行高。1
text-align规定文本的水平对齐方式。1
text-decoration规定添加到文本的装饰效果。1
text-indent规定文本块首行的缩进。1
text-shadow规定添加到文本的阴影效果。2
text-transform控制文本的大小写。1
unicode-bidi设置文本方向。2
white-space规定如何处理元素中的空白。1
word-spacing设置单词间距。1

CSS 字体属性(Font)

属性描述CSS
font在一个声明中设置所有字体属性。1
font-family规定文本的字体系列。1
font-size规定文本的字体尺寸。1
font-size-adjust为元素规定 aspect 值。2
font-stretch收缩或拉伸当前的字体系列。2
font-style规定文本的字体样式。1
font-variant规定文本的字体样式。1
font-weight规定字体的粗细。1
说明:
1、字体族名称(family-name)
字体族名称(通常所说的“字体”),包括“Arial”、“Times New Roman”、“宋体”、“黑体”等等。
族类(generic family)
一个族类是一组具有统一外观的字体族。sans-serif就是一例,它代表一组没有“脚”的字体。

如:

三个族类及其字体族的例子

2、font-style定义所选字体的显示样式:normal(正常)、italic(斜体)或oblique(倾斜)。

3、font-variant(字体变化)的值可以是:normal(正常)或small-caps(小体大写字母),small-caps字体是一种以小尺寸显示的大写字母来代替小写字母的字体。

4、font-weight指定字体显示的浓淡程度。其值可以是normal(正常)或bold(加粗)。

5、font-size字体大小,后面两种可以随着浏览器改变字体大小。 
   h1 {font-size: 30px;}
  h2 {font-size: 12pt;}
  h3 {font-size: 120%;}
  p {font-size: 1em;}

font属性的值应按以下次序书写:

font-style | font-variant | font-weight | font-size | font-family

 

CSS 外边距属性(Margin)

属性描述CSS
margin在一个声明中设置所有外边距属性。1
margin-bottom设置元素的下外边距。1
margin-left设置元素的左外边距。1
margin-right设置元素的右外边距。1
margin-top设置元素的上外边距。1

CSS 内边距属性(Padding)

属性描述CSS
padding在一个声明中设置所有内边距属性。1
padding-bottom设置元素的下内边距。1
padding-left设置元素的左内边距。1
padding-right设置元素的右内边距。1
padding-top设置元素的上内边距。1

CSS 列表属性(List)

属性描述CSS
list-style在一个声明中设置所有的列表属性。1
list-style-image将图象设置为列表项标记。1
list-style-position设置列表项标记的放置位置。1
list-style-type设置列表项标记的类型。1
marker-offset 2

内容生成(Generated Content)

属性描述CSS
content与 :before 以及 :after 伪元素配合使用,来插入生成内容。2
counter-increment递增或递减一个或多个计数器。2
counter-reset创建或重置一个或多个计数器。2
quotes设置嵌套引用的引号类型。2

CSS 尺寸属性(Dimension)

属性描述CSS
height设置元素高度。1
max-height设置元素的最大高度。2
max-width设置元素的最大宽度。2
min-height设置元素的最小高度。2
min-width设置元素的最小宽度。2
width设置元素的宽度。1

CSS 定位属性(Positioning)

属性描述CSS
bottom设置定位元素下外边距边界与其包含块下边界之间的偏移。2
clear规定元素的哪一侧不允许其他浮动元素。1
clip剪裁绝对定位元素。2
cursor规定要显示的光标的类型(形状)。2
display规定元素应该生成的框的类型。1
float规定框是否应该浮动。1
left设置定位元素左外边距边界与其包含块左边界之间的偏移。2
overflow规定当内容溢出元素框时发生的事情。2
position规定元素的定位类型。2
right设置定位元素右外边距边界与其包含块右边界之间的偏移。2
top设置定位元素的上外边距边界与其包含块上边界之间的偏移。2
vertical-align设置元素的垂直对齐方式。1
visibility规定元素是否可见。2
z-index设置元素的堆叠顺序。2

CSS 打印属性(Print)

属性描述CSS
orphans设置当元素内部发生分页时必须在页面底部保留的最少行数。2
page-break-after设置元素后的分页行为。2
page-break-before设置元素前的分页行为。2
page-break-inside设置元素内部的分页行为。2
widows设置当元素内部发生分页时必须在页面顶部保留的最少行数。2

CSS 表格属性(Table)

属性描述CSS
border-collapse规定是否合并表格边框。2
border-spacing规定相邻单元格边框之间的距离。2
caption-side规定表格标题的位置。2
empty-cells规定是否显示表格中的空单元格上的边框和背景。2
table-layout设置用于表格的布局算法。2

 

 

 

 

 

转载于:https://www.cnblogs.com/lovemo1314/archive/2012/08/03/2622179.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值