CSS3的魔法——写在前面

CSS 指层叠样式表 (Cascading Style Sheets)可以说是一个前端必不可少的技能之一。
那么你对它有多少了解呢?
每天三个属性和N个知识点串烧,同时这也是我个人笔记,希望可以帮助到大家,也可以提升自己。
和我一起,从常见属性,到复杂属性,一点点深入了解CSS3的神奇魔力吧。。。

注意:在这里我假设所有童鞋都有一定的XHTML、HTML知识,若你不了解相关知识,可以持续关注我的网站。

先从CSS书写格式说起

CSS书写格式相当简单,它由三个部分组成。
选择器名加一对花括号,花括号内部就是CSS语句块

p{/*CSS内容*/}
.class{/* CSS内容 */}
#id{ /* CSS内容 */ }

什么是选择器

在CSS中不带前缀的如:p、a、div等和HTML中的标签名一致的叫元素选择器
. 为前缀的如: .class、.abc、.row 等以 . 开头的叫类名选择器
# 开头的如:#id、#abc、#row等以 # 开头的叫id选择器
选择器的主要用于选择需要添加样式的元素。
当然我们的选择器不止这么几种,这里作为基础,不进行进一步展开,之后会开辟一篇详细解读一下CSS选择器的魔力。更新后我将会把链接放在这里。

CSS语句块书写规则

CSS语句书写规则,语句由 四部分组成 属性、: 、值、; 组成。
其中 : 用来分隔属性和值; 用来分隔两条语句 ,若属性有多个值的话,用空格来分隔多个值。格式如下面例子:

.class{ width:100px;} /*单个属性单个值,用:分隔属性和值,用;结束一条语句*/ 
.class1{border:10px solid red;}/*单个属性多个值,用空格隔开*/
.class2{
width:50px;
height:50px;
}/*可多行书写,属性必须要有对应的值,每条语句以;号作为结尾*/

注意:语句块中的内容均要使用英文的标点符号,注意书写规范,每条CSS语句都要以 ; 结尾,以免发生CSS样式不生效的情况

发表评论

电子邮件地址不会被公开。 必填项已用*标注