CSS的入门级

来源：互联网发布：java中文gbk编码转换编辑：程序博客网时间：2024/06/06 17:18

css是英文Cascading Style Sheets的缩写，它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS格式设置规则由选择器和声明两部分组成，其中选择器是标识格式元素的术语（如p、h1、类名或id），声明用于定义元素样式。CSS的主要优点是提供了便利的更新功能。设计网站时，可以创建一个CSS样式表文件，然后将网站中的所有网页都连接到该样式表文件，这样很容易为Web站点内的所有网页提供一致的外观和风格。当更新某一样式属性时，使用该样式的所有网页的格式都会自动更新为新样式，而不必逐页进行修改。
下面我们将对CSS进行一个基础的了解与认识：
案例一：用CSS做一个简单的超链接

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">    a{        font-size:18px;        color:#F00;}</style></head><body><a href="">超链接</a><br /><a href="">超链接</a><br /><a href="">超链接</a><br /><a href="">超链接</a><br /></body></html>

具体的代码分析如下所示：

    <style type="text/css">        a{            font-size:36px;            color:#0F0            }    </style>

上面的代码表示为：
1.使用选择器选中你要设置样式的标签
2.给标签设置样式, 样式属性:样式值
font-size:表示字体的大小(笔者可以根据自已及页面的大小进行设置)；
color:表示字体的颜色，后面可以设置各种颜色。
CSS 的形式：
1.行内样式:使用标签内部的style属性给每一个标签设置样式。
缺点:一次只能给一个标签设置样式,如富哦标签比较多,工作量比较大,而且更改起来比较麻烦。
2.内部样式:使用style标签,给style标签中写css的样式代码。
缺点:css代码和html代码混杂在了一起,管理起来比较麻烦。
3.外部样式(推荐):在html代码的外部,创建一个css文件,css文件中写独立的css代码,使用的时候,直接将css文件导入到html文件中即可

<link href="1.css" rel="stylesheet" />

分析：
href : 表示外部css文件的位置
rel: 表示关联的是样式表
案例二：1.CSS中语法及其选择器

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title>a{font-size:36px;color:#008800;}<style type="text/css">/*标签选择器*/div{    font-size:14px;    color:#F00;    }/*类选择器,给div1和div2设置样式*/.c1{    font-size:16px;    color:#00F;    }/*使用id选择器给div1设置样式*/#d1{    font-size:24px;    color:#600;    }/*将div4和div5的c2样式设置为和c1完全相同*/.c2{    font-size:16px;    color:#00F;    }/*当c1和c2中的css代码相同的时候,我们就可以使用并集选择器将两个选择其中的代码进行抽取,形成一个并集选择器*/ .c1,.c2{    font-size:16px;    color:#00F;    }/*给div中的span标签设置一个样式,交集选择器*/div span{    font-size:36px;    color:#006;    }</style></head><body><div id="d1">div1</div><br /><div class="c1">div2</div><br /><div class="c1">div3</div><br /><div class="c2">div4</div><br /><div class="c2">div5</div><br /><div><span>div中的span标签</span></div><br /><span>独立的span标签</span></body></html>

运行结果如下：
这里写图片描述
分析：

2.CSS中的伪类选择器

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">    a:link{        /*在a标签的link状态下需要展示的样式*/         font-size:24px;         color:#00F;        }    a:visited{        font-size:24px;        color:#900;        }       a:hover{        font-size:24px;        color:#F00;        text-decoration:line-through;        }    a:active{        font-size:24px;        color:#9F0;        }</style></head><body><a href="3.css.html">伪类选择器</a></body></html>

实现结果如下图所示：
这里写图片描述
具体的分析如下：

案例三：给表格中的每一行添加划过背景
该代码可以实现表格中的每一行有划过背景：

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">/*使用类选择器选中下面三行*/.c:hover{    background-color:#9F6;}</style></head><body><table border="1" align="center" width="400px" height="300px"><caption align="center"><h1>学科成绩统计表</h1></caption><tr align="center" class="c"><th class="c">姓名</th><th>学科</th><th>成绩</th></tr><tr align="center" class="c"><td rowspan="2">狗娃</td><td>音乐</td><td>90</td></tr><tr align="center" class="c"><td>java</td><td>60</td></tr><tr align="center" class="c"><td>狗剩</td><td>java</td><td>70</td></tr><tr align="center" class="c"><td>狗蛋</td><td>java</td><td>80</td></tr><tr align="center" class="c"><td colspan="2">平均分</td><td>70</td></tr></tbody></table></html>

该代码则是只可以实现创建表格，却是少了划过背景的出现：

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><table border="1" align="center" width="400px" height="300px"><caption align="center"><h1>学科成绩统计表</h1></caption><tr align="center" class="c"><th class="c">姓名</th><th>学科</th><th>成绩</th></tr><tr align="center" class="c"><td rowspan="2">狗娃</td><td>音乐</td><td>90</td></tr><tr align="center" class="c"><td>java</td><td>60</td></tr><tr align="center" class="c"><td>狗剩</td><td>java</td><td>70</td></tr><tr align="center" class="c"><td>狗蛋</td><td>java</td><td>80</td></tr><tr align="center" class="c"><td colspan="2">平均分</td><td>70</td></tr></tbody></table></html>

在上节就说过创建表格的具体代码，此例题的关键在于给表格中添加划过背景；如何才能添加正确的划过背景呢？这个需要我们的思考，对比两次代码只是稍微的添加了一点代码就变得与众不同啦！
多出的代码片为：

<style type="text/css">/*使用类选择器选中下面三行*/.c:hover{    background-color:#9F6;}</style>

background-color 属性规定链接的背景色：
这里写图片描述
案例四：改变文本的字体大小以及字体
具体代码块如下：

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">div{    /*设置字符间距*/    letter-spacing:4px;    /*设置文本的位置*/    text-align:center;    /*给文本设置上划/下划/中划线*/    text-decoration:underline;    /*设置词语和词语之间的间距,设置之前需要分词,每个词语之间使用空格隔开*/    word-spacing:10px;        /*设置字体*/        /*font-family:"黑体";*/        /*设置字体大小*/        /*font-size:36px;*/        /*设置字体样式*/        /*font-style:italic;*/        /*设置字体的粗细*/        /*font-weight:bold;*/        /*字体设置的简写属性,一定要注意属性的顺序*/        font:italic bold 36px "黑体";    }</style></head><body><div>让优秀成为一种习惯！</div></body></html>

根据div{ }中的代码不同就可以实现想要的结果。
这里写图片描述
案例五：如何给CSS中添加背景图片
具体代码块如下：

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">    body{        /*给标签设置背景颜色*/        background-color:#006;        /*将背景设置为图片*/        background-image:url(05.%E7%B4%A0%E6%9D%90/mm.jpg);        /*设置背景图片的重复规则        repeat:默认显示的重复方式,x,y方向都重复        repeat-x:设置图片仅在x方向上重复        repeat-y:设置图片仅在y轴方向上进行重复        no-repeat:图片不重复*/        background-repeat:no-repeat;        /*设置图片的位置*/        background-position:top right ;        /*设置图片背景的简写样式*/        background:#006 url(05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top right;        }</style></head><body></body></html>

案例六：如何创建CSS列表
具体的代码块如下所示：

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">    ul{        /*设置列表选项前面的样式*/        list-style-type:circle;        /*将图片设置为列表选项的一个标记*/        list-style-image:url(05.%E7%B4%A0%E6%9D%90/start.jpg);        /*列表样式的简写属性*/        list-style:url(05.%E7%B4%A0%E6%9D%90/start.jpg);        }</style></head><body><ul><li>黄飞虎</li><li>黄岩</li><li>土行孙</li></ul></body></html>

可以在列表选项的前面设置一个样式作为简单的标记。
案例七：如何利用CSS创建一个边框？
具体实行代码如下：
这里写图片描述
运行此代码块之后便可在浏览器中看到一个大小（由自已设置的大小的方框）。

关于CSS的基础介绍就到这里告一段落啦！小编会持续为大家更新关于Java的博客，感谢一路上有您的陪同，让小编感到不在孤独，如果在浏览过程中出现任何错误，请及时与小编联系，小编将会在第一时间内进行改正！
谢谢大家！

阅读全文

1 0