css案例学习之class执行的顺序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>选择器.class</title&g…

css案例学习之层叠样式

代码 <html> <head> <title>层叠特性</title> <style type="text/css"> p{ color:green; } .red{ color:red; } .purple{ color:purple; } /*这里的顺序是关键*/ #line3{ color:blue; } </style> </head> <body> <p >这是第1行…

css案例学习之table tr th td ul li实现日历

效果代码 <html> <head> <title>Calendar</title> <style> <!-- .month { border-collapse: collapse; table-layout:fixed; width:; } .month caption { text-align: left; font-family: normal % 宋体, arial; font-size:12px; font-weight:nor…

css案例学习之用thead、tbody、tfoot实现漂亮的table布局

首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最上面, <tfoot> 总在表的最下面效果代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-…

css案例学习之盒子模型

定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离. 案例代码: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm…

css案例学习之继承关系

代码 <html> <head> <title>继承关系</title> <style> body{ color:blue; /* 颜色 */ text-decoration:underline; /* 下划线 */ } em{ color:red; /* 颜色 */ } </style> </head> <body> <h1><em>前沿</em>教室</h1>…

css案例学习之全局声明*{} 与body{}的区别

代码 <html> <head> <title>全局声明</title> <style type="text/css"> *{ /* 全局声明 */ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline; /* 下划线 */ } </sty…

CSS 案例学习

1.样式 display:inline-block;可改变a标签,合其可定义宽高 2.a:hover表示鼠标经过 3.background:url(110.png) bottom 表示:给链接一个图片并底端对齐代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> a{ display: inline…

css案例学习之ul li dl dt dd实现二级菜单

效果代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="…

css案例学习之按钮超链接

效果 css实现 <html> <head> <title>按钮超链接</title> <style> a{ /* 统一设置所有样式 */ font-family: Arial; font-size: .8em; text-align:center; margin:3px; } a:link, a:visited{ /* 超链接正常状态.被访问过的样式 */ color: #A62020; padding:4px 10px 4px 10px; b…

【css案例学习之class执行的顺序】的更多相关文章