首页 > 其他分享 >CSS三中样式(简单的代码)

CSS三中样式(简单的代码)

时间:2022-08-28 22:56:19浏览次数:45  
标签:内嵌 行内 样式 100px 三中 CSS div css

三中的使用方法的简单实例如下:

行内样式:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css行内样式</title>
</head>
<body>
<div style="width:100px;height:100px;background:red;"></div>>

</body>
</html>

内嵌样式:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css内嵌样式</title>
</head>
<body>
<style type="text/css">
#div{width:100px;height:100px;background:red;}
</style>
<div id="div"></div>>

</body>
</html>

外部式:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css内嵌样式</title>
<link rel="stylesheet" type="text/css" href="ccss.css">
</head>
<body>
<div id="div"></div>>

</body>
</html>
(12tebing.com)css文件

#div{width:100px;height:100px;background:red;}

简言之:

行内样式:就是代码写在具体网页中的一个元素内;比如:<div style="color:#f00"></div>

内嵌式:就是在</head>前面写;比如:<style type="text/css">.div{color:#F00}</style>

外部式:就是引用外部css文件;比如:<link href="css.css" type="text/css" rel="stylesheet" />

标签:内嵌,行内,样式,100px,三中,CSS,div,css
From: https://www.cnblogs.com/bkycnd/p/16634351.html

相关文章

  • 常用样式
       <!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样式的绑定操作,主要分为字符串,数组,对象等方式,这个非常好理解,凭着我们朴素的情感就能一步领悟到位的,就还是演示一段吧.字符&......
  • js删除css样式
    js删除css样式_百度知道 https://zhidao.baidu.com/question/680409425108037292.html 1、如果使用class加的样式的话,可以使用document.getElementById("objid......