CSS基础复习

CSS组成

CSS格式由选择器(如p)属性(如background-color)属性(如red)值组成。

p{
    background--color:red;//以分号结尾
}

CSS保存位置有三种:

1.HTML标签的style属性(每个标签都有style属性)

<p style="color:red;">Hello</p>
2.HTML头标签内

<head>
  <style type="text/css">
    p{
      color:red;
    }
  </style>
</head>
3.独立CSS文件
<head>
  <link rel="stylesheet" type="text/css" href="demo.css">//rel代表relationship,href代表HypertextReference
</head>

CSS常用的三种选择器

1.HTML标签

p{
   color:red;
}
2.id

#myid{
   color:red;
}
3.class

.myclass{
   color:red;
}
css参考属性

CSS常用文本属性

1.color

color:red;

color:rgb(255,0,0);//红绿蓝 

color:#A26712;//以16进制表示红绿蓝,每2组表示一种颜色

2.font-size 

单位很多,一般采用像素

font-size:30px;

3.font-style

normal默认,正常的 

italic斜体,没有设计斜体字的文字不会显示斜体样式

oblique斜体,全部文字斜体显示

4.font-weight

normal默认,正常的

bold加粗

100-900,粗细值

5.line-height行高,行之间的间隔

line-height:20px

6.text-align文字对齐方式

text-align:center;

7.text-decoration设值下划线(underline)和删除线(line-through)

text-decoration:underline;

改写页面中链接的样式,不要下划线,替换默认颜色:

a{
   text-decoration:none;
   color:gray;
}
8.word-spacing字间距

word-spacing:20px;

CSS浮动

div默认是块元素,即 display:block;,各div分行显示。

可以将为display:inline-block让多个div并排显示。

position:static;不受top和left属性影响。

position:relative;默认,通过top和left属性来改变。

top:-10px;
left:20px;
position:relative;

position:absolute;

对父层容器元素的相对位置

float:right;向最右边移动、浮动,脱离原来的文档结构。

如果所有元素都浮动,则全部在一行并列显示。

若不让旁边元素出现浮动元素,使用clear:right;//可以用left,right,both

实例

HTML:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="description" content="my demo">
    <meta name="keywords" content="demo,helloword">
    <title>Demo</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
  </head>
 <body>
    <div id="head">
    </div>

    <div id="wrapper">
        <div class="main"></div>
        <div class="side"></div>
    </div>

    <div id="footer">
    </div>
 </body>
</html>

CSS:

body{
   background-image:url("a.jpg");//默认重复
}

#head{
   width:960px;
   height:100px;
   background-color:green;
   margin:auto;//居中
}

#wrapper{
   width:960px;
   height:500px;
   background-color:black;
   margin:auto;//居中
}

.main{
   width:660px;
   height:450px;
   background-color:white;
   float:left;//左浮动
}

.side{
   width:300px;
   height:450px;
   background-color:red;
   float:right;
}

#footer{
   width:960px;
   height:60px;
   background-color:blue;
   margin:auto;//居中
}

ref:

itercast

Iphone模拟器CSS3

你可能感兴趣的:(CSS基础复习)