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代码:
网页标题 第1行第1列 内容 第1行第2列 内容
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)写在
中,语法为:
(3)保存为外部.css文件,通过语句引用。例
样式表 settable.css 文件放在 css 文件夹中。