Rumah > hujung hadapan web > html tutorial > HTML+CSS样式设置--CSS一学就会_html/css_WEB-ITnose

HTML+CSS样式设置--CSS一学就会_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-06-24 11:43:10
asal
1002 orang telah melayarinya

HTML+CSS样式设置

CSS:(Cascading Style Sheets)层叠样式设置表。

网页的展示效果跟其排版有很大的关系。排版则主要依靠CSS来设置、调节。

下面说CSS与HTML的联合使用的过程:

    (1)新建CSS文件(一般放在与HTML文件同一路径下的css文件夹中)

    (2)在HTML的

标签中,用对CSS进行引用

             

    (3)根据HTML的标签或标识符,在CSS文件中编写样式设置代码

 

CSS的基本语法为:选择器(Selector)、属性(Property)和属性值(Value)

      代码形式为:selector{property:value}

 

主要的选择器:tag标签(html自身的标签)、class标识符(自定义)和id标识符(自定义)。

      选择器使用语法为: 

      (1)tag标签直接使用标签后跟{},例body{}、table{}、p{}、font{}等。

      (2)Class标识符,用“.标识符{ 属性:属性值; }”的形式,例 .xs{ color:blue; }

      (3)id标识符,用“#标识符{ 属性:属性值; }”的形式,例 #xs{ color:blue; }

补充:tag标签选择器在使用时,若多个标签设置相同效果,可联合写。将多个标签用空格隔开用一个{}进行设置即可,不同的效果可单独外加设置。


举例:

HTML代码:

												<title>网页标题					<link type="”text/css”" rel="”stylesheet”">				</title>					<div id="”all”">						<table>
<!--建立一个表格,1行2列-->							<tr>								<td class="”set”">第1行第1列 内容</td>								<td>第1行第2列 内容</td>							</tr>						</table>					</div>							
Salin selepas log masuk

CSS代码:

   			        /*id标识符·示例*/				#all{					Background-color:#F0F0F0;		/*设置背景颜色为淡灰色*/					width:600px;				/*设置这个版块的宽度为600像素*/					height:700px;				/*高度为700像素*/				}				.set{						/*针对第1行第1列样式设置*/					text-align:center;			/*文本居中*/					font-weight:bold			/*文本加粗*/				}				table{						/*对表格整体进行样式设置*/					width:500px;				/*设置表格的宽度为500像素*/					height:400px;				/*表格高度400像素*/				}
Salin selepas log masuk

样式设置的方式有四种:(可参看CSS特点及加入网页的四种方法)

常用的3种为:

(1)直接写在标签中,如

      
Salin selepas log masuk
/*设置表格左边框宽度为2像素*/

(2)写在

中,语法为:
		<style type="”text/css”">			p{ text-align:center; } /*设置p标签的文本居中*/		</style>
Salin selepas log masuk

(3)保存为外部.css文件,通过语句引用。例

      <link rel="”stylesheet”" type="”text/css”" href="%E2%80%9Dcss/setTable.css%E2%80%9D"> 
Salin selepas log masuk
样式表 setTable.css 文件放在 css 文件夹中。

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan