简单的css样式表范例(一)
来源:互联网 发布:淘宝中怎么发布宝贝 编辑:程序博客网 时间:2024/05/01 00:52
css是指层叠样式表,用来进行网页风格设计。采用css技术能够更加精确、有效的控制页面的布局、字体、颜色、背景和其他效果实现。
下面就做一个简单的把外部css文件嵌套在html中的范例:
首先建立一个完整的html网页,在这里文件名为poetry1.html
<html> <head> <title> CSS样式表范例 </title> </head> <body> <h1>古诗欣赏</h1> <h2>春夜喜雨</h2> <p>好雨知时节,<br> 当春乃发生。<br> 随风潜入夜,<br> 润物细无声。<br> </p> <p> [唐]杜甫 </p> </body> </html>
接下来建立相应的css文件,poetry1.css。css的语法格式为:选择器{属性:属性子},例body{color:red}。
由于上面的html代码中有两个相同的标记<p></p>,为了能让标记相同的这两部分内容显示不同的效果,在这里我们给上面的p标记分别加上一个id属性a和b,同时加上引用css文件的语句<link rel="stylesheet" type="text/css" href="poetry2.css" />。
修改上面的poetry1.html代码为:
<html> <head> <title> CSS样式表范例 </title> <link rel="stylesheet" type="text/css" href="poetry1.css" /> </head> <body> <h1>古诗欣赏</h1> <h2>春夜喜雨</h2> <p id="a">好雨知时节,<br> 当春乃发生。<br> 随风潜入夜,<br> 润物细无声。<br> </p> <p id="b"> [唐]杜甫 </p> </body> </html>相应的poetry1.css文件代码如下所示:
body{ text-align:center;}h1{ font-style:italic; color:#977c00; font-size:40pt;}h2{ display:block; font-size:30pt; background-color:RGB(218,196,255);}#a{ display:block; font-size:20pt; color:red; background-color:RGB(175,175,175); word-spacing:40; line-height:60px;}#b{ display:block; font-size:15pt; color:blue; background-color:RGB(255,128,255);}
这里强调一下:
1,如果对于相同名称的标记想使用不同的显示样式,则选择符可以使“#”加上该名称的ID属性值。例#a。
2,如果相对不同名称的标记使用相同的样式,则选择符可以是“.”加上标记的class属性。以后遇到该属性再加以解释说明。
到这里就可以直接在IE浏览器中运行poetry.html文件了。
效果如下图所示:
- 简单的css样式表范例(一)
- CSS样式表范例
- CSS样式表范例
- 简单的css样式
- css的简单样式
- css样式(一)
- CSS样式(一)
- CSS样式(一)
- CSS的基本样式总结(一)
- css样式的使用(一)
- BOOTstrap3 各类CSS样式范例
- asp.net 修改嵌在table中的gridview的css样式(范例)
- CSS 中文字体样式表(表一)
- CSS层叠样式表(一)
- CSS(一)— 样式表入门
- 主从表的报表(简单范例)
- 一些简单的CSS样式
- css样式的简单应用
- S5PV210介绍
- c++三种获取时间方法
- Linux编程之库的知识(汇总)
- WDF驱动中的内存管理
- 邓丽君 - 漫步人生路
- 简单的css样式表范例(一)
- 关于iOS App的切图
- 【转】分治法,动态规划及贪心算法感悟
- Web服务器和应用程序服务器有什么区别
- Junk-Mail Filter(并查集)
- union和struct类型的大小计算
- Composite模式
- Windows Shell编程时的一些笔记
- 建立自己的博客