HTML+CSS样式设置
CSS:(Cascading Style Sheets)层叠样式设置表。
网页的展示效果跟其排版有非常大的关系。排版则主要依靠CSS来设置、调节。
以下说CSS与HTML的联合使用的过程:
(1)新建CSS文件(一般放在与HTML文件同一路径下的css目录中)。
(2)在HTML的<head>标签中,用<link />对CSS进行引用
<link rel=”stylesheet” type=”text/css” href=”文件地址/css文件名称.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标签选择器在使用时。若多个标签设置同样效果,可联合写。
将多个标签用空格隔开用一个{}进行设置就可以,不同的效果可单独外加设置。例table tr
td{ color:red }。
举例:
HTML代码:
<html> <head> <title>网页标题</tiltle> <link type=”text/css” rel=”stylesheet” </head> <body> <div id=”all”> <table><!--建立一个表格。1行2列--> <tr> <td class=”set”>第1行第1列 内容</td> <td>第1行第2列 内容</td> </tr> </table> </div> </body> </html>
CSS代码:
/*id标识符·演示样例*/ #all{ Background-color:#F0F0F0; /*设置背景颜色为淡灰色*/ 600px; /*设置这个版块的宽度为600像素*/ height:700px; /*高度为700像素*/ } .set{ /*针对第1行第1列样式设置*/ text-align:center; /*文本居中*/ font-weight:bold /*文本加粗*/ } table{ /*对表格总体进行样式设置*/ 500px; /*设置表格的宽度为500像素*/ height:400px; /*表格高度400像素*/ }
样式设置的方式有四种:(可參看CSS特点及增加网页的四种方法)
经常使用的3种为:
(1)直接写在标签中,如
<table style=”border-left-2px ”></table> /*设置表格左边框宽度为2像素*/
(2)写在<head>中。语法为:
<style type=”text/css”> p{ text-align:center; } /*设置p标签的文本居中*/ </style>
(3)保存为外部.css文件,通过<link />语句引用。例
<link rel=”stylesheet” type=”text/css” href=”css/setTable.css” />
样式表setTable.css文件放在css目录中。
这里抽出重点,将CSS的大体框架简要介绍。目的在于能轻松入手,或在长时间未用的情况下。瞅上一眼能回顾起。CSS有丰富的处理效果设置,若全贴于本文,那就成了杀手了。因此,再次埋一个望远镜——CSS的具体处理效果。建议简要浏览《[精通DIV.CSS网页样式与布局].何丽.高清扫描版
带文件夹》
版权声明:本文博主原创文章。博客,未经同意不得转载。