1.创建一个html页面
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> @import "css/css04.css"; </style> </head> <body> <div> <h1>京东商城——全部商品分类</h1> <h2>图书、音像、电子书刊</h2> <p> <span>电子书刊</span> 电子书 网络原创 数字杂志 多媒体图书目<br/> <span>音像</span>音乐 影视 教育音像<br/> <span>经管励志</span> 经济 金融与投资 管理 励志与成功 </p> <h2>家用电器</h2> <p><span>大家电</span> 平板电视 空调 冰箱 DVD播放机<br/> <span>生活电器</span> 净化器 电风扇 饮水机 电话机</p> <h2>个护化妆</h2> <p><span>面部护理</span> 洁面乳 精华露 眼部护理 T区护理<br/> <span>身体护理</span> 洗发护发 沐浴 手工/香皂 手足护理<br/> <span>香水SPA</span> 女士香水 男士香水 组合套装 迷你香水</p> <h2>钟表</h2> <p><span>瑞士品牌</span> 江诗丹顿 卡地亚Cartier 帝舵TUDOR 真利时ZENITH 雷蒙威Raymond Well<br/> <span>时尚品牌</span> 巴宝莉BURBERRY 雅克利曼Jacques Lemans 苏菲玛索Sophie Marceau<br/> <span>国产品牌</span> 聚利时Julius 北京beijing 依宝诺EBONO 劳士顿</p> <h2>服饰鞋帽</h2> <p><span>女装</span> T恤 衬衫 针织衫 卫衣 连衣裙 风衣 大衣 休闲裤<br/> <span>男装</span> 衬衫 POLO衫 针织衫 皮衣 外套 棉服 大衣<br/> <span>运动</span> 休闲鞋 跑步鞋 足球鞋 运动裤 运动包</p> </div> </body> </html>
2.创建对应的css文件夹 下面的css04.css文件
h1{ text-align: center; /*一级标题居中显示*/ } span{ color: blue; /* 字体颜色 蓝色*/ /* font-style: italic; /!*斜体*!/ font-weight: bold; /!*粗体*!/ font-size:16px ; /!*字体大小*!/ font-family: "楷体"; /!*字体样式*!/*/ font: italic bold 16px "楷体"; text-decoration: underline; /*下划线*/ } p{ line-height: 30px; /* 行高*/ }
3.运行查看效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>字体样式</title> <style type="text/css"> .show{ font-size: 24px; /*字体的大小*/ font-weight: bold; /*字体的粗细*/ font-family:"楷体"; /*字体的类型*/ font-style:italic; /*字体的风格*/ color: red; } #dream{ font:italic bold 24px "楷体"; /*顺序不能改变*/ color: rgb(200,2,2); /*三原色的设置*/ /* color: rgba(2,2,2,0.9); 设置颜色以及透明度*/ } .bird{ font-style: oblique; } </style> </head> <body> <p>享受<span class="show">“北大式”</span>教育服务</p> <p>在北大青鸟，有一群人默默支持你成就 <span id="dream">IT梦想</span></p> <p class="bird">选择<span>北大青鸟</span>，成就你的梦想</p> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>文本装饰</title> <style type="text/css"> div:nth-of-type(1){ text-decoration: underline; /*下划线*/ } div:nth-of-type(3){ text-decoration: overline;/*上划线*/ } div:nth-of-type(2){ text-decoration: none; /*默认没有*/ } div:nth-of-type(4){ text-decoration: line-through; /*删除线*/ } </style> </head> <body> <div>文本内容1</div> <div>文本内容2</div> <div>文本内容3</div> <div>文本内容4</div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>垂直居中</title> <style type="text/css"> span,img{ //图片与文字的垂直居中 vertical-align: middle; } </style> </head> <body> <img src="images/icon.gif"> <span>这是几本值得拥有的Books</span> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>文本阴影</title> <style type="text/css"> h1{ text-shadow: pink 10px 10px 2px; } </style> </head> <body> <h1>文本阴影</h1> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>超链接样式</title> <style type="text/css"> /* 超链接伪类 必须按照下面的顺序进行设置 01.a:link:未访问的链接 02.a:visited:点击已经访问后的链接 03.a:hover:鼠标悬停的链接 04.a:active:鼠标单击未释放的链接 */ a:visited{ color: yellowgreen; } a:hover{ color: orange; } a:active{ color: deeppink; } #haha:hover{ text-decoration: none; } </style> </head> <body> <a href="#" id="haha">超链接1</a> <a href="#">超链接2</a> </body> </html>