龙空技术网

「测试开发全栈-HTML」(19)css的引入方式-行内样式表

蛋蛋杂谈 101

前言:

眼前看官们对“css如何引用图片”可能比较关切,姐妹们都想要分析一些“css如何引用图片”的相关资讯。那么小编在网上网罗了一些有关“css如何引用图片””的相关文章,希望我们能喜欢,看官们一起来了解一下吧!

上午讲了内部样式表,接下来说下行内样式表。什么是行内样式表呢:

行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式,适合于修改简单样式。

当HTML中有很多个段落时,如果只想修改其中一个段落,这时候就可以使用行内样式表了,来看看语法:

<div style="color:red;font-size:12px;">明月几时有 苏轼</div>

先看下如果只修改其中的一行,效果是怎么样的

最后一行字体,加粗/倾斜/字体大小/颜色都进行了修改

看下对应的代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS引入方式-行内样式表</title>

</head>

<body>

<p>明月几时有,把酒问青天。</p>

<p>不知天上宫阙,今夕是何年。</p>

<p>我欲乘风归去,又恐琼楼玉宇,高处不胜寒</p>

<p>起舞弄清影,何似在人间。</p>

<p>转朱阁,低猗户,照无眠</p>

<p>不应有恨,何时偏向别时圆。</p>

<p>人有悲欢离合,月有阴晴圆缺,此事古难全。</p>

<p style="color: blue;font-weight: bold;text-align: left;font-size: large;font-style: italic;">但愿人长久,千里共婵娟。</p>

</body>

</html>

小总结:

style其实就是标签的属性在双引号中间,写法要符合CSS规范可以控制当前的标签设置样式由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用。使用行内样式表设定CSS,通常也被成为行内式引入。

对标题再进行修改,看下效果:

看下对应的代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS引入方式-行内样式表</title>

</head>

<body>

<h3 style="text-indent: 2em;">明月几时有,苏轼</h3>

<p>明月几时有,把酒问青天。</p>

<p>不知天上宫阙,今夕是何年。</p>

<p>我欲乘风归去,又恐琼楼玉宇,高处不胜寒</p>

<p>起舞弄清影,何似在人间。</p>

<p>转朱阁,低猗户,照无眠</p>

<p>不应有恨,何时偏向别时圆。</p>

<p>人有悲欢离合,月有阴晴圆缺,此事古难全。</p>

<p style="color: blue;font-weight: bold;text-align: left;font-size: large;font-style: italic;">但愿人长久,千里共婵娟。</p>

</body>

</html>

可以看到style样式在h2标题中会有限制,一些样式是无法使用的。

好的,今天就先到这里了。

标签: #css如何引用图片 #行高怎么设置css #引入css样式常用的有方式 #引用css样式表的方式有哪些 #css引入样式