`
zhyy22145
  • 浏览: 14167 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

《阿勇java建站教程》1.5-css样式使用

阅读更多
    《阿勇java建站教程》1.5-css样式使用
     1.5-css样式使用

      感谢你阅读这篇文章,希望你继续阅读《阿勇java建站教程》的其他文章! 在上一节中(《1.4-丰富的html标签》)我给大家介绍了常用标签的使用,在实际开发过程中,还有很多html标签是我们务必掌握的,我将在日后的实战中具体做出介绍。今天要讲的内容是css样式的使用。 如果把html比作是一座房子的框架的话,那么css就像是对这座房子的进行的装修了。相比之下,装修的作用更实际一些,为什么呢?如今互联网发达的情况下,每个网站都力求将自己的网页搞得美轮美奂,目的就是为了在吸引云云访客的同时,给访客留下美的享受。给一个网页(*.html)添加样式有很多种方法:1.添加行内样式;2.定义页面样式;3.引入样式文件(*.css);
        1.添加行内样式
添加行内样式就是对html标签添加独立的样式,该样式只作用于当前标签。如给下列<a>标签的字体定义红色的样式:color:red;

<a href="http://www.ya178.com" style="color:red;">行内样式</a>

        2.定义页面样式
行内样式只对添加样式的标签起作用,那么如果有好几个相同的标签比如页面上有十几个<a></a>标签内容。我们要给它们加上相同的样式,令它们的字体都变成蓝色,难道每个标签都要加行内样式么?当然不是,这样做不但繁琐,而且也加重了浏览器解析网页的负担。所以:

<html>
<head>
<title>网页标题</title>
<style type="text/css">
a{
color:blue;
}
</style>
</head>
<body>
<a href="http://www.ya178.com" style="color:red;">行内样式</a>
<a href="http://www.ya178.com">页面样式</a>
</body>
</html>

        这里用到了一个新标签<style></style>在这个标签里添加的就是样式定义语句了,理论上说,这个标签并不是必须放在<head></head>标签之内的,也可以放在<body></body>标签内。那么例子中的样式是怎么定义给<a></a>标签的呢?聪明的你也许已经明白,在{}之前的声明“a”就是对<a></a>标签的选择,这就是样式选择器。下面简单说说几个常用的样式选择器:

*{...}//对所有标签添加样式
x{...}//对所有x标签添加样式
.classname{...}//对所有class="classname"的标签添加样式
#idname{...}//对所有id="idname"的标签添加样式

        当你照着例子中的内容写个html文件,并且用浏览器浏览时,你是否发现,字体的颜色有变化!其中第一个<a>标签的字体颜色仍然是红色!没错!&行内样式的作用效力比外部样式(页面样式,引入样式)大!&另外,还有一点,如果样式内容一次一次被覆盖了那么会是什么效果?试试在页面中试试这样的样式定义:
a{
color:blue;
font-size:20px;
}
a{
color:green;//覆盖之前定义的颜色
}
        用浏览器浏览该页面时,你会看见变化的!也就是&样式的定义被覆盖时,以最后一次定义为准,行内样式相当于是这个标签的最后一次样式定义,当然效力是最大的!&

        3.引入样式文件(*.css)
        样式文件其实非此简单,为了统一的管理页面的样式,我们把样式的定义单独用一个文件保存起来,这样的文件的扩展名是.css,文件内容就是:

a{
color:blue;
font-size:20px;
}
.content{
font-size:14px;
}
... ...

        网页上引入这样的样式文件也非常简单:
        用标签<link rel="stylesheet" href="文件所在路径/*.css">
        这里提到的“文件所在路径”分为绝对路径,相对路径;
        绝对路径像是:opt/html/*.css
        相对路径像是:若css样式文件和html页面文件在同级目录下那么路径即xxx.css,若css文件在html文件所在目录父级目录下则路径为../*.css,css文件若在html文件所在目录子级目录'css'下则路径为css/*.css

        好了,css样式的使用到这里就介绍完了,其实还有很多内容需要你去深入学习,比如样式中数量单位的选择,样式中使用表达式,样式包括那些分类等等问题,您可以上网搜搜“css样式表”,里面对css的使用做了分类和详解!还有css3也是可以扩展学习的!好好学习,天天向上!

        本文原创写的不好的地方欢迎大家与我一起交流(微信号:zhyy22145),转载请注明出处!-《阿勇java建站教程》1.5-css样式使用
http://www.ya178.com/public/detailUA-10661-1.html

         《阿勇java建站教程》统一交流团<a http://www.ya178.com/public/detailUU-39-1.html
分享到:
评论

相关推荐

    [计算机网络实验与学习指导——基于Cisco Packet Tracer模拟器(第2版)][叶阿勇 等][配套资料]

    [计算机网络实验与学习指导——基于Cisco Packet Tracer模拟器(第2版)][叶阿勇 等]的配套实验pka

    史上最牛阿勇文本编辑器

    史上最牛文本编辑器。请大家免费使用。如有不妥之处请谅解。

    计算机网络实验与学习指导-基于Cisco Packet Tracert模拟器-程序源代码pka文件.rar

    计算机网络实验与学习指导-基于Cisco Packet Tracert模拟器-程序源代码pka文件,为叶阿勇等主编《计算机网络实验与学习指导》的实验内容,基于Cisco Packet Tracert6.0.1完成,经过测试过的。希望对学习思科网络的...

    GB/BIG5/UTF-8 文件编码批量转换程序

    '* 免费软件,欢迎使用!请勿用于直接出售或其它商业用途。 '* '* 作者主页:pc-soft.cn e-mail:fxy_2002@163.com '* '* 程序功能:将 GB、BIG5、UTF-8 文件相互转换,方便的批量处理能力, '* 主要用于网站文件...

    文件编码批量转换程序

    软件使用VB6开发,如果在某些电脑上无法使用,多半是缺少运行库的原因。 碰到这种情况,请在互网上下载 MSVBVM60.DLL 文件到软件所在目录即可。这个 文件使用很普遍,许多地方可以下载。如果找不到,微软的网站一定...

    豆葵 GB/BIG5/UTF-8 文件编码批量转换工具

    豆葵 GB/BIG5/UTF-8 文件编码批量转换工具 是一款单一文件与批量转换编码工具将 GB、BIG5、UTF-8 文件相互转换,方便的批量处理能力,主要用于网站文件编码方式的整体转换上。 豆葵 www.doukui.cn 是立足垂直搜索...

    计算机网络实验指导

    计算机网络实验与学习指导书叶阿勇-基于Packet Tracer6.0版本计算机网络实验与学习指导书叶阿勇-基于Packet Tracer6.0版本

    网络实验报告指导

    - **网络测试**:使用ping命令等工具验证网络连通性和设备间的数据传输。 #### 总结 本文详细介绍了双绞线的基本知识、分类、有效距离等内容,并重点解析了两个实验的具体内容和实训目标。实验1通过非屏蔽双绞线的...

    计算机网络实验指导书与实验报告

    计算机网络实验完整的指导书,以及完全写好的实验报告。报告中有实验过程的数据截图,抓包的数据截图等等

    免费分享一次一单早盘头皮Pirate_EA02.04.1

    EA名称:pirate-EA02.04.1 适用于早盘剥头皮EA EA用法: 1:可自定义早盘交易得起始时间和接受时间 2:可采用固定手数,也可以采用动态手数 3:对点差要求有限制,越低越好 EA加载周期:30分钟 ...

    08.doc

    此外,他对网页设计和多媒体制作也有一定的了解,如Photoshop和网页三剑客(Dreamweaver、Flash、Fireworks),以及会声会影等软件的使用,这为他在数字媒体或网页设计领域的工作提供了可能性。 再者,阿勇的英语...

    [cnswift.org]swift 4.2-alpha-2018-8-6【合并版】(一个文件内)

    这些更新信息包括文档同步更新到了Swift 4.2的时间点(2018年07月18日),以及一些与维护网站相关的个人或团队的感谢(例如@唯有学习、十步奶一人、阿勇等)。 在知识内容的介绍上,文件提供了Swift编程语言的基础...

    计算机网络学习与指导实验-基于cisco packet tracer

    在 ISP1 和 ISP2 之间的链路使用 PPP 协议。我们可以通过观察数据包的封装格式来了解 PPP 协议的工作原理。 PPPoE 协议的封装格式 在这个实验中,我们也学习了 PPPoE 协议的封装格式。PPPoE 协议是基于 PPP 协议的...

    计算机网络实验最新资源

    通过实验,学生能够深入地了解网络协议、网络设备的使用以及网络故障排查的方法。本实验资源旨在提供全面的指导,帮助学生掌握网络命令的运用,提升网络管理与维护的能力。 实验报告的书写要求严谨且规范,包括实验...

    html,asp,php编码批量转换工具

    '* 免费软件,欢迎使用!请勿用于直接出售或其它商业用途。 '* '* 作者主页:pc-soft.cn e-mail:fxy_2002@163.com '* '* 程序功能:将 GB、BIG5、UTF-8 文件相互转换,方便的批量处理能力, '* 主要用于网站文件...

    计算机网络实训书

    通过这些实验,学生不仅能够了解网络设备的工作原理,还能掌握如何正确配置和使用这些设备,以及理解不同传输介质对网络性能的影响。这样的实训有助于理论知识与实践技能的结合,为未来在实际网络环境中解决问题打下...

    计算机网络2

    计算机网络

    HC-031-122-CHS

    选项A中的0xFEFE是IS-IS(Intermediate System to Intermediate System)协议在网络层使用的协议标识符,用于区分不同的网络层协议。 ### 7. IS-IS Level类型 IS-IS协议中的Level-1和Level-2分别代表区域内的路由和...

    台語Khok搭仔 (臺語小幫手)-crx插件

    包括「精确搜寻」及「模糊搜寻」- 在「台字田」研究台语汉字的在来写法- 用「斗拍字」的语音合成技术,听听台语字词的准确发音版本历史:v0.2: 增加介面语言设定功能v0.1: 最初版本感谢:- aióng 阿勇 提供台语介面...

    《高等教育心理学》案例分析题参考答案.docx

    阿勇的父母都是老师,父母的言传身教,让他自小就养成了良好的学习习惯,学习起来格外卖力;乐乐格外宠爱自己选择的这个专业,除了课堂认真学习外,他还在课后乐观地阅读与专业相关的书籍,了解本专业最前端的信息。...

Global site tag (gtag.js) - Google Analytics