您现在的位置是:首页 > 博客网站制作 > 心得笔记心得笔记
CSS简明教程(二)——样式表解析
杨青青2013-07-24【心得笔记】人已围观
简介一个样式表就是一个文本文件,在web服务器上通常与html页面放在一起。样式表中包含若干样式规则,规则的先后顺序不重要。每条样式规则会为一个或者多个html元素指定一个或者
一个样式表就是一个文本文件,在web服务器上通常与html页面放在一起。样式表中包含若干样式规则,规则的先后顺序不重要。每条样式规则会为一个或者多个html元素指定一个或者多个格式化信息。下面是简单的样式规则的结构:
selector{
property:value;
property:value;
}
以下是样式规则各个部分的说明:
selector(选择符):表示要格式化什么内容。浏览器会在整个页面中查找选择符想要匹配的元素。编写选择符的方式也不止一种,但最简单的就是直接给出你想要为其应用样式的元素名。例如,可以编写一个选择符。选出页面中的所有一级标题。
property(属性)表示要应用什么样式。属性就是颜色、字体、对齐方式、等。一条样式规则里可以设置任意多个属性。
value(值)表示给样式设置什么样的值。例如,如果属性是颜色,那么值可以是红色或者蓝色。
例子:
h1{
text-align:center;
color:red;
}
把这条规则复制粘贴到样式表里,比如,保存在一个style.css中,然后找一个简单的网页,至少要包含一个<h1>元素。添加一个<link>元素引用该样式表。最后,在浏览器中打开这个网页,你会发现<h1>元素不再是默认的格式,而是会变成红色,并且居中。
css属性
前面的例子介绍了两个格式化属性:text-align(设置文本在水平方向上如何对齐)和color(设置文本颜色)。除此之外,还有很多可以使用的格式化属性,下面列出一些常用的样式属性。
属性 | |
颜色 | color、background-color |
空距 | margin、padding、margin-left、margin-right、margin-top、margin-bottom、padding-left、padding-right、padding-top、padding-bottom |
边框 | border-width、border-style、border-color、border(一次性设置宽度、样式和颜色) |
文本对齐 | text-align、text-indent、word-spacing、letter-spacing、line-height、white-space |
字体 | font-family、font-size、font-weight、font-style、font-variant、text-decoration、@font-face |
尺寸 | width、height |
布局 | postion(left、right)float、clear |
图片 | background-image、background-repeat、background-postion |
使用类格式化正确的元素
前面的样式规则格式化的所有文档中的<h1>标题。但是比较复杂的文档中,则需要指定具体的元素,为它们应用不同的样式。为此,需要使用class属性为这些元素起一个名字。下面是一个例子:
<h1 class="articletile">html5</h1>
好了,现在可以只为这个标题写一条样式规则。关键在于选择符要以一个句点开头,然后才是类名。像这样:
.articletile{
font-family:Garamond,serif;
font-size:40px;
}
表示文章标题的<h1>放大到了40像素高。
可以给任意多个元素指定相同的类属性。几乎所有样式表里都可以看到类选择符规则,这些类选择符把网页标记有效得分成了可以承载样式的单位。
最后有必要提一下,可以组合使用元素类型和类名。比如:
h1.articletile{font-size:40px}
这个选择符只适用于类为articletile的<h1>元素。有时候,这样写只是为了清晰而已——比如,你想提醒自己只为<h1>元素添加articletile类,而其他元素都不会有这个类。但大多数情况下,web设计人员只会给出一个类名,不会限定任何元素。
样式表注释
与html一样,在css中也可以写注释,浏览器同样会忽略这些注释。不过css注释与html注释不一样,css注释以/*字符开头,以*/字符结尾。
/*这是页面中文章的标题*/
很赞哦! ()
随机图文
【郑重申明】本站只提供静态模板下载!
本站郑重申明只提供静态模板下载,拒绝伸手党!本站所有能提供的模板均已发布,喜欢就下载!下载是干嘛的?!学习参考!初衷就是让更多喜欢web设计的新手能从中找到乐趣,以及开发设计更多更好的模板!10条HTML代码编写技巧
1、不要使用嵌入式CSS样式 2、在页面底部引入JavaScript文件 3、使用H1 - H6标签 4、如果是博客,那把H1留给文章标题 5、学会怎样对付IE 6、缩减 回望我们大多数人写的第一个页面,一定会发现严重的 “DIV癖”( divitis ),通常初学者的本能就是把一个段落用DIV包起来,然后为了控制定位而套上更多的DIV。—— 其实这是一种低效而有害的做法。如果要学习web前端开发,需要学习什么?
遇到很多新手,都会问,如果要学习web前端开发,需要学习什么?难不难?多久能入门?怎么能快速建一个网站?工资能拿到多少?还有些让我推荐一些培训机构什么的要去学习。我建议是自学,实在是觉得自己没有这个能力,确实是需要一个老师的话,那你还是自己做主找个老师吧!鼠标悬停图片、文字css3效果
其实这样的效果也很常见,但是我平时用到很少,在其他网站看到这样的效果,第一反应就是查看源代码,看他怎么运用的,结果用了很多的div,最主要的是用js来实现。目前很多浏览器也都兼容css3新属性,这个例子就可以使用rgba(0,0,0,0.5)、opacity、当然关键也要看怎么定位,还是会用到position属性。