CSS样式表翻译
类型(Type)面板主要是对文字的字体,大小,颜色,效果等基本样式进行设置。设置时,我们只对要改变的属性进行设置,没有必要改变的属性就空着。
注意:属性名带*号的是指样式效果不能在编辑文档时显示,要用浏览器打开才能看到效果。
类型
·font-family:规定元素的字体系列
family-name:用于某个元素的字体族名称或/及类族名称的一个优先表
generic-family:默认值:取决于浏览器
inherit:规定应该从父元素继承字体系列
·font-size:属性可设置字体的尺寸
xx-small、x-small、small、medium、large、x-large、xx-large:把字体的尺寸设置为不同的尺寸,从xx-small 到xx-large。默认值:medium
Smaller:把font-size 设置为比父元素更小的尺寸
Larger:把font-size 设置为比父元素更大的尺寸
Length:把font-size 设置为一个固定的值
%:把font-size 设置为基于父元素的一个百分比值
Inherit:规定应该从父元素继承字体尺寸
·font-weight:属性设置文本的粗细
normal:默认值。定义标准的字符
bold:定义粗体字符
bolder:定义更粗的字符
lighter:定义更细的字符
100、200、300、400、500、600、700、800、900:定义由粗到细的字符。400 等同于normal,而700 等同于bold
inherit:规定应该从父元素继承字体的粗细
·font-style:属性定义字体的风格
normal :默认值。浏览器显示一个标准的字体样式
italic:浏览器会显示一个斜体的字体样式
oblique:浏览器会显示一个倾斜的字体样式
inherit:规定应该从父元素继承字体样式
·font-variant:属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小
normal :默认值。浏览器会显示一个标准的字体
small-caps:浏览器会显示小型大写字母的字体
inherit:规定应该从父元素继承font-variant 属性的值
·line-height:属性设置行间的距离(行高)normal :默认。设置合理的行间距
number :设置数字,此数字会与当前的字体尺寸相乘来设置行间距length :设置固定的行间距
% :基于当前字体尺寸的百分比行间距
inherit :规定应该从父元素继承line-height 属性的值
·text-transform:属性控制文本的大小写none:默认。定义带有小写字母和大写字母的标准的文本
capitalize:文本中的每个单词以大写字母开头
uppercase:定义仅有大写字母
lowercase:定义无大写字母,仅有小写字母
inherit:规定应该从父元素继承text-transform 属性的值·text-decoration属性规定添加到文本的修饰none:默认。定义标准的文本
underline :定义文本下的一条线
overline:定义文本上的一条线
line-through:定义穿过文本下的一条线
blink:定义闪烁的文本
inherit :规定应该从父元素继承text-decoration 属性的值·color :属性规定文本的颜色
color_name:规定颜色值为颜色名称的颜色(比如red)
hex_number :规定颜色值为十六进制值的颜色(比如#ff0000)rgb_number:规定颜色值为rgb 代码的颜色(比如rgb(255,0,0) inherit:规定应该从父元素继承颜色
Background面板主要是对元素的背景进行设置,包括背景颜色、背景图象、背景图象的控制。一般是对BODY(页面)、TABLE(表格)、DIV(区域)的设置。
背景
·background-color:属性设置元素的背景颜色
color_name:规定颜色值为颜色名称的背景颜色(比如red)
hex_number:规定颜色值为十六进制值的背景颜色(比如#ff0000)
rgb_number:规定颜色值为rgb 代码的背景颜色(比如rgb(255,0,0)
transparent:默认。背景颜色为透明
inherit :规定应该从父元素继承background-color 属性的设置
·background-image:属性为元素设置背景图像
url('URL') :指向图像的路径
·background-repeat:属性设置是否及如何重复背景图像repeat:默认。背景图像将在垂直方向和水平方向重复
repeat-x :背景图像将在水平方向重复
repeat-y :背景图像将在垂直方向重复
no-repeat :背景图像将仅显示一次
inherit :规定应该从父元素继承background-repeat 属性的设置
·background-attachment:属性设置背景图像是否固定或者随着页面的其余部分滚动
scroll:默认值。背景图像会随着页面其余部分的滚动而移动
fixed :当页面的其余部分滚动时,背景图像不会移动
inherit:规定应该从父元素继承background-attachment 属性的设置·background-position:属性设置背景图像的起始位置
top left、top center、top right、center left、center center、center right、bottom left、bottom center、bottom right:如果您仅规定了一个关键词,那么第二个值将是"center"。默认值:0% 0%。x% y% :第一个值是水平位置,第二个值是垂直位置。左上角是0% 0%。右下角是100% 100%。如果您仅规定了一个值,另一个值将是50%。
xpos ypos :第一个值是水平位置,第二个值是垂直位置。左上角是0 0。单位是像素(0px 0px) 或任何其他的CSS 单位。如果您仅规定了一个值,另一个值将是50%。可以混合使用% 和position 值。
Block面板主要是设置对象文本的文字间距、对齐方式、上标、下标、排列方式、首行缩进等。
区块
·word-spacing属性增加或减少单词间的空白(即字间隔)
normal :默认。定义单词间的标准空间
length :定义单词间的固定空间
inherit :规定应该从父元素继承word-spacing 属性的值
·letter-spacing属性增加或减少字符间的空白(字符间距)
normal :默认。规定字符间没有额外的空间
length :定义字符间的固定空间(允许使用负值)
inherit:规定应该从父元素继承letter-spacing 属性的值
·vertical-align:属性设置元素的垂直对齐方式
baseline :默认。元素放置在父元素的基线上
sub :垂直对齐文本的下标
super :垂直对齐文本的上标
top :把元素的顶端与行中最高元素的顶端对齐
text-top :把元素的顶端与父元素字体的顶端对齐
middle :把此元素放置在父元素的中部
bottom :把元素的顶端与行中最低的元素的顶端对齐
text-bottom :把元素的底端与父元素字体的底端对齐
length :
% :使用"line-height" 属性的百分比值来排列此元素。允许使用负值
inherit :规定应该从父元素继承vertical-align 属性的值
·text-align属性规定元素中的文本的水平对齐方式
l eft:把文本排列到左边。默认值:由浏览器决定
right:把文本排列到右边
center:把文本排列到中间
justify :实现两端对齐文本效果
inherit :规定应该从父元素继承text-align 属性的值
·text-indent属性规定文本块中首行文本的缩进
length:定义固定的缩进。默认值:0
%:定义基于父元素宽度的百分比的缩进
inherit :规定应该从父元素继承text-indent 属性的值
·white-space 属性设置如何处理元素内的空白
normal :默认。空白会被浏览器忽略
pre :空白会被浏览器保留。其行为方式类似HTML 中的
标签nowrap:文本不会换行,文本会在在同一行上继续,直到遇到
标签为止pre-wrap:保留空白符序列,但是正常地进行换行
pre-line:合并空白符序列,但是保留换行符
inherit:规定应该从父元素继承white-space 属性的值
·display 属性规定元素应该生成的框的类型
none :此元素不会被显示
block :此元素将显示为块级元素,此元素前后会带有换行符
inline :默认。此元素会被显示为内联元素,元素前后没有换行符
inline-block:行内块元素
list-item :此元素会作为列表显示
run-in:此元素会根据上下文作为块级元素或内联元素显示
compact :CSS 中有值compact,不过由于缺乏广泛支持
marker :CSS 中有值marker,不过由于缺乏广泛支持
table :此元素会作为块级表格来显示(类似
和 | table-caption :此元素会作为一个表格标题显示(类似 inherit :规定应该从父元素继承display 属性的值 Box面板主要设置对象的边界、间距、高度、宽度、和漂浮方式等。 方框 ·width:属性设置元素的宽度 auto:默认值。浏览器可计算出实际的宽度 length :使用px、cm 等单位定义宽度 %:定义基于包含块(父元素)宽度的百分比宽度 inherit :规定应该从父元素继承width 属性的值 ·float:属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素 left:元素向左浮动 right:元素向右浮动 none :默认值。元素不浮动,并会显示在其在文本中出现的位置 inherit:规定应该从父元素继承float 属性的值 ·height:属性设置元素的高度 auto:默认。浏览器会计算出实际的高度 length:使用px、cm 等单位定义宽度 %:基于包含它的块级对象的百分比高度 inherit :规定应该从父元素继承width 属性的值 ·clear :属性规定元素的哪一侧不允许其他浮动元素 left :在左侧不允许浮动元素 right :在右侧不允许浮动元素 both :在左右两侧均不允许浮动元素 none :默认值。允许浮动元素出现在两侧 inherit:规定应该从父元素继承clear 属性的值 ·padding :简写属性在一个声明中设置所有内边距属性 auto:浏览器计算内边距 length :规定以具体单位计的内边距值,比如像素、厘米等。默认值是0px % :规定基于父元素的宽度的百分比的内边距 inherit:规定应该从父元素继承内边距 padding-bottom :设置元素的下内边距 padding-left:设置元素的左内边距 padding-right :设置元素的右内边距 padding-top :设置元素的上内边距 ·margin 简写属性在一个声明中设置所有外边距属性。该属性可以有1 到4 个值 auto :浏览器计算外边距 length:规定以具体单位计的外边距值,比如像素、厘米等。默认值是0px % :规定基于父元素的宽度的百分比的外边距 inherit:规定应该从父元素继承外边距 margin-bottom:设置元素的下外边距 margin-left:设置元素的左外边距 margin-right :设置元素的右外边距 margin-top:设置元素的上外边距 Border面板可以设置对象边框的宽度、颜色及样式。 边框(border) ·style:属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式 Top:设置元素上边框的样式 Right:设置元素右边框的样式 Bottom:设置元素下边框的样式 Left:设置元素左边框的样式 none:定义无边框 hidden :与"none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突dotted :定义点状边框。在大多数浏览器中呈现为实线 dashed:定义虚线。在大多数浏览器中呈现为实线 solid:定义实线 double:定义双线。双线的宽度等于border-width 的值 groove:定义3D 凹槽边框。其效果取决于border-color 的值 ridge :定义3D 垄状边框。其效果取决于border-color 的值 inset :定义3D inset 边框。其效果取决于border-color 的值 outset :定义3D outset 边框。其效果取决于border-color 的值 inherit :规定应该从父元素继承边框样式 ·width:简写属性为元素的所有边框设置宽度,或者单独地为各边边框设置宽度 thin:定义细的边框 medium :默认。定义中等的边框 thick :定义粗的边框 length :允许您自定义边框的宽度 inherit:规定应该从父元素继承边框宽度 ·color:属性设置四条边框的颜色。此属性可设置 1 到4 种颜色 List面板可以设置列表项样式、列表项图片、和位置。 列表 ·style:简写属性在一个声明中设置所有的列表属性·style-type:属性设置列表项标记的类型 none :无标记 disc :默认。标记是实心圆 circle :标记是空心圆 square:标记是实心方块 decimal :标记是数字 lower-roman:小写罗马数字(i, ii, iii, iv, v, 等。) upper-roman:大写罗马数字(I, II, III, IV, V, 等。) lower-alpha :小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) upper-alpha:大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) ·style-image:属性使用图像来替换列表项的标记 URL:图像的路径 none:默认。无图形被显示 inherit :规定应该从父元素继承list-style-image 属性的值 ·style-position:属性设置在何处放置列表项标记 inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐 outside :默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐 inherit:规定应该从父元素继承list-style-position 属性的值 Positioning面板就相当于对象放在一个层里来定位,它相当于HTML的DIV标记。你可以把定义看作为一个CSS定义的层。 定位 ·position :属性规定元素的定位类型 absolute:生成绝对定位的元素,相对于static 定位以外的第一个父元素进行定位。元素的位置通过"left", "top", "right" 以及"bottom" 属性进行规定 fixed :生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过"left", "top", "right" 以及"bottom" 属性进行规定 relative :生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的LEFT 位置添加20 像素 static:默认值。没有定位,元素出现在正常的流中(忽略top, bottom, left, right 或者 z-index 声明) inherit:规定应该从父元素继承position 属性的值 ·visibility:属性规定元素是否可见 visible:默认值。元素是可见的 hidden :元素是不可见的 collapse:当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为"hidden" inherit :规定应该从父元素继承visibility 属性的值 ·z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 auto:默认。堆叠顺序与父元素相等 number:设置元素的堆叠顺序 inherit :规定应该从父元素继承z-index 属性的值 ·overflow:属性规定当内容溢出元素框时发生的事情 visible:默认值。内容不会被修剪,会呈现在元素框之外 hidden:内容会被修剪,并且其余内容是不可见的 scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容 auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容 inherit:规定应该从父元素继承overflow 属性的值 ·Placement:设置对象定位层的位置和大小。可以分别设置left(左边定位)、top(顶部定位)、width(宽)、height(高)相对应的CSS 属性分别是“left; top; width; height” ·Clip:定义定位层的可视区域。区域外的部分为不可视区,为透明的。可以理解为在定位层上放一个矩形遮罩的效果。相对应的CSS 属性是”clip” 知识点:CSS样式表的简单应用知识点:CSS样式表的简单应用 考点说明: CSS样式表是《网络技术应用》第5章第2节中的一个知识点,属于学业水平测试的一个重要考点,也是一个难点。 一、选择题: 1. 下面哪种不是我们常见的CSS样式表。() A. 嵌入式样式表 B.内联样式表 C. 外联式样式表 D. 关联式样式表 2.根据下图判断当前页面使用的CSS加入方式是( ) A. 嵌入式样式表 B. 内联式样式表 C. 外联式样式表 D. 依赖式样式表 3. 在HTML中加入 |
---|