HTML CSS(层叠样式)

CSS=样式+颜色

手动控制文字颜色和元素

用CSS给HTML添加样式

CSS的全写是 Cascading Style Sheets.

给HTML元素添加样式有三种方法:

行内样式-给HTML元素添加style属性
内部样式-在<head>标签内用<style>元素
外部样式-引用一个或更多的外部CSS文件

最普遍的添加样式方式是保持样式在不同的CSS文件里.但是在教程里我们用内部样式,因为内部样式容易演示,并且你自己也容易练习.

你会学到更多关于CSS的知识在我们的CSS教程部分.

行内样式(行内CSS)

内部样式用来给一个HTML文件定义样式.

内部样式在一个页面的<head>部分定义,在<style>元素里.

例子

外部样式(外部CSS)

外部样式表用来给很多HTML文件定义样式.

用外部样式表,只需要改变一个文件你就可以改变整个网站的显示.

用外部样式表,在HTML页的<head>部分添加一个链接.

例子

外部样式表可以用任何文本编辑器写.文件不应该包含任何HTML标签.样式表文件保存的扩展名为.css.

这是一个'styles.css'文件看起来的样子:

CSS 字体

CSS的color属性定义HTML元素里的文字颜色.

CSS的font-family属性给HTML元素的文字定义用什么字体.

CSS的font-size属性定义HTML元素里的文字大小.

例子

CSS盒子模型

每个HTML元素都有一个方框,即使你看不见它.

CSS的border属性给HTML元素定义一个可见的外框.

例子

CSS的padding属性给边框定义内边距.

例子

CSS的margin属性给边框定义外边距.

例子

上面的CSS例子用px(像素)定义大小.

id属性

上面的所有例子都是用CSS给HTML某一类型元素定义样式.

为了给某个特定的元素定义特殊的样式,首先给元素添加一个id属性.

然后给特定的元素定义样式.

例子

class属性

给元素定义特殊的样式类型(class),给元素添加一个class属性.

现在你可以给添加了class属性的元素定义不同的样式.

例子

用id属性定位一个单独的元素,用class属性定位一组元素.

本章小结

用HTML的style属性设置行内属性.
用HTML的<style>元素定义内部样式
用HTML的<link>元素引用一个外部的CSS文件.
用HTML的<head>元素包含<style>和<link>元素.
用CSS的color属性设置文字颜色.
用CSS的font-family属性设置文字的字体
用CSS的font-size属性设置文字的大小.
用CSS的border属性设置元素的可见边框.
用CSS的padding属性设置元素边框的内边距.
用CSS的margin属性设置元素边框的外边距.

HTML样式标签

标签	描述
<style>	给HTML文档定义样式信息
<link>	给HTML文档定义一个链接到外部CSS样式文件的链接.

评论区

()

21技术 www.21xrx.com 备案号：蜀ICP备17043188号-2

其它

提取图片文字免费的JetBrains license services json在线解析 base64加解密文章搜索