admin 管理员组

文章数量: 887021


2024年2月23日发(作者:excel产生随机数后怎么固定)

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 :此元素会作为块级表格来显示(类似

),表格前后带有换行符

inline-table :此元素会作为内联表格来显示(类似

),表格前后没有换行符

table-row-group :此元素会作为一个或多个行的分组来显示(类似

table-header-group :此元素会作为一个或多个行的分组来显示(类似

table-footer-group :此元素会作为一个或多个行的分组来显示(类似

table-row :此元素会作为一个表格行显示(类似

table-column-group :此元素会作为一个或多个列的分组来显示(类似

table-column :此元素会作为一个单元格列显示(类似

table-cell :此元素会作为一个表格单元格显示(类似

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”

拓 展

·page-break-before :属性设置元素前的 page-breaking 行为

auto :默认值。如果必要则在元素前插入分页符

always :在元素前插入分页符

left :在元素之前足够的分页符,一直到一张空白的左页为止

right :在元素之前足够的分页符,一直到一张空白的右页为止

inherit :规定应该从父元素继承 page-break-before 属性的设置

·page-break-after: 属性设置元素后的 page-breaking 行为

auto :默认。如果必要则在元素后插入分页符

always :在元素后插入分页符

avoid :避免在元素后插入分页符

left :在元素之后足够的分页符,一直到一张空白的左页为止

right :在元素之后足够的分页符,一直到一张空白的右页为止

inherit :规定应该从父元素继承 page-break-after 属性的设置

·cursor: 属性规定要显示的光标的类型(形状)

url :需使用的自定义光标的 URL

crosshair :光标呈现为十字线

text :此光标指示文本

wait :此光标指示程序正忙(通常是一只表或沙漏)

default :默认光标(通常是一个箭头)

help :此光标指示可用的帮助(通常是一个问号或一个气球)

e-resize :此光标指示矩形框的边缘可被向右(东)移动

ne-resize :此光标指示矩形框的边缘可被向上及向右移动(北/东)

n-resize :此光标指示矩形框的边缘可被向上(北)移动

nw-resize :此光标指示矩形框的边缘可被向上及向左移动(北/西)

w-resize :此光标指示矩形框的边缘可被向左移动(西)

sw-resize :此光标指示矩形框的边缘可被向下及向左移动(南/西)

s-resize :此光标指示矩形框的边缘可被向下移动(北/西)

se-resize :此光标指示矩形框的边缘可被向下及向右移动(南/东)

auto :默认。浏览器设置的光标

·Filter:在样式中加上滤镜特效

Alpha:设置透明度

Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

Opacity:透明度级别,范围是0-100,0代表完全透明,100代表完全不透明。FinishOpacity:设置渐变的透明效果时,用来指定结束时的透明度,范围也是0 到 100。Style:设置渐变透明的样式,值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。StartX和

StartY:代表渐变透明效果的开始X和Y坐标。 FinishX和FinishY:代表渐变透明效果结束X和Y 的坐标

BlendTrans:图像之间的淡入和淡出的效果

BlendTrans(Duration=?) Duration:淡入或淡出的时间。注意:这个滤镜必须配合JS建立图片序列,才能做出图片间效果

Blru:建立模糊效果

Blur(Add=?, Direction=?, Strength=?) Add:是否单方向模糊,此参数是一个布尔值,true(非0)或false(0)。 Direction:设置模糊的方向,其中0度代表垂直向上,然后每45度为一个单位。 Strength:代表模糊的象素值

Chroma:把指定的颜色设置为透明

Chroma(Color=?) Color:是指要设置为透明的颜色

DropShadow:建立阴影效果

DropShadow(Color=?, OffX=?, OffY=?, Positive=?) Color:指定阴影的颜色。OffX:指定阴影相对于元素在水平方向偏移量,整数。

OffY:指定阴影相对于元素在垂直方向偏移量,整数。 Positive:是一个布尔值,值为true(非0)时,表示为建立外阴影;为false(0),表示为建立内阴影

FlipH:将元素水平反转

FlipV:将元素垂直反转

Glow:建立外发光效效果

Glow(Color=?, Strength=?)Color:是指定发光的颜色。

Strength:光的强度,可以是1到255之间的任何整数,数字越大,发光的范围就越大

Gray:去掉图像的色彩,显示为黑白图象

Invert:反转图象的颜色,产生类似底片的效果

Light:放置光源的效果,可以用来模拟光源在物体上的投影效果 注意:此效果需要用JS设置光的位置和强度

Mask:建立透明遮罩

Mask(Color=?) Color:设置底色,让对象遮住底色的部分透明

RevealTrans:建立切换效果

RevealTrans(Duration=?, Transition=?)

Duration:是切换时间,以秒为单位。

Transtition:是切换方式,可设置为从0到23。

注意:如果做页面间的切换效果,可以在区加上一行代码:

content=revealTrans(Transition=?,Duration=?) >。如果用在页面里的元素必须配合JS使用

Shadow:建立另一种阴影效果 Shadow(Color=?, Direction=?) Color:是指阴影的颜色。

Direction:是设置投影的方向,0度代表垂直向上,然后每45度为一个单位

Wave:波纹效果

Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) Add:表示是否显示原对象,0表示不显示,非0表示要显示原对象。

Freq:设置波动的个数。LightStrength:设置波浪效果的光照强度,从0到100。0表示最弱,100表示最强。 Phase:波浪的起始相角。从0到100的百分数值。(例如:25相当于90度,而50相当于180度。) Strength:设置波浪摇摆的幅度

Xray:显现图片的轮廓,X光片效果

注意:在使用CSS滤镜时,必须使用在有区域的元素,比如表格,图片等。而文本,段落这样没有区域的元素不能使用CSS滤镜,对这样的元素我们可以设置元素的Height和Width样式或坐标来实现。"


本文标签: 元素 设置 属性 规定 文本

更多相关文章

win7 计算机右键没有属性,系统之家windows7旗舰版计算机上右键菜单没有属性怎么办?...

7月前

[db:摘要]

win7 计算机右键没有属性,Win7系统右键点击计算机没有属性选项怎么办

7月前

[db:摘要]

vim编辑器python语言运行linux命令_Linux之文本编辑器Vim

4月前

[db:摘要]

linux 文本编辑器:vi、vim、实用技巧、vimplus、插件管理器vundle、Nano编辑器

4月前

[db:摘要]

第九章 文本编辑工具vim

4月前

[db:摘要]

文本编辑器Vim学习笔记(二)——移动、跳转

4月前

[db:摘要]

安装吗VMware虚拟机后,解决网络WIFI消失,网络适配器黄色感叹号,网络驱动的属性中设备状态为(windows仍在设置的类配置 代码56),

3月前

[db:摘要]

ChatGPT 太猖狂?OpenAI 欲打假并研发“文本水印”,网友吐槽:太“鸡肋”

3月前

[db:摘要]

windows文本转语音 通过java 调用python 生成exe可执行文件一条龙

3月前

[db:摘要]

mac 笔记本编辑文本命令

3月前

[db:摘要]

Selenium库快速查找网页元素及执行浏览器模拟操作

3月前

[db:摘要]

win10计算机本地连接属性在哪里,Win10系统怎么打开本地连接属性

3月前

有时我们需要对Win10纯净版系统的本地连接进行操作,这时候就需要打开本地连接属性,但是有些用户不知道怎么打开,那么具体该怎么操作呢?针对这个问题&am

win10 *** ipv4属性无法查看

2月前

解决方案 http:answers.microsoftzh-hanswindowsforumwindows_10-networking%E5%85%B3%E4%BA%8Ewindows-10fe1e3746-9d9a-442

电脑无法查看计算机属性,我的电脑属性打不开怎么办

2月前

我的电脑属性打不开怎么办 我们在对电脑进行一些设置或者我们要查看电脑的设置,我们都可以从我的电脑属性中查看。那么我的电脑属性打不开怎么办呢?下面就让小编为大家介绍一下我的电脑属性打不开的.解决办法吧&#xff0

爬虫 Edge浏览器安装Xpaht Helper插件平替Chrome浏览器Xpaht Helper插件定位元素

2月前

爬虫 Edge浏览器安装Xpaht Helper插件平替Chrome浏览器Xpaht Helper插件定位元素 目录 爬虫 Edge浏览器安装Xpaht Helper插件平替Chrome浏览器Xpaht Helper插件定位元素1.概述2.

简单:Windows中的文本与Linux中CentOS的vim编辑器相互复制粘贴方法

2月前

简单:Windows中的文本与Linux中vim编辑器中的文本相互复制粘贴的方法 1.从Windows下到vim中: 1,选中windows中文档内容按Ctrlc。2

w10系统服务器属性在哪,win10系统中"Windows 设置"各项设置详细介绍

2月前

在windows 10操作系统中新增了【windows 设置】面板功能,该面板中包含了win10系统中几乎所有的一些设置,如网络设置、显示外观设置、软件应用设置、隐私设置、更新设置等等&#

在线查看html浏览器兼容性,HTML5标签、属性、事件及浏览器兼容性速查表分享

2月前

5 可以说是近十年来 Web 标准最巨大的飞跃。和以前的版本不同, 5 并非仅仅用来表示 Web 内容,它的使命是将 Web 带入一个成熟的应用平台,在这个平台上&#

U盘 移动硬盘提示格式化 怎么办 属性为0字节了 文件格式变RAW了

2月前

U盘 移动硬盘提示格式化 怎么办 属性为0字节了 文件格式变RAW了 你是否遇到过关于文件,U盘,移动硬盘等属性常出现莫名的扩大缩小问题,本来是4G的U盘,结果显示十多个G,有时 显示为0字节的情况,就算点击右键也还是提示“是否需要

Llinux初学记录(二)——文本编辑工具VIM

19天前

修改时间:20241122 首先在LInux中下载VIM:sudo apt-get install vim VIM编辑器有3中工作模式:输入模式、指令模式和底行模式 1

发表评论

全部评论 0
暂无评论