【css案例学习之全局声明*{} 与body{}的区别】的更多相关文章

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

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

CSS全局声明*与body的区别

通常在写CSS前,为了保证兼容性及展示效果的一致,先会清除浏览器默认样式.此时有两种用法比较常用:1.*{};  2.body{}; 之前我比较偏好于用*{},比较便于把控样式的设置.一直也没试过body{},所以对body不太了解.今天简单一试,发现了两者的区别. 简单讲就是——*{}将更改应用于HTML结构中的所有元素,而body{}仅是更改了body层的默认属性.从继承角度讲的话,*{}可以算做是应用于元素本身,而body{}则是继承. 举个栗子: <h1>标签默认的字体大小为"…

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案例学习之盒子模型

定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离. 案例代码: <!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案例学习之并集选择器

代码 <html> <head> <title>并集选择器</title> <style type="text/css"> h1, h2, h3, h4, h5, p{ /*并集选择器*/ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline;…

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案例学习之用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案例学习之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案例学习之relative与absolute

代码 <!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>absolute属性</tit…

css案例学习之float浮动

代码: <!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>float属性</title…

css案例学习之父子块的margin

两边还会有些距离,这是body默认的. 代码: <head> <title>父子块的margin</title> <style type="text/css"> /* body{ margin:0 0; } */ div.father{ /* 父div */ background-color:#fffebb; text-align:center; font-family:Arial, Helvetica, sans-serif; font…

css案例学习之div与span的区别

代码: <html> <head> <title>div 标记范例</title> <style type="text/css"> div.widthstyle{ font-size:18px; /* 字号大小 */ font-weight:bold; /* 字体粗细 */ font-family:Arial; /* 字体 */ color:#FFFF00; /* 颜色 */ background-color:#0000FF;…

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案例学习之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案例学习之id要唯一

ID有两个的后果 <html> <head> <title>ID选择器</title> <style type="text/css"> #one{ font-weight:bold; /* 粗体 */ } #two{ font-size:30px; /* 字体大小 */ color:#009900; /* 颜色 */ } </style> </head> <body> <p id=&q…

css案例学习之span边框实现的特殊效果

bottom left bottom right top left top right 配合颜色来使用,实现一些神奇的效果 #menu a span{ height:; width:; /*border-top:solid 6px #fff; border-left:solid 6px #f90;*/ /*border-top:solid 6px #fff; border-right:solid 6px #f90;*/ /*border-bottom:solid 6px #fff; border…

css案例学习之通过relative与absolute实现带说明信息的菜单

效果如下 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <style> #menu { /*对menu层设置*/ font-family:Arial; /*字体*/ font-size:16px; /*字号*/ wi…

css案例学习之div a实现立体菜单

效果 代码 <!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>立体菜单</title&…

css案例学习之双斜角横线菜单

效果 代码 <!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>双斜角横线菜单</tit…

css案例学习之div+a实现菜单

效果 代码 <!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>基本菜单</title&…

css案例学习之div ul li a 实现导航效果

效果 代码 <html> <head> <title>无需表格的菜单</title> <style> body{ background-color:#dee0ff; } #navigation { width:150px; font-family:Arial; font-size:14px; text-align:right } #navigation ul { list-style-type:none; /* 不显示项目符号 */ margin…

js学习之函数声明与函数表达式区别[原创]

作为一名js初学者,与大家分享下.Javascript中有函数声明提升的功能,会优先编译函数声明部分.比如, ff(); function ff(){ alert("hello world."); } 这样的代码一样会执行. 下面谈谈函数声明和函数表达式的区别,直接看实例: 1.使用函数声明的情况 <script type="text/javascript"> //使用函数声明的情况 //IE,Chrome下返回no, Firefox下返回yes ; i…

CSS入门级学习

css入门学习1:认识CSS 1.1:css简介,css全称是层叠样式表,Cascading style sheets 1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小,颜色,字体加粗等 使用css样式的一个好处是通过定义某个样式,可以让不同的网页位置的字体有着统一的字体,字号或者颜色等 1.3:css代码语法 css样式由选择器和声明组成,而声明又由属性和值组成 h1 { color:red;font-size:14px;} 选择器 属性 值{属性和值构成声明}…

angular的splitter案例学习

angular的splitter案例学习,都有注释了,作为自己的备忘. <!DOCTYPE html> <html ng-app="APP"> <head> <meta charset="UTF-8"> <title>Angular pane splitter example</title> <link type="text/css" rel="stylesh…

（2）《Head First HTML与CSS》学习笔记---img与基于标准的HTML5

1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面——也就是留下一个符合该值的图片位置): 2.获取一个图像的所有信息,包括内容.大小.及其分辨率:width-2值和height-2值(如果获取图像信息失败,则每个浏览器有每个浏览器的不同处理办法,比如加载一个破损的图片示意——但无论是什么浏览器,此时如果<img>中有alt值,则加载该值替代图片…

关于Html+css阶段学习总结

一.学习经历 进入大学不久,就加入了社团,从而对前端有了一个初步的了解,之后也做过一些学校的官网,积累了一些微小的经验. 到了大二的时候,学校开设了专门的html+css课程,从中也学到许多新的html,css知识,也学到了如何规范的编写代码.但由于个人的懒散,两年半的时间大多是浑浑噩噩的度过,到头来并未学到太多有深度的知识. 再之后,通过专业老师的指导,开始进行前端知识的全面及系统性的学习.而这篇文章便是对这次学习的一次阶段性总结. 二.学习感受 细枝末节,一点一滴的积累 听专业老师讲课,最明…

2019-02-15 CSS样式学习——（内容来自mooc北京林业大学web前端开发授课ppt）

CSS样式的添加方法 行内样式 e.x. 内嵌样式 e.x. 注意内嵌样式写在head标签内: 单独文件(外部式样式表文件) 也是在head标签内插入超链接,sublime+emmet可以用link:css+快捷键实现 CSS的选择器类型 1.标签选择器 2.**类别选择器** 3.ID选择器 注:id选择器应当具有唯一性. 4.嵌套声明 5.集体声明 6.全局声明 CSS样式 1.单位 px,em,% 2.颜色 3.文本 4.字体 简化font: 5.背景 6.超链接 其中,:被称为伪类选择器…

Storm入门2-单词计数案例学习

 [本篇文章主要是通过一个单词计数的案例学习,来加深对storm的基本概念的理解以及基本的开发流程和如何提交并运行一个拓扑] 单词计数拓扑WordCountTopology实现的基本功能就是不停地读入一个个句子,最后输出每个单词和数目并在终端不断的更新结果,拓扑的数据流如下: 语句输入Spout:  从数据源不停地读入数据,并生成一个个句子,输出的tuple格式:{"sentence":"hello world"} 语句分割Bolt: 将一个句子分割成一个个单词,输…