CSS简介

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言

CSS语法

CSS主要由两个主要部分组成：选择器与一条或多条声明

1
选择器 {属性:值;...}

选择器是需要更改样式的HTML元素

每条声明由一个属性和一个值组成

属性是需要设置的样式属性，属性与值间用冒号隔开

1
2
3
4
p {
    color:red;
    text-align:center;
}

选择器

如果需要在HTML元素中设置CSS样式，一般来说我们可以在元素中设置id和class标签

1
2
<div id="text1">text1</div>
<div class="text2">text2</div>

id选择器

id选择器可以为标有特定id的HTML代码指定特定的样式

在CSS中id选择器以#就开头来定义

1
2
3
4
#text1{
    color:red;
    text-align:center;	
}

class选择器

class选择器可以用于描述一组元素的样式，class与id选择器不同处在于class选择器可以在多个元素中使用

在CSS中id选择器以.开头为定义，以下例子为应用在所有text2类的HTML元素

1
2
3
4
.text2 {
    color:red;
    text-align:center;
}

也可以指定某个元素使用class选择器，以下实例中即让p元素使用

1
2
3
4
p.text2 {
    color:red;
    text-align:center;
}

通配符选择器

通配符选择器可以选取页面中所有的元素（标签）

在CSS中，它使用*来定义

1
2
3
* {
    color:red;
}

通配符选择器不需要调用，会自动给所有元素使用样式

一般而言只有在特殊情况下才会使用，例如清楚所有的元素标签的内外边距

1
2
3
4
* {
    margin:0;
    padding:0;
}

分组选择器

使用,可以将不同的选择器组合在一起，它选择所有能被列表中的任意一个选择器选中的节点。语法A, B，A、B为不同选择器

1
2
3
4
5
div, span {
    width: 300px;
    height: 300px;
    background-color: blue;
}

CSS使用

插入CSS的方法有三种

  • 外部样式表
  • 内部样式表
  • 内联样式

外部样式表

如果样式表需要应用在多个页面的时候，外部样式表就是最理想的选择

通过在HTML文档头部使用<link>标签可以连接到样式表文件xxx.css

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

浏览器在渲染输出的时候会将style.css文件读取并格式化文档

内部样式表

当某个文档需要特殊样式时，就可以用到内部样式表

通过在HTML文档头部使用<style>标签在文档头部可以定义内部样式表

1
2
3
4
5
<head>
<style>
	p {margin-left:20px;}
</style>
</head>

内联样式

内联样式这种方法，一般会用仅需要在一个元素上应用一次的情况。由于内联样式要将央视哦与内容混在一起，会丢失样式表本有的优势，所以这种方式需要慎用

通过在标签内使用style属性，可以在标签中使用CSS样式

1
<p style="color:red;margin-left:20px">这是一个段落。</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

一般情况下，多重样式的优先级为

内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式

外部样式表

1
2
3
4
5
h3 {
    color:red;
    text-align:left;
    font-size:8pt;
}

内部样式表

1
2
3
4
h3 {
    text-align:right;
    font-size:20pt;
}

h3最终得到的样式

1
2
3
color:red;
text-align:right;
font-size:20pt;

字体 Font

字体系列 font-family

font-family 属性设置文本的字体，例如设置为宋体、黑体等

如果字体系列的名称超过一个字或者一个单词，它必须用引号，如Font Family：“宋体”。

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。CSS Web安全字体 | 菜鸟教程 (runoob.com)

1
p {font-family:"Times New Roman", Times, serif}

字体样式 font-style

该属性用于指定斜体文字的样式属性

这个属性有三个值：

  • normal - 正常
  • italic - 以斜体字显示的文字
  • oblique - 文字向一边倾斜（与斜体非常类似）

因为不是所有的字体都有斜体，italic 是使用文字的斜体，oblique 是让没有斜体属性的文字倾斜

oblique是可以设定字体倾斜的角度font-style: oblique 40deg;

1
2
3
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

字体大小 font-size

该属性用于设置文本的大小，合理管理文字的大小，在网页设计中是非常重要的

字体大小的值可以是相对大小或绝对大小，也可以是个固定的值，还可以是个基于父元素的百分比值

相对大小

  • 相对于周围的元素来设置大小
  • 允许用户在浏览器种改变文字大小

绝对大小

  • 设定一个指定大小的文本
  • 不允许用户在浏览器中改变文本大小
  • 确定了输出的物理尺寸时绝对大小很有用

绝对大小

1
2
3
4
5
6
7
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

相对大小

值 描述
smaller 把 font-size 设置为比父元素更小的尺寸。
larger 把 font-size 设置为比父元素更大的尺寸。

像素

像素(px)是网页中最常用的单位，同样的，我们也可以通过px作为固定值来设定我们字体的大小

1
p {font-size:14px;}

如果你不指定一个字体大小，默认大小和普通文本段落一样，为16px(1em)

字体粗细 font-weight

该属性用于设定字体的粗细

值 描述
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100、200、300…900 定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。
inherit 规定应该从父元素继承字体的粗细。

背景 Background

背景颜色 background-color

该属性定义了元素的背景颜色

颜色的值可以用以下方法定义：

  • 十六进制 例：“#ff0000”
  • RGB 例：“rgb(255,0,0)”
  • 颜色名称 例：“red”

页面的背景颜色使用在body的选择器上

1
body {background-color:red;}

<h1-h6>、<p>、<div>等等标签都可以通过自己的选择器调整各自的背景颜色

背景图片 backgroud-image

该属性定义了元素的背景图像，默认情况背景图像会平铺重复显示，覆盖整个元素实体

同样的，页面的背景图片设置也在body的选择器上

1
body {backgroud-image:url('xxx.jpg');}

平铺方式 background-repeat

我们可以通过background-repeat属性设置平铺方式

水平平铺

1
2
3
4
body {
    backgroud-image:url('xxx.jpg');
    background-repeat:repeat-x;
}

不平铺

1
2
3
4
body {
    backgroud-image:url('xxx.jpg');
    background-repeat:no-repeat;
}

图像定位 background-position

我们还可以通过background-position改变图像在背景的位置

1
2
3
4
5
body {
    background-image:url('img_tree.png');
    background-repeat:no-repeat;
    background-position:right top;
}

简写属性

由于背景需要通过多个属性来控制，为了简化这些属性的代码，我们可以将其合并为同一个属性中

当使用简写属性时，属性值的顺序为：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
1
body {background:#ffffff url('img_tree.png') no-repeat right top;}