CSS 学习

1.运用


   
   


2.HTML有标签，CSS有选择器。选择器是给内部和外部样式里面的样式命名。
　　每个选择器都有属性在{}里面，比如简单点像color,font-weight或background-color。
　　值在冒号（不是等号）后面，分号分离属性。

body {
    font-size: 0.8em;
    color: navy;
}

3.长度

长度和百分比

　　CSS里面有许多属性值要指定单位，但有些基本单位被使用在一些属性上，在这之前值得属性下它们。
　　em比如font-size:2em给于字体计算出的大小，所以2em就是实际字体大小的两倍。
　　px比如font-size:12px是pixel像素的单位。
　　pt比如font-size:12px是points镑的单位。
　　%比如font-size:80%是百分比
　　其他单位包括pc（12点西文活字）、cm（厘米）、mm（毫米）和in（英寸）

　　当值是零的时候，不需要单位，例如：border:0意思没有边框。

　　网页不是静态的、绝对的媒体。这意味着内能伸缩变形，用户应该被允许调整自己喜欢的方式，包括字体大小和屏幕大小。

　　因为这样，建议使用"em"和"%"在font-size上（宽度和高度），相比下px不能够在大部分浏览器改变大小，所以要少用，可以用在边框的大小上。

4.颜色

     css可以处理16,777,216颜色，可以使用名字、rgb值或十六进制代码。


red红色
等同于
rgb(255,0,0)
等同于
rgb(100%,0%,0%)
等同于
#ff0000
等同于
#f00
有17个预先确定的颜色，它们是：
　　aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
　　olive, orange, purple, red, silver, teal, white, and yellow.
　　transparent 也是一个正确的值。

　　rgb的三个值都是从0到255，0是最低级，255是最高级，这些值同样可以是百分比。

　　我们通常使用10进制即0-9，但hexadecimal使用16进制，即0到f。

　　十六进制三或六个数字长度前面带上#字符，三个长度是六个的压缩形式，比如#f00是ff0000的压缩，#c96是#cc9966。三位数很好理解，像rgb，第一个是红色，第二个是绿色，第三个蓝色。但六位数给于更多的颜色控制。
color和background-color

　　颜色可以使用color和background-color，是美国英语中"color"不是"colour"。
　　蓝色背景，黄色文字：


   Example Source Code [www.52css.com]
h1 {
    color: yellow;
    background-color: blue;
}

5.字体
font-family
  文字使用的字体，比如宋体，Times New Roman，Arial等等
font-size

　　字体的大小，要小心使用。比如标题不会和段落一样，它要用大字体，你可以使用h1h2等等。
font-weight

　　这个属性决定字体是否加粗。在实际运用中通常使用font-weight: bold或font-weight: normal。理论上还可以使用bolder,lighter,100,200, 300, 400, 500, 600, 700, 800 or 900，但有些浏览器不认，仍坚持bold和normal。
font-style

　　这个属性决定字体是否是斜体，可能是font-style: italic或font-style: normal。
text-decoration

　　这个属性决定是文本否需要下划线。可以是：


   Example Source Code [www.52css.com]
　　text-decoration: overline，加上划线
　　text-decoration: line-through，加通过文本的线条。
　　text-decoration:underline，这应该使用在链接上，因为用户习惯认为它代表链接。
text-transform改变文本的情况。


   Example Source Code [www.52css.com]
text-transform: capitalize ，让每个字的第一个字母大写。
text-transform: uppercase ，所有大写。
text-transform: lowercase，所有小写。
text-transform: none; ，这个属性不起作用。
Text spacing

　　letter-spacing和word-spacing属性的意思是字母和文字之间的间隔。值可以是长度或normal。

　　line-height属性设定元素的行高，比如一个段落，没有调准字体的大小。它可以是数字（字体大小的倍数），长度，百分比或normal。

　　text-align设定元素位置，left,right,center或justify。

　　text-indent属性缩进段落的首行。这在打印时经常设置，但网页里通常用不上。


   Example Source Code [www.52css.com]
p {
    letter-spacing: 0.5em;
    word-spacing: 2em;
    line-height: 1.5;
    text-align: center;
}

6.间隔
margin和padding用来隔开元素，margin是隔开元素与外边，padding是隔开元素里边。

h2 {
    font-size: 1.5em;
    background-color: #ccc;
    margin: 1em;
    padding: 3em;
}

h2 {
    font-size: 1.5em;
    background-color: #ccc;
    margin: 1em;
    padding: 3em;
}

　　元素四边可以设置的属性：margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left

7.CSS Borders 边框

　　边框可以运用到body里的大部分HTML元素。
　　制作一个元素的边框，你需要border-style边框样式。值可以是： solid, dotted, dashed, double, groove, ridge, inset and outset，具体样式大家可以实际下。
　　border-width设定宽度，通常使用pixels即单位是px，同样有四边属性：border-top-width, border-right-width, border-bottom-width and border-left-width。
　　border-color设定边框颜色。

8.class 及ID选择器
在CSS里，使用点号（.）创建class选择器，使用hash符号（#）创建ID选择器。

#top {
    background-color: #ccc;
    padding: 1em
}

.intro {
    color: red;
    font-weight: bold;
}

　　html页面通过id和class属性调用CSS，像下面这样：


   Example Source Code [www.52css.com]


Chocolate curry

This is my recipe for making curry purely with chocolate


Mmm mm mmmmm




id 在一个页面中只能用一次，而class可以用很多次！二者效果类似

9.Grouping 分组

　　当许多选择器有同样属性时，可以使用逗号组合它们。

h2 {
    color: red;
}
.thisOtherClass {
    color: red;
}
.yetAnotherClass {
    color: red;
}
上面的可以写成这样：


   Example Source Code [www.52css.com]
h2, .thisOtherClass, .yetAnotherClass
{
    color: red;
}
Nesting 嵌套

　　如果CSS结构良好，不需要使用很多class或ID选择器。这是因为CSS可以设定选择器里面选择器的属性。
　　例子：

   Example Source Code [www.52css.com]
#top {
    background-color: #ccc;
    padding: 1em
}
#top h1 {
    color: #ff0;
}
#top p {
    color: red;
    font-weight: bold;
}

　　如果你碰到下面这样的形式，记得处理掉你网页上的class或ID。


   Example Source Code [www.52css.com]

    
Chocolate curry

    
This is my recipe for making curry purely with chocolate


    
Mmm mm mmmmm





10.CSS的Pseudo Classes 伪类

   伪类像是指定选择器状态或关联选择器的门闩。它们的形式如：selector:pseudo class { property: value; }，在选择器和伪属性之间使用冒号。

　　link 没有点击过的链接
　　visited以点击过的链接
　　active获得焦点时的链接（比如在点击时）
　　hover 鼠标在链接上面

a.snowman:link {
    color: blue;
}
a.snowman:visited {
    color: purple;
}
a.snowman:active {
    color: red;
}
a.snowman:hover {
    text-decoration: none;
    color: blue;
    background-color: yellow;
}

11.CSS的属性缩写

一些CSS属性允许使用一串值代替许多属性，值使用空格分开。

　　margin,pdding和border-width允许合并margin-top-width, margin-right-width, margin-bottom-width等等，形式像这样：property:top right bottom left;逆时针顺序。

   Example Source Code [www.52css.com]
p {
    border-top-width: 1px;
    border-right-width: 5px;
    border-bottom-width: 10px;
    border-left-width: 20px;
}

　　可以写成：


   Example Source Code [www.52css.com]
p {
    border-width: 1px 5px 10px 20px;
}

border-width,border-color,border-style同样可以合并到一起，例如：


   Example Source Code [www.52css.com]
p {
    border: 1px red solid;
}
（同样可以运用到border-top,border-right等等）
　　如果只使用两个值（比如margin: 1em 10em;），第一个值包括顶部和底部，第二个值包括左右。

　　字体属性同样可以使用font属性合并。

   example Source Code [www.52css.com]
p {
    font: italic bold 1em/1.5 courier;
}

　　（上面"/1.5"是 line-height的值）
　　把它们总结在一起，试下下面的代码：