CSS学习.0（基础知识，一般格式，class,id

在html中链接CSS的方式：
```
link type="text/css" rel="stylesheet" href="stylesheet.css"
```
另外也可以在html的head标签中添加style标签来定义，不过这样就失去了把内容和表现分开的功能。
CSS中一般格式为：
```
selector {
    property: value;
}
```
注意，在CSS中，定义的每一行结尾都是带有分号的！
selector的内容可以是p,img,table等等等等，property可以是font-family,font-size这些内容，value自然就是property所对应的值。
例如，如果我想把html文件中段落里面的字体设置为garamond,18px,绿色，那么应该这样做：
```
p{
    color: green;
    font-family: Garamond;
    font-size: 24px;
}
```
在定义中，每个property后面可以带有多个value，除第一个外，后面的叫backup value，在使用中，浏览器会首先适配第一个value，如果无法适用(如无此对应的字体)，那么将会按顺序采用后面的backup value，直到能够适用为止。
PA：在实际使用中，合理添加backup value是明智的。
一个通过html和css设置按钮的方法：
在html中建立一个div标签，添加文字和链接，在css中设置它为适当的大小，并为其加入背景色。就造成了点击此区域能打开某链接的功能：
```
div{
    height: 50px;
    width: 120px;
    border-color: #6495ED;
    background-color: #BCD2EE;
    border-radius: 5px;
    margin: auto;
    text-align: center;
}
```
以上代码来自codecademy，实现了一个居中的按钮框。
html中标签的关系：
把html中的标签看成树状图，那么body和head两个标签无疑是最开始的两个分支，每一个分支对于之后的分支都为其parent，之后的分支都是他的child，同级别的分支互为sibling。
在CSS中，如果采用selector1 selector2 ... selectorN的方式，那么之后定义的内容会对html里所有满足该关系的标签起作用。例如：
```
div li p{
    font-weight:bold;
    color: #7ac5cd;
}
```
其会对所有只要是div里面的li标签里的p起作用，哪怕其真正的关系是div->ul->li->div->p，这段CSS代码同样会对后面的那个p其作用。如果只想影响到满足div->li->p的标签，即，direct childre，那么需要在CSS中用到“〉”符号，即：
```
div > li > p{
    font-weight:bold;
    color: #7ac5cd;
}
```
class和id:
在html文件中如果对于很多标签甚至是不同类型的标签想要设置相同的属性，那么可以使用class，具体用法是在标签中加上class="className"，然后在CSS中：
```
.className{
    font-weight:bold;
    color: #FFFFFF;
}
```
这样所有归为className的标签都将被这段CSS代码修改到。
而如果只想对某一个标签修改并且不想影响到其他同类的标签时，为其添加id无疑是最好的做法，具体用法类同class，即在标签中加上id="idName"，然后在CSS代码中：
```
#idName{
    font-weight:bold;
    color: #FFFFFF;
}
```
注意在CSS中，class名字前面要加“.”而id名字前面要加"#"。

作者：michaelxi007 发表于2013-11-24 21:28:25 原文链接

阅读：29 评论：0 查看评论

posted on 2013-11-24 21:28 清水老和尚阅读(175) 评论(0) 编辑收藏举报

刷新页面返回顶部

CSS学习.0（基础知识，一般格式，class,id

导航

公告