您现在的位置是: 文字教程> 前端教程> HTML教程>

HTML教程第9课,HTMLCSS-

2019-03-22 11:33:034
HTMLCSSCSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。比如我们前面所学的给body加一个背景色。给p标签里面的文字改变颜色,这些都是用css做到的

HTMLCSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。比如我们前面所学的给body加一个背景色。给p标签里面的文字改变颜色,这些都是用css做到的


如何使用CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性

内部样式表 -在HTML文档头部 head 区域使用style 元素 来包含CSS


外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件,css文件指的是以 .css 结尾的文件,我们的html文件是以.html结尾的

在本站的HTML教程中我们使用了内联CSS样式来介绍实例,这是为了简化的例子,也使得你能更容易在线编辑代码并在线运行实例。

你可以通过本站的CSS教程 CSS 教程学习更多的CSS知识.


内联样式

内联样式就是在HTML 标签内部直接使用 style 属性直接定义,我们前面的课程也有提到,看下面的例子

内联样式


上面的css样式是将p标签里的文字变成黑色,然后文字往左边移动20px,px指的是像素

代码运行结果:

代码运行结果

内部样式表

当单个文件需要特别样式时,比如将两个P标签设成红色,如果用内联样式定义的话,需要在两个P标签都要写上css样式,如果是5,10<P>标签呢,是不是很麻烦,这就要用的我们的内部样式表。你可以在head部分通过 style标签定义内部样式表,像下面这样:

内部样式表


代码运行结果:

代码运行结果

外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。

外部样式表是用link标签引入一个外部css文件,使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

比如一个css文件里面定义的是把body的背景色变成黄色,h1标题变成红色,p变成蓝色,css文件如下

在当前文件下点击新建一个txt文件,然后把后缀名txt改为css,如style.css,然后把下面代码敲进去

外部样式表


在HTML文件引入用link引入css文件

link引入css文件

程序运行结果:

程序运行结果


HTML样式标签

标签描述
style定义文本样式
link定义资源引用地址

实例

我们前面学的a链接标签,下面是带着下划线的,我们用css样式把下划线去掉

css样式把下划线去掉

运行结果:

运行结果

访问我们的 CSS教程,学习更多有关样式的知识。

文章评论