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>

块状元素都将从新的一行开始，其后的元素也将另起一行。
元素宽度、高度、行高以及顶部、底部边距都可设置。宽度默认是父元素的100%。

内联元素和其它元素在同一行。
元素宽度、高度、行高以及顶部、底部边距都可设置。宽度就是包含的文字或者图片的宽度。

内联块状元素和其它元素在同一行。
元素高度、宽度、行高及顶部、底部边距都可设置。

display: none;

块状元素和内联元素都可以设置背景色 background-color。

border

border-bottom
border-top
border-left
border-right
border-radius
padding
margin

布局模型

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>

流动模型
浮动模型
层模型

  • 绝对布局
  • 相对布局
  • 固定布局

display: flex;
横轴对齐
justify-content: flex-start | flex-end | center | space-between | space-around;
竖轴对齐：
align-items: flex-start | flex-end | center | baseline | stretch;

给子元素设置flex属性（整数）和Android布局有点像，可以表示相对于父元素的占比。