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>

示例:
<!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 style="color:blue">xx网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>

</body>

</html>

内联式css样式，直接写在现有的HTML标签中的更多相关文章

  1. 外部式css样式，写在单独的一个文件中

    外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<l ...

  2. CSS的三种样式：内联式，嵌入式，外部式以及他们的优先级

    从CSS 样式代码插入的形式来看基本能够分为下面3种:内联式.嵌入式和外部式三种. 1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如以下代码: <p style=" ...

  3. 转载：CSS的组成,三种样式(内联式,嵌入式,外部式),优先级

    (仅供自己备份) 原文地址:http://blog.csdn.net/chq11106004389/article/details/50515717 CSS的组成 选择符/选择器+声明(属性+值) 选 ...

  4. 嵌入式css样式，写在当前的文件中

    现在有一任务,把下面的“超酷的互联网”.“服务及时贴心”.“有趣易学”这三个短词文字字号修改为18px. 如果用内联式css样式的方法进行设置将是一件很头疼的事情(为每一个<span>标签 ...

  5. 内联外联CSS和JS

    内联CSS 代码示例: <p style="color:red;font-size:18px">这里文字是红色.</p> 内联CSS也可称为行内CSS或者行 ...

  6. JavaScript的DOM_StyleSheet操作内联或链接样式表

    使用 style 属性,仅仅只能获取和设置行内的样式,如果是通过内联<style>或链接<link>提供的样式规则就无可奈何了,使用 getComputedStyle 和cur ...

  7. javascript 读取内联之外的样式(style、currentStyle、getComputedStyle区别介绍) (转载)

    样式表有三种方式: 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效.   (也称作“内联样式”) 内部样式(internal Style Sheet):是写在 ...

  8. 使用内联的 CSS 变量技巧，提高灵巧布局效率！

    作者:Ahmad shaded 译者:前端小智 来源:sitepoint 点赞再看,微信搜索**[大迁世界]**关注这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub github.com ...

  9. 响应式css样式

    <div class="a"> 123 </div> @media(orientation:portrait) and (max-width:600px){ ...

随机推荐

  1. wcf中的File-less Activation

    File-less Activation Although .svc files make it easy to expose WCF services, an even easier approac ...

  2. 【转】Adnroid4.0 签名混淆打包（conversion to dalvik format failed with error 1）

    原文网址:http://jojol-zhou.iteye.com/blog/1220541 自己的解决方法:关闭Eclipse,再开启Eclipse就可以. 最新Eclipse3.7+android ...

  3. HDU 5916 Harmonic Value Description 【构造】(2016中国大学生程序设计竞赛(长春))

    Harmonic Value Description Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Ja ...

  4. unity3d Human skin real time rendering plus 真实模拟人皮实时渲染 plus篇

    最近逃课做游戏,逃的有几门都要停考了,呵呵呵,百忙之中不忘超炒冷饭,感觉之前的人皮效果还是不够好,又改进了一些东西 首先上图 放大看细节 显而易见的比上次的效果要好很多,此次我把模型用3dmax进行了 ...

  5. 《A First Course in Mathematical Modeling》-chaper2-建模过程、比例性及几何相似性

    这一章节着重从整体的层面给出数学建模过程中一个泛式流程,它给出了在给现实模型建立数学模型的框架性思路,但是需要注意的是,虽然这里称其为一种“泛式”思路,但是在具体的问题的分析中,整个建模过程还是充满了 ...

  6. 大众点评网王宏：从.Net迁移向Java平台 - 51CTO.COM

    大众点评网王宏:从.Net迁移向Java平台 - 51CTO.COM 大众点评网王宏:从.Net迁移向Java平台

  7. AWK调用SHELL，并将变量传递给SHELL

    在Shell脚本中调用awk是非常自然和简单的,以前还写过一个关于awk/shell相互传递变量的文章:awk与shell之间的变量传递方法在awk脚本中,如果需要调用shell脚本/命令,则需要使用 ...

  8. hdoj 2094 产生冠军

    产生冠军 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  9. UVa1628 UVaLive5847 Pizza Delivery

    填坑系列(p.302) 既然不知道后面还要卖多少个就加一维状态嘛.. lrj写的O(n)转移?其实转移可以O(1) 貌似按x排序有奇效? #include<cstdio> #include ...

  10. 快速设计一个简单的WPF串口上位机

    最近一直在学习UWP,其中有的技术参考了WPF,所以又回头再来学习WPF,感觉学的东西很杂,必须记录一下,不然时间长了还得忘掉,于是申请开始写博客,将学习的心得记录一下,以备后用.这次是因为公司内训, ...