首页 > 其他分享 >CSS 行内几种样式

CSS 行内几种样式

时间:2022-08-28 22:58:11浏览次数:70  
标签:行内 样式 标签 HTML 设置 CSS

什么是行内样式
行内样式,其实从它的名字就可以看出来它的特点,就是直接在HTML标签中使用style属性设置CSS样式。

例如像下面这样的:

<p style="font-size: 18px;">行内样式</p>

HTML 中的 style 属性提供了一种改变所有 HTML 元素样式的通过方法,语法格式如下所示:

<标签 style="样式声明1;样式声明2;样式声明3"></标签>

要记得用在每个样式声明之间使用分号;分隔哟,否则样式会失效的。

示例:
例如下面这段代码,通过CSS行内样式,将第一个段落中的字体设置成了20px,颜色为红色,加粗显示。第二个段落中的字体大小设置为16px,颜色为绿色,倾斜显示:

<!DOCTYPE>
<html>
    <head>
    	<meta charset="utf-8">
        <title>休学网(1xiuxue.com)</title>
    </head>
    <body>
       <p style="font-size: 20px;color: red;font-weight: bold;">休学网欢迎你!</p>
       <p style="font-size: 16px;color: green;font-style: italic;">休学网欢迎你!</p>
    </body>
</html>

总结
行内样式用起来其实很简单,并且很方便,直接通过style属性在HTML标签中设置样式即可。但是行内样式仅对当前的HTML标签起作用,也就是说,如果我们希望多个标签使用同一个样式,则需要设置多次。
行内样式都是写在HTML标签中,因此这种方式不能使内容与表现分离,本质上没有体现出CSS的优势。
如果在一个大的应用中所有标签都使用行内样式,不仅代码冗余,后期的维护也会很大,所以不推荐使用这种方式来设置样式。

CSS借用网站:http://www.1xiuxue.com/

标签:行内,样式,标签,HTML,设置,CSS
From: https://www.cnblogs.com/bkycnd/p/16634344.html

相关文章

  • CSS三中样式(简单的代码)
    三中的使用方法的简单实例如下:行内样式:<!doctypehtml><html><head><metacharset="UTF-8"><title>css行内样式</title></head><body><divstyle="width:100px;h......
  • 常用样式
       <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>css常用样式</title><styletype="text/css">div{color:red;......
  • css
    <!--这个是html的注释,而/**/这个是css的注释,不同注释使用于不同的地方--><!--link标签专门用来引入css样式代码-->  <!--style标签专门用来定义css样式代码-->......
  • 在 CSS 中使用媒体查询
    在CSS中使用媒体查询CSS中的媒体查询改变了网站的整体功能和响应能力。它们有点像“if”语句,例如,如果视口宽度是这个大小或更低,那么就改变它。媒体查询主要用于使网站......
  • uniapp使用css实现固定横屏
    由于h5无法使用app-plus的属性,只好通过样式实现直接上代码html<view:class="islandscape?'preview-maintrans':'preview-main'"><u-iconname="arrow-left"......
  • 关于vue的css样式对js动态添加的dom节点不生效问题的解决方法
    一、问题描述开发的时候免不了有时候需要向某个节点appendchild,添加子节点,但是如果是在vue中,就会发现通过操作dom的appendchild方式添加节点会出现样式对这些新增的节点......
  • CSS display 属性
    CSSdisplay属性|菜鸟教程 https://www.runoob.com/cssref/pr-class-display.htmlCSS display 属性实例设置段落生成一个行内框:p.inline{display:inline;......
  • 如何给shadow DOM下的元素添加样式
    一、问题描述项目中在dom结构里遇到了shadow-DOM(open),如下是一个表格组件,主要感觉滚动条有点low,需要自定义但发现自己写的样式渗透不进去╮(╯▽╰)╭ShadowDOMSh......
  • CSS 设置滚动条样式 ::-webkit-scrollbar
    ::-webkit-scrollbar仅仅在支持WebKit的浏览器(例如,谷歌Chrome,苹果Safari)可以使用.::-webkit-scrollbar—整个滚动条.::-webkit-scrollbar-button—滚动条上......
  • vue3 基础-样式绑定语法
    本篇讲vue通过数据去进行dom样式的绑定操作,主要分为字符串,数组,对象等方式,这个非常好理解,凭着我们朴素的情感就能一步领悟到位的,就还是演示一段吧.字符&......