某人专用教程（第3天）—— CSS基础

今天讲讲css的基础。先来回顾下昨天的内容。html展示给用户的是一堆数据。css是为了让这些数据展示的更漂亮一些。

css可以做的事情：

 

• 定义布局。包括左右结构啊，左中右结构之类的。
• 定义元素样式。比如文字的颜色，背景色，背景图之类的。
• 定义元素与元素之间的边距。比如内边距，外边距。

 

css的基本语法是：

 

选择器{

属性1: 属性值1;

属性2: 属性值2;

}

 

其中，常用的选择器包括：

 

• ID选择器 
• Class选择器
• 标签选择器(更文艺的说法是：派生选择器)

 

听起来挺文艺的。转化成普通的说法就是：

 

如果HTML为：

<div id="temp">abc</div>

  

要在css中给这个div的背景色变成黑色，就行需要写

#temp{

background-color: #000000;

}

因为用了id，就叫做id选择器。用法是：用"#"开头加上id的属性值。来选取这个div。

 

如果HTML为：

<div class="temp">abc</div>

 

要在css中给这个div的背景色变成红色，就行需要写

.temp{

background-color: #ff0000;

}

 

因为用了class，就叫做class选择器。(class也翻译成“类”)。用法是：用"."开头加上class的属性值。来选取这个div。

 

这时候，会有这样的的2个疑问了吧。

 

1，如果html中，id和class都可以做同一个事情，那么我们为什么要区分这两个呢？什么时候用id？什么时候用class？

 

根据所谓的经验，如果只用来描述元素或者页面的样式，在实际项目中，通常全部用class表示。首先，id在页面中是唯一的，一个可能有几百个甚至几千个标签。但是id在一个页面上只能出现一次。

 

而class，允许多次出现。也就是，如果你定义了一个class名叫做red，而在css文件中写入.red{color:red;}。那么，只要调用了这个class的元素，文字颜色都会变成红色啦。

 

id通常在写js的时候用到。通过一个叫做getElementById()的语句，在js中获取本页面中唯一的一个元素。

 

2B点儿的说法，id相当于身份证号，一个人就一个，如果俩人重复了，证明其中一个人的身份证是假的。也说不定俩人都是假的。 class相当于人名。马路上喊一声什么刘洋李娜之类的名字，总会有那么几个人回头的。。。

 

2，如果html写成

<div class="temp"  id="temp">abc</div>，

而css写成

#temp{

background-color: #000000;

}

.temp{

background-color: #ff0000;

}

那么，这个div的背景色到底是红色？还是黑色呢？

 

这些问题，自己试验吧！答案明天分解。

 

标签选择器 就是指一个元素上，如果既没有id也没有class做标识，那么需要控制这个元素的样式，可以用这个元素本身的标签。

 

 

如果HTML为：

<div>abc</div>

 

 

要在css中给这个div的背景色变成红色，因为什么div上没有任何可以用来标识这个div的属性，为了控制这个div，就需要写

div{

background-color: #ff0000;

}

前面什么都不加。

 

我通常只在多级标签上，用到这种选择器方式。这个以后再讲吧~~暂时知道有这个就行了。。虽然我知道你会。估计我的进度有点儿慢。。

 

今天留个作业：自己google去下载一份《css参考手册》。目前用css2就行了。麻烦抽个10分钟把目录过一下，光看英文单词都能猜出大部分的意思了吧！

 

推荐中文教程：

http://www.w3school.com.cn/css/

 

这里讲了大部分css的内容。。。。可以先看着。我会挑部分讲解的。

 

 

明天开始做demo了哦~~~