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

转载 2013年07月26日 09:50:59

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样式使用

         《阿勇java建站教程》统一交流团

《阿勇java建站教程》1.2java建站

1.2-java建站     大家好,感谢你能看到这篇文章,希望你继续阅读《阿勇java建站教程》的其他文章!     “建站”,这个概念太含糊了,具体而言其实是开发一个网站project即w...
  • chenmoshijing520
  • chenmoshijing520
  • 2013年07月18日 22:22
  • 701

《阿勇java建站教程》1.3零基础建站

1.3零基础建站 感谢你阅读这篇文章,希望你继续阅读《阿勇java建站教程》的其他文章! java开发web project不是一个速成的过程,虽然技术上没有难题。光学会java编程就能写网站...
  • chenmoshijing520
  • chenmoshijing520
  • 2013年07月18日 22:23
  • 659

《阿勇java建站教程》-1.1建站梦

1.1建站梦     大家好,我是阿勇。感谢大家阅读这篇文章,并且希望大家能将《阿勇java建站教程》全部看完!     2010年9月,我参加了xx培训机构,为正式步入IT行业做准备,也就是...
  • chenmoshijing520
  • chenmoshijing520
  • 2013年07月18日 22:20
  • 829

《阿勇java建站教程》1.6-javaScript使用

1.6-javaScript使用 感谢你阅读这篇文章,希望你继续阅读《阿勇java建站教程》的其他文章! 上节内容(《1.5.1-css兼容》)简单介绍了css hack,本节内容的重点将是介绍j...
  • chenmoshijing520
  • chenmoshijing520
  • 2013年08月20日 20:49
  • 521

《阿勇java建站教程》2.1-数据库

2.1-数据库        大家好,我是阿勇。感谢大家阅读这篇文章,并且希望大家能将《阿勇java建站教程》全部看完! 数据库(DataBase)?相信很多人在接触编程以前完全不明白它是个什么东...
  • chenmoshijing520
  • chenmoshijing520
  • 2013年09月03日 14:10
  • 604

《阿勇java建站教程》1.5.1-css兼容

1.5.1-css兼容 感谢你阅读这篇文章,希望你继续阅读《阿勇java建站教程》的其他文章! 上节内容(《1.5-css样式使用》)说的是css样式的基本使用,并无高深的内容,一切应用都应该在实...
  • chenmoshijing520
  • chenmoshijing520
  • 2013年08月20日 20:46
  • 437

《阿勇java建站教程》1.4-丰富的html标签

1.4-丰富的html标签     感谢你阅读这篇文章,希望你继续阅读《阿勇java建站教程》的其他文章! 上节内容(《阿勇java建站教程》1.3零基础建站)里初步介绍了html页面结构,在本...
  • chenmoshijing520
  • chenmoshijing520
  • 2013年07月18日 22:25
  • 528

Wordpress入门建站教程二:搭建WP站点的准备工作

WordPress入门第一课就简单介绍了WordPress,它是一个使用 PHP语言和 MySQL数据库开发的开源、免费的建站程序,那么搭建WordPress站点,就要求一个能够运行PHP语言的主机空...
  • imxiangzi
  • imxiangzi
  • 2015年12月24日 14:42
  • 933

《阿勇java建站教程》1.7-方便快捷的编码工具

1.7-方便快捷的编码工具       感谢你阅读这篇文章,希望你继续阅读《阿勇java建站教程》的其他文章! 在之前的6节内容中,我向大家介绍了html标签,css样式,javaScript客户...
  • chenmoshijing520
  • chenmoshijing520
  • 2013年09月03日 14:05
  • 796

【转】新手如何使用阿里云(linux)服务器建站(搬站)

之前写的一些步骤,存在一些错误,给新手朋友们带来的困扰道个歉,我在前天也正式购买了阿里云的空间,所以从新再装的时候,发现几个问题,已经一一修正,包括 WDCP 也更换为最新版本的了,现在按照步骤来做,...
  • fengda2870
  • fengda2870
  • 2013年09月16日 09:30
  • 4843
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:《阿勇java建站教程》1.5-css样式使用
举报原因:
原因补充:

(最多只允许输入30个字)