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布局有点像,可以表示相对于父元素的占比。