CSS样式基本知识-内联式CSS样式

2017年08月05日 08:41 | 58次浏览 | 分类: html+css教程

这一章节主要讲解与CSS样式相关的基础知识:CSS样式的位置及相关的优先级,为后面的CSS样式具体学习打下基础。

内联式css样式,直接写在现有的HTML标签中

CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。这一小节先来讲解内联式。

内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码:

<p style="color:red">这里文字是红色。</p>

注意要写在元素的开始标签里,下面这种写法是错误的:

<p>这里文字是红色。</p style="color:red">

并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。如下代码:

<p style="color:red;font-size:12px">这里文字是红色。</p>

练习

新建示例页面demo.html,示例代码如下:

我来试一试:使用内联式css样式为"超酷的互联网"这几个字设置字体颜色为蓝色

在示例代码中13行中的第一个span标签中写入代码:

style="color:blue"

示例代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
span{
   color:red;
}
</style>
</head>
<body>
    <p>V型知识库,<span>超酷的互联网</span>、IT技术聚合学习平台,本平台以电子书的形式展现给用户,<span>知识节点聚合</span>,章节清晰并结构化,给用户良好的阅读学习体验。!</p>
</body>
</html>



感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程


上一篇:
^