CSS简明教程

CSS语法

如同下面形式p {color:red;text-align:center;}

CSS由选择器和{}包含的声明组成。每条声明必须由;结束，是一个由:分隔的键值对。

HelloWord程序

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p
{
    color:red;
    text-align:center;
} 
</style>
</head>

<body>
<p>Hello World!</p>
<p>这个段落采用CSS样式化。</p>
</body>
</html>

CSS的HelloWorld程序

效果是所有的<p>标签的内容都变红和居中

CSS选择器

id选择器

#para1
{
    text-align:center;
    color:red;
}

使用

<p id="para1">Hello World!</p>

class选择器

选择器名字由.开头

.center
{
    text-align:center;
}

使用

<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>

p.center {text-align:center;}    选择class为center的p标签元素

标签选择器

选择器名称使用标签名，比如p,h1,div，表明相应的标签会匹配对应css。

p {color:red;text-align:center;}

嵌套选择器

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

复合标签选择器

/*选择并设置所有 <h1> 样式和所有 <p> 元素的样式：*/
h1,p
{ 
background-color:yellow;
}

/*选择并设置位于 <div> 元素内部的每个 <p> 元素的样式*/
div p
{ 
background-color:yellow;
}

/*选取父元素是 <div> 元素的每个 <p> 元素，并设置其背景色*/
div>p
{ 
background-color:yellow;
}

/*选择 <div> 元素之后紧跟的每个 <p> 元素，并设置其背景色*/
div+p
{ 
background-color:yellow;
}

//选择器
http://www.w3school.com.cn/cssref/css_selectors.asp

插入样式表

外部

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

mystyle.css内容可能如下

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

内部

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

优先级：内联>内部>外部

背景

body
{
background-color:#6495ed;
background-image:url('img_tree.png'); /*有图片会覆盖颜色背景*/
background-repeat:no-repeat;/*默认在X和Y轴方向重复，值还有repeat-x,repeat-y*/
background-position:right top;/*图片位置，其他值参考
http://www.runoob.com/cssref/pr-background-position.html*/
background-attachment:fixed;/*图片是否随滚轮滚动，默认值scroll*/

}

文本

.myclass
{
color:#00ff00;
text-align:center;/*文本居中，right，文本靠右，justify，所有行宽度相等，左右*/
text-decoration:overline;/*文字上方有线，还有line-through，underline*/
text-transform:uppercase;/*还有lowercase，capitalize*/
text-indent:50px;/*首行缩进*/
}

字体

.myclass
{
font-family:"Times New Roman",Times,serif;
/*font-family:Arial,Helvetica,sans-serif;*/
font-style:normal;/*italic,oblique*/
font-size:40px;
font-size:2.5em;/*1em的默认大小是16px*/
font-size:100%;/*使用百分比，默认字体大小16px*/

}

链接

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */


/*注意顺序*/
/*例子2*/
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

列表

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
 
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

 /*use image*/
ul
{
    list-style-image: url('sqpurple.gif');
}

表格

table,th,td
{
    border:1px solid #00ff00;
}
/*此表格为绿色双边框,如果需要边框为单线条边框，增加*/
table
{
    border-collapse:collapse;
}

/*表格宽度和高度*/
table 
{
    width:100%;
}
th
{
    height:50px;
}
/*表格颜色*/
table, td, th
{
    border:1px solid green;
}
th
{
    background-color:green;
    color:white;
}

盒子模型

CSS box-model

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

边框

    border-style:solid;
/*其他值dotted,dashed，groove,*/
    border-5px;
border-color:#98bf21;
/* 边框四周风格可以单独设置*/
border-right-style:solid;

例子

<p>两个不同的边界样式。</p>
<style>
p
{
border-bottom: 1px solid #ccc;padding:14px;border-color: #f44336;
}
</style>

{border: 1px solid #ccc;padding:14px;border-radius: 16px;}

{background-color: #ddffff;padding: 14px;border-left: 6px solid #ccc;border-color: #2196F3;}

Margin 和Padding

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

/*简写
margin后面可以是1~4 个数值
1:四个外边距都是这个值
2：上下， 左右
3：上，左右，下
4：上，右，下，左

*/
padding 同理

显示隐藏，块和内联

/*隐藏元素的两种方法*/
{visibility:hidden;}/*空间依然占用*/
{display:none;}/* 不占用空间*/

块元素是一个元素，占用了全部宽度，在前后都是换行符，可设置宽和高。

块元素的例子：

<h1>
<p>
<div>
li、dt、dd

内联元素只需要必要的宽度，不强制换行，不能设置宽和高。

内联元素的例子：

<span>
<a>
b、i、u、em

 /*把列表作为内联*/
li {display:inline;}

/*把span作为block*/
span {display:block;}

定位

{
position:XXX;
left:32px;
}
XXX可以是static,fixed,relative,absolute,sticky
/*
static 是默认值
fixed相对于浏览器窗口的位置
relative相对于元素本来应该的位置
absolutex相对于最近定位父元素，如果没有就是html
sticky在relative和fixed之间
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
*/

浮动

一般用于图像，img { float:right; }

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

对齐

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中:

img {
    display: block;
    margin: auto;
    width: 40%;
}