《阿勇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
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