所以,HTML是编程语言吗?

CSS简介

什么是CSS

CSS指的是层叠样式表(Cascading Style Sheet),是用来对HTML文件进行布局和美化的。样式表定义如何显示 HTML 元素,就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

CSS语法

CSS规则由两个主要的部分构成:

  • 选择器selector(通常是需要改变样式的HTML元素)
  • 一条或多条声明

每条声明由一个属性和一个值组成。
属性(Property)是你所希望设置的样式属性(style attribute),每个属性有一个值,属性和值被冒号分开。

CSS选择器

如果你要在HTML元素设置CSS样式,你需要在元素中设置 idclass 选择器。

id选择器

id 选择器可以为标有特定id的HTML元素指定特定的样式,HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 # 来定义。

1
2
3
4
5
#title_text {
text_align: center;
font-size: 15px;
color: red;
}

class选择器

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。class选择器在HTML中以class属性表示, 在CSS中,类选择器以一个点 . 号显示:

1
2
3
.text_body {
text-align: center;
}

CSS链接

链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。特别的链接,可以有不同的样式,这取决于他们是什么状态。
这四个链接状态是:

  • a:link 正常,未访问过的链接
  • a:visited 用户已经访问过的链接
  • a:hover 当用户鼠标放在链接上时
  • a:active 链接被点击的那一刻

当设置为若干链路状态的样式,也有一些顺序规则:

  • a:hover 必须跟在 a:link 和 a:visited后面
  • a:active 必须跟在 a:hover后面

颜色修饰

1
2
3
4
a:link {color: #000000;}
a:visited {color: #00FF00;}
a:hover {color: #FF00FF;}
a:active {color: #0000FF;}

文本修饰
text-decoration 属性主要用于删除链接下面的下划线(这个非常实用!!!),链接默认是有下划线的。

1
a:link {text-decoration: none}

背景颜色
背景颜色属性指定链接背景颜色:

1
2
3
4
a:link {background-color: #B2FF99;}
a:visited {background-color: #FFFF85;}
a:hover {background-color: #FF704D;}
a:active {background-color: #FF70FF;}

CSS盒子模型

所有HTML元素可以看作盒子,在CSS中,”box model”这一术语是用来设计和布局时使用、CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model):

Box Model

不同部分的说明:

  • margin:外边距,清除边框外的区域,外边距是透明
  • border:边框,围绕在内边距和内容外的边框
  • padding:内边距,清除内容周围的区域,内边距是透明的
  • content:盒子内容,显示文本或者图像等内容

为了正确设置元素早所在浏览器中的高度和宽度,你需要知道盒子模型是怎样工作的。

元素的宽度和高度

元素最终总宽度计算公式:
元素总宽度 = 宽度 + 左填充(padding-left) + 右填充(padding-right) + 左边框 + 右边框 + 左边距(margin-left) + 右边距(margin-right)
元素总高度 = 高度 + 顶部填充(padding-top) + 底部填充(padding-bottom) + 上边框 + 下边框 + 上边距(margin-top) + 下边距(margin-bottom)

margin (外边距)

CSS中的margin属性定义元素周围的空间,这是CSS里面常用的属性之一。
margin 清除周围(外边框)元素区域,margin 没有背景颜色,是完全透明的,margin 可以单独的改变元素的上、下、做、右边距,也可以一次改变所有的属性。

margin

margin 单边外边距属性

1
2
3
4
5
6
7
8
/* 上外边距 */
margin-top: 100px;
/* 下外边距 */
margin-bottom: 100px
/* 左外边距 */
margin-left: 100px;
/* 右外边距 */
margin-right: 100px;

margin 属性简写

所有边距属性简写是:margin

1
2
3
4
5
6
7
8
9
10
11
/* 一个值:上下左右都是这个值 */
margin: 25px;

/* 两个值:上下边距25px, 左右边距50px */
margin: 25px 50px;

/* 三个值:上边距25px,左右边距50px,下边距75px */
margin: 25px 50px 75px;

/* 四个值:上边距25px,右边距50px,下边距75px,左边距100px */
margin: 25px 50px 75px 100px;

CSS padding (填充)

CSS padding 填充属性是一个简写属性,定义元素边框与元素内容之前的空间,及上下左右内边距。
当元素的padding(填充)内边距被清除的时候,所释放的区域将会被元素背景颜色填充。

padding

padding 的填充属性方法和margin 类似。

CSS position (定位)

元素可以使用top、bottom、left、right属性定位,但是这些属性并不会正常的工作,除非先设定position属性,position属性制定了元素的定位类型。
文档流(normal flow)
文档流实际上是文档的输出顺序,也就是我们看到的从上到下,从左到右的输出形式,在网页中每个元素就是按照这个顺序进行排序和显示的,文档流可以总结到如下几点:

  • normal flow 常规流、正常流、国内常称为文档流;
  • 窗体自上而下分成一行一行,并且再在每一行中按照从左到右的顺序进行排列;
  • 每个非浮动块级元素都独占一行,几乎所有元素(包括块级、内联合列表元素)均可生成子行,用于摆放子元素;
  • 有三种情况可以摆脱 normal flow 而存在,分别是:float、absolute、fixed

position 属性的五个值:staticrelativefixedabsolutesticky

static 默认值定位
static 是 position 的默认值(就是让元素按照文档流显示,不做任何改变),一般没有设置 position 属性时的缺省值,无特殊定位,对象遵循正常的文档流,top、bottom、left、right等属性不会被应用。

relative 相对定位
相对定位,对象遵循正常的文档流,但将依据 top、right、bottom、left 等属性在正常的文档流中进行偏移位置。
不脱离文档流布局,只改变自身的位置,在文档流原先的位置遗留空白区域,定位的起始位置为此元素原先在文档流的位置。
relative 的最大特点就是:自己通过定位跑开了还占着原来的位置,不会让给周围的对象,相对定位也比较独立,定位的时候是依照自己本身所在的位置进行偏移的,本身位置变了,但是元素最初所占的物理空间依旧存在,此外,本身位置发生偏移之后不会影响到相邻的元素,可以参照下图所示:

relative 定位

absolute 绝对定位
绝对定位,对象脱离正常文档流,使用 top、right、bottom、left 等属性进行绝对定位,而其层叠(层叠常出现在弹窗遮罩的时候)通过z-index属性定义。
元素位置被设置为 absolute 之后,被设置的元素会被定义到包含它元素的指定坐标(x,y)。
比如:

1
2
3
4
5
.position-test {
position: absolute;
left: 20px;
top: 80px;
}

position-test 这个容器始终位于浏览器左侧20px,距离浏览器顶部80px这个位置,它不会随着窗口的大小变化,只是固定在一个特定的坐标轴上。
absolute 定位的特定是:进行定位偏移之后,遗留下来得空间由后面的元素进行填充,这一点和 relative 定位有所不同,这也就意味着使用 absolute 进行定位的时候会对周围的元素造成影响。absolute 定位的起始位置为最近的父元素(position不为static的元素),否则为 Body 文档本身。

absolute 定位

fixed 固定位置
固定位置,对象脱离正常文档流,使用 top、right、bottom、left 等属性以窗口为参考点进行定位,当出现滚动条的时候,对象不会随着滚动。
固定位置的特点:有点类似 absolute 绝对定位,fixed 固定定位遗留的位置会被周围的元素进行填充,但是由于 fixed 固定定位是相对于窗口的,而不是像 absolute 绝对定位一样相对于父元素或者body,所以 fixed 固定位置不会随着滚动条进行滚动而改变位置。

fixed 位置

position 参考文章:
1. CSS Position 定位属性
2. CSS 中 Position 的用法详解
3. CSS属性之定位属性(图文详解)
4. CSS使用position:sticky 实现粘性布局的方法
5. CSS实现Sticky Footer的示例代码

CSS float (浮动)

写这个之前必须说一波,“脚本之家”貌似这类的文章还是很多的呀,质量还是阔以的。
前言:float 浮动属性设计初衷,居然只是为了实现文本文字环绕的效果,务必时刻牢记这一点。
由于 float 浮动元素脱离文档流,它后面的块级元素会忽略它的存在,从而占据它原来的位置,这一点和 absolute 和 fixed 很像, 但是这个块级元素中的内联元素,在流入页面时会考虑浮动元素的边界,它们会围绕着浮动元素。

float 浮动元素的特点:

  • 浮动元素脱离文档流
  • 浮动元素周围的外边距不会合并
  • 浮动元素具有包裹性
  • 浮动元素具有破坏性

float 属性

float 顾名思义就是浮动,float 有四个属性:

1
2
3
4
float: none;
float: left;
float: right;
float: inherit;

比较常用的连个属性就是:左浮动和右浮动
下面使用一个实例进行效果展示:

1
2
3
4
5
6
7
8
9
<div class="div-1">
<p>div-1</p>
</div>
<div class="div-2">
<p>div-2</p>
</div>
<div class="div-3">
<p>div-3</p>
</div>

下面对上面的div设置一些样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.div-1 {
width: 100px;
height: 100px;
background-color: cyan;
}
.div-2 {
width: 100px;
height: 100px;
background-color: skyblue;
}
.div-3 {
width: 100px;
height: 100px;
background-color: green;
}

效果展示如下:

div 效果展示

正常情况下,3个 div 会一次从上之下排列,下面我们使用 float 属性,并设置属性值。

1
2
3
4
5
6
7
/* 改变div-1的样式,添加float */
.div-1 {
width: 100px;
height: 100px;
background-color: cyan;
float: right;
}

效果如下:

div-1

div-1 跑到了右侧位置,这就是让它浮动到右侧的效果,下面将三个 div 都设置 float:left。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.div-1 {
width: 100px;
height: 100px;
background-color: cyan;
float: left;
}
.div-2 {
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
.div-3 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}

效果如下:

float-left

当我们把3个div都设置了向左浮动之后,就可以实现这种横排布局。修改CSS代码(div1的高度和div2的宽度),如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.div1 {   
width: 100px;
height: 130px;
background-color: cyan;
float: left;
}
.div2 {
width: 300px;
height: 100px;
background-color: skyblue;
float: left;
}
.div3 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}

效果如图所示:

自动调节

我们会发现,当div2足够宽,一行内放不下div3的时候,div3会自动从第二行开始布局。但是又由于div1的高度多了一些,所以div3会从div1的后面排布,而不会从头开始。

使用 overflow 清除浮动

1
2
3
4
5
6
7
.overflow-clear-float {
overflow: hidden;
}
/* 或者 */
.overflow-clear-float {
overflow: auto;
}

参考文章:
1. CSS使用float属性设置浮动元素的实例教程
2. 浅谈CSS浮动的特性
3. 深入理解css布局之定位与浮动

今天太累了,下次继续添加…..