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的值)
  把它们总结在一起,试下下面的代码:
阅读更多

没有更多推荐了,返回首页