css行内样式不是内部样式。行内样式是通过style属性把CSS样式直接放在代码行内的标签中；而内部样式是将CSS样式写在网页源文件的头部head中，通过使用HTML标签中的“”标签将其包围。</p></blockquote> <p><img src="https://img.php.cn/upload/article/202107/15/2021071517382810042.jpg" alt="css行内样式是内部样式吗" ></p> <p>本教程操作环境：windows7系统、CSS3版、Dell G3电脑。</p> <p><span style="font-size: 18px;"><strong>行内样式</strong></span></p> <p>行内样式就是把 CSS 样式直接放在代码行内的标签中，一般都是放入标签的<code>style</code>属性中，由于行内样式直接插入标签中，故是最直接的一种方式，同时也是修改最不方便的样式。</p> <p>【示例1】针对段落、<h2> 标签、<em> 标签、<strong>标签以及 <div> 标签，分别应用 CSS 行内样式。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!doctype html> <html> <head> <meta charset="utf-8"> <title>行内样式</title> </head> <body> <p style="background-color: #999900">行内元素，控制段落-1</p> <h2 style="background-color: #FF6633">行内元素，h2 标题元素</h2> <p style="background-color: #999900">行内元素，控制段落-2</p> <strong style="font-size:30px;">行内元素，strong 比 em 效果要强</strong> <div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素，div 块级元素</div> <em style="font-size:2em;">行内元素，em 强调</em> </body> </html></pre><div class="contentsignin">登录后复制</div></div><p>页面演示效果如下图所示：</p><p><img src="https://img.php.cn/upload/image/571/663/539/1626341991719902.gif" title="1626341991719902.gif" alt="1.gif"/></p><p>在上面示例中，行内样式由 HTML 元素的 style 属性，即将 CSS 代码放入style=""引号内即可，多个 CSS 属性值则通过分号间隔，例如示例中 <div> 标签块级元素</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素，div 块级元素 </div></pre><div class="contentsignin">登录后复制</div></div><p>的编写，我们拋弃过去 HTML 结构和样式放在一起的写法，即<code><body bgcolor="#33ffff"></code>。</p><p>段落 <p> 标签设置背景色为褐色（<code>background-color: #999900</code>），标题 <h2> 标签设置背景色为红色（<code>background-color: #FF6633</code>）。</p><p><strong> 标签设置字体为 30 像素（font-size:30px;），<div> 标签设置高度和行高为 30 像素以及进行背景色、颜色的设置（<code>background-color:#66CC99; color:#993300; height:30px; line-height:30px;</code>），<em> 标签设置字体大小为相对单位（<code>font-size: 2em;</code>）。</p><p>两个段落 <p> 标签，虽内容不同，但使用一样的背景色设置，却添加两次 CSS 行内属性设置背景色 background-color: #999900。</p><p><h2> 标签、<p> 标签、<div> 标签为块级元素，设置其 CSS 属性，浏览器支持；<strong> 标签、<em> 标签为行内元素，设置其 CSS 属性，浏览器支持；故无论行内元素、块级元素，CSS 行内样式都有效。</p><p>总之，行内元素虽然编写简单，但通过示例可以发现存在以下缺陷：</p><ul style="max-width:90%"><li><p>每一个标签要设置样式都需要添加 style 属性。</p></li><li><p>与过去网页制作者将 HTML 的标签和样式糅杂在一起的效果，不同的是现在是通过 CSS 编写行内样式，过去釆用的是 HTML 标签属性实现的样式效果，虽方式不同但结果是一致的：后期维护成本高，即当修改页面时需要逐个打开网站每个页面一一修改，根本看不到 CSS 所起到的作用。</p></li><li><p>添加如此多的行内样式，页面体积大，门户网站若釆用这种方式编写，那将浪费服务器带宽和流量。</p></li></ul><p>网络上有些网页通过查看源文件可以看到这种编写方式，虽然一个网页只有一部分是如此做的， 但需要分情况：</p><ul style="list-style-type: disc;"><li><p>若网页制作者编写这样的行内样式，可以快速更改当前样式，不必考虑以前编写的样式冲突问题；</p></li><li><p>网页中若存在这种情况则是后台编辑时，通过编辑器生成的样式，或后台未开发完整，需为编辑人员开发可选择样式的选项而非通过编辑器直接改变颜色、粗细、背景色、倾斜等效果。</p></li></ul><p><span style="font-size: 18px;"><strong>内部样式</strong></span></p><p>内部样式通过将 CSS 写在网页源文件的头部，即在 <head> 和 <head> 之间，通过使用 HTML 标签中的 <style> 标签将其包围，其特点是该样式只能在此页使用，解决行内样式多次书写的弊端。</p><p>【示例2】为段落设置内嵌式样式书写方法，减少代码量。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!doctype html> <html> <head> <meta charset="utf-8"> <title>内部样式</title> <style type="text/css"> p{ text-align: left; /*文本左对齐*/ font-size: 18px; /*字体大小 18 像素*/ line-height: 25px; /*行高 25 像素*/ text-indent: 2em; /*首行缩进2个文字大小空间*/ width: 500px; /*段落宽度 500 像素*/ margin: 0 auto; /*浏览器下居中*/ margin-bottom: 20px; /*段落下边距 20 像素*/ } 测试文本！测试文本！测试文本！测试文本！测试文本！ 测试文本！测试文本！测试文本！测试文本！测试文本！ 测试文本！测试文本！测试文本！测试文本！测试文本！
