首頁 > web前端 > html教學 > HTML+CSS样式设置--CSS一学就会_html/css_WEB-ITnose

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

WBOY
發布: 2016-06-24 11:43:10
原創
959 人瀏覽過

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>							
登入後複製

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像素*/				}
登入後複製

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

常用的3种为:

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

      
登入後複製
/*设置表格左边框宽度为2像素*/

(2)写在

中,语法为:
		<style type="”text/css”">			p{ text-align:center; } /*设置p标签的文本居中*/		</style>
登入後複製

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

      <link rel="”stylesheet”" type="”text/css”" href="%E2%80%9Dcss/setTable.css%E2%80%9D"> 
登入後複製
样式表 setTable.css 文件放在 css 文件夹中。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板