0%

CSS入门

CSS

CSS 用于指示 HTML 在浏览器中的显示样式。

CSS 组成

CSS 由选择符(选择器)与声明组成,声明由属性和值组成。

1
2
3
p {
color: blue;
}

注释

1
/* ... */

CSS 编写位置

1
<p style="color:red;font-size:12px">这里文字是红色。</p>
1
2
3
4
5
<style type="text/css">
span{
color: red;
}
</style>
1
<link href="style.css" rel="stylesheet" type="text/css" />

一般写在里

标签选择器

标签指 HTML 中的标签。

类选择器

指定 HTML 标签的class

1
<span class:"stress">黑色</span>

为该class编写 CSS 样式

1
2
3
.stress {
color: red;
}

ID 选择器

指定 HTML 标签的id

1
<span id:"stress">黑色</span>

为该id编写 CSS 样式

1
2
3
#stress {
color: red;
}

ID 选择器只能在 HTML 文档中使用一次,class可多次。

可用 类选择器为标签指定多个样式,id不可以。

子选择器

1
.food>li{border:1px solid red;}

指定标签的第一代子元素

包含选择器

通用

1
* {color:red;}

伪类

1
a:hover{color:red;}

分组

1
h1,span{color:red;}

文字

font-famliy font-size color font-weight font-style:italic

text-decoration: underline line-through

text-indent:2em

text-align: center left right

line-weight :2em

letter-spacing word-spacing

盒模型

在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有:

1
<div><p><h1>...<h6><ol><ul><dl><table><address><blockquote><form>

常用的内联元素有:

1
<a><span><br><i><em><strong><label><q><var><cite><code>

常用的内联块状元素有:

1
<img><input>

border

border-bottom

布局模型

Flow Float Layer

1
2
3
4
5
6
7
8
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>