网页制作基础教程(四)-css语法

  • 编辑时间: 2014-04-30
  • 浏览量: loading
  • 作者: 段亮

在前三章网页制作基础的教程中,我们简单的了解html标签,以及html表单的应用。并且会用简单的html标签制作一个简单的网页,但是你们有没有发现?做出来的网页看上去很别捏,总感觉少了点什么。是不是缺少一件衣服呢?一件为网页搭配颜色的衣服!这就是CSS的作用。很多小白们都不知道什么是CSS,简单的理解就是对网站的修饰。如果说Html是一个人的话,那么CSS就是一件衣服,一件很好看的衣服。想必大家对html和CSS的关系理解了吧!

下面就跟大家一起学习下CSS的基础语法:

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

一.标签选择器

h1 {width:300px;height:100px;color:red; font-size:14px;}


PS:根据上图所示,这就是标签选择器,表示的含义是,h1标签的字体颜色为红色,字体为14像素。

二.ID选择器

#banner{width:950px;height:450px;border:1px solid red;color:red;}

<p id="red">这个段落是红色。</p>

<p id="green">这个段落是绿色。</p>

PS:以“#”开头的选择器称为ID选择器。含义:ID为banner的盒子,宽度为950像素,高度为450像素,1像素红色的边框线,字体颜色为红色。id 属性只能在每个 HTML 文档中出现一次。

三.Class(类)选择器

.content{width:950px;height:450px;border:1px solid red;}

PS:以“.”开头的选择器称为Class(类)选择器。含义:.content的盒子,宽度为950像素,高度为450像素,1像素红色的边框线。

Class选择器于ID选择器的区别:Class选择器可以存在多次,重复使用,而ID不能。

那么又有同学问了,我在网页只用两个相同的ID值,没有出现什么错误。那么为什么就不能用呢?前面我说了,ID选择器一般是用于大框架。或者特殊的地方才用的,为什么这样说呢?第一:JS得识别,如果说你网页中存在“两个’相同的ID选择器的话,那么JS怎么会判别你要哪个实现特效呢?第一个还是第二个?还是都用?第二:同样的道理,你做web前端,想必就会跟后台打交道。如果你网页出现很多相同的ID值的话。那么后台做程序的就难做了,不知道怎么去实现。说不定会骂:“你他娘的,是谁写的狗逼代码呀!写的这么差”。当然不会当着你的面骂,可能别人早在心里骂了你一万遍。

选择器的分组选择

h1,h2,h3,h4,h5,h6 {

 color : red;

}

注:表示h1到h6标签的颜色都是红色。

CSS注释

/* 注释内容 */

四.CSS几种链接链接样式

1.内嵌样式

<style type="text/css">

.top{width:985px;height:260px;background:#FFCC66;}

</style>

2.Link样式表式

<link rel=”stylesheet” type=”text/css” href=”my.css”>  

3.Html式

<style type="text/css">@import url("css.css");></style>  

4.行内样式

<div style="color:red;font-size:12px;"></div>

总结:弄清楚ID选择器于Class选择器的区别,以及CSS的样式链接有哪几种,CSS的注释。

By:段亮(原创)-对自己的学习经验的总结

如果您觉得文章对你有帮助,可以进行打赏。
打赏多少,您高兴就行,谢谢您对段亮这小子的支持! ~(@^_^@)~

微信扫一扫 微信打赏

支付宝扫一扫 支付宝打赏

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客