[设置主页]
[收藏本站]

董连禹个人网站-2022年新   

Bei Jing Hua Rui Zhi Cheng Energy Technology Co,.Ltd
今天是:2025年05月26日,目前本网正在建设中

拼搏、创新 、守正、承担

联系人:董经理
销售电话:010-57528068
销售电话:13426054093
传真:010-57528068
地址:北京市昌平区科技园区富康路18号4楼417室
邮编:102200
北京华瑞志诚能源科技有限公司
Bei Jing Hua Rui Zhi Cheng Energy Technology Co,.Ltd
Adress:Room 417,NO.18,FuKangRoad
ChangPing District,BeiJing ctiy,China.
E-Mail:13426054093@126.com



css样式表快速查询


新建网页 0

1Css 样式表的使用方法

<HTML>
<HEAD>
<TITLE>My First Stylesheet
</TITLE>
<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">
</HEAD>
<BODY>
<H1>Stylesheets: The Tool of
the Web Design Gods</H1>
<P>Amaze your friends! Squash
your enemies!</P>
</BODY>
</HTML>

H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }

注意不能直接把连接的内容放到写字板上,要把写字板另存为非.txt格式

如果.css中带有如

P.zhubiaoti{ color: green }
P
.fubiaoti { color: purple }

那么网页中应该带有

< P CLASS= zhubiaoti > 非凡非凡非凡非凡方法</P>

< P CLASS= fubiaoti > fdfsa dsafs fasdf </P>

样式表中的样式欠套(以下 为只有主体字中的加粗字体的背景才会变红色)

P B { color: red }

样式表中的注释的使用

/* 这是红色背景*/

用行内格式去不遵循样式表

<H1 STYLE="color: orange; font-family: impact">111111111</H1>

————————————————————————————

1.     变成中注意把察看中的显示扩展名打钩否则易出现混淆。特别是在.txt中编辑程序时

2.  可以将执行文件拖到 <运行> 中去

随意控制字的大小

  •  font-size: 26pt   [***pt/***em/xx-small>>>>x-small>>>>small>>medium>>>large>>>x-large>>>xx-large ]

相对大小smaller >>larger>> 300%

 

 

背景颜色

background: yellow;[rgb(51,204,0)R代表红色,G代表绿色,B代表蓝色 /color: #333399 /aqua, black, blue, fuchsia, gray, green, lime,maroon, navy, olive, purple, red, silver, teal, white, and yellow.]

字体选择(靠前的字体具有优先权)

font-family: helvetica,

impact, sans-serif;

字的颜色

color: green

字体的正斜

font-style: italic [ Oblique/ normal]

字体的加粗 font-weight: bold  [100,,,,400,,,900bolder,lighter]

控制字母的大小写

字体参数1font-variant)正常文字缩小一半尺寸后大写

H2 { font-variant: small-caps }

字母参数2

text-transform: uppercase [uppercase 使所有字母大写显示, lowercase使所有字母小写显示,capitalize 使每个单词的第1个字母大写显示, none 使所有继承的文字变形参数被忽略,文字将以正常形式显示。]

字体加线text-decoration: underline

[underline 给文字下划线, overline给文字上划线, line-through给文字划出删除线, blink是你在恶梦中常常看到的文字在闪烁,none使得上述效果都不会发生。]

 

去掉超连接的产生的下划线

A:link { text-decoration: none }
A:active { text-decoration: none }
A:visited { text-decoration: none }

  

字间距

word-spacing: 1em [mm,px,cm,ex(多少倍字高)]

字母间距

letter-spacing: 10px

行高(行与行之间的垂直高度)

 line-height: 16pt

用数字设置行距

{ font-size: 12pt; line-height: 2 }[相当于行距为12*2=24pt/或者改数字为200%]

段落水平对齐

text-align: center[left,right]

段落垂直对齐

vertical-align: top[bottom/text-top将要素的顶部同母体要素文字的顶部对齐。/text-bottom将要素的底部同母体要素文字的底部对齐/baseline将要素的基准线同母体要素的基准线对齐/middle将要素的中点同母体要素的中点对齐。/sub将要素以下标的形式显示。/super将要素以 上标的形式显示。]

段落缩行 text-indent: 2em

要素的空白边距

margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px

要素的边缘空格填充

padding-top: 20px; padding-bottom: 5px; padding-left: 100px; padding-right: 55px

要素的边框填充

H4 { border-top-width: 2px; border-bottom-width: 5px; border-left-width: 1px; border-right-width: 1px }[ thin/ medium/ thick]

边框颜色

border-color: green[#666699 #FF0033 #000000 #FFFF99代表顶右底左]

边框的样式

IMG {border-style: double}[solid/double/dotted/dashed/groove/ridge/inset/outset]

文字包裹图像

float: left

clear: left

 

背景图像的加法

background-image: url(background.gif)[一定注意要与背景色配合使用,否则页面加载时非常难看,还要注意顺序,背景色放在前面先显示,背景图像后显示]

背景只显示一张图像,不让其平铺

background-repeat: no-repeat;[ background-repeat: repeat-yGIF图象将在文字后垂直平铺。]

固定背景

BODY { background-attachment: fixed; background-image: url(
15/stuff3a/background.gif) }[
scroll/fix该项与不固定不同,只能放在body里面,最好不让其平铺]

背景定位

background-position: center bottom;[ bottom/ left/ right/ center/ 70px 10px(起点在左上角,水平 竖直);/ 75% 50%(好处是随着窗口大小变化而改变 ]

对要素在窗口中的各各位置进行精确定位

H4 { position: absolute; left: 100px; top: 43px }[ relative(相对定位); left: 40px; top: 10px/ absolute(绝对定位)]

设置要素的最高水平宽度,如段落宽度,高度

H4 { position: absolute; left: 100px; top: 43px width: 150px}[ height]

 

要素被隐藏,有可能鼠标滑过时出现要素

H4 { visibility: hidden }

[ visible使要素可以被看见/hidden使要素被隐藏 /inherit指它将继承母体要素的可视性设置]

要素重叠

H2 { position: relative; left: 10px; top: 0px; z-index: 10 }

H1 { position: relative; left: 33px; top: -35px; z-index: 1 }

 

 



2006-07-07 10:09:57
..