CSS入门

CSS

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

CSS 组成

CSS 由选择符（选择器）与声明组成，声明由属性和值组成。

1
2
3

p {
    color: blue;
}

注释

/* ... */

CSS 编写位置

1	<p style="color:red;font-size:12px">这里文字是红色。</p>

<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

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>