CSS轮廓

围绕一个元素(outline),绘制一条线

p {border: 1px solid red;outline: thick dotted green;
}

<body><p><b>注意:</b>如果只有一个 !DOCTYP E指定 IE8 支持 outline 属性。</p>
</body>

设置轮廓的样式

p {border:1px solid red;}
p.dotted {outline-style:dotted;}
p.dashed {outline-style:dashed;}
p.solid {outline-style:solid;}
p.double {outline-style:double;}
p.groove {outline-style:groove;}
p.ridge {outline-style:ridge;}
p.inset {outline-style:inset;}
p.outset {outline-style:outset;}

<body><p class="dotted">点线轮廓</p>
<p class="dashed">虚线轮廓</p>
<p class="solid">实线轮廓</p>
<p class="double">双线轮廓</p>
<p class="groove">凹槽轮廓</p>
<p class="ridge">垄状轮廓</p>
<p class="inset">嵌入轮廓</p>
<p class="outset">外凸轮廓</p>
<p><b>注意:</b> 如果只有一个 !DOCTYPE 指定 IE 8 支持 outline 属性。</p>
</body>

设置轮廓宽度

p.one {border: 1px solid red;outline: 1px solid black;
}
p.two {border: 1px solid red;outline: thick dotted black;
}

<body><p class="one">This is some text in a paragraoh</p><p class="two">This is some text in a paragraph</p><p><b>注意:</b>如果只有一个 !DOCTYP E指定 IE8 支持 outline 属性。</p>
</body>

CSS边距

指定一个元素的边距

p {background-color: yellow;
}
p.size {margin: 50px 30px;
}

<body><p>这是一个没有指定边距大小的段落。</p><p class="size">这是一个指定边距大小的段落。</p>
</body>

文本顶部边距设置的值使用厘米

p.ex1 {margin-top:2cm;}

<body><p>一个没有指定边距大小的段落。</p>
<p class="ex1">一个2厘米上边距的段落。</p>
<p>一个没有指定边距大小的段落。</p></body>

使用百分比值设置文本的地步边缘

p.bottommargin {margin-bottom:25%;}

<body><p>这是一个没有指定边距大小的段落。</p>
<p class="bottommargin">这是一个指定下边距大小的段落。</p>
<p>这是一个没有指定边距大小的段落。</p></body>

CSS填充

p.ex1 {padding:2cm;}
p.ex2 {padding:0.5cm 3cm;}

<body>
<p class="ex1">这个文本两边的填充边距一样。每边的填充边距为2厘米。</p>
<p class="ex2">这个文本的顶部和底部填充边距都为0.5厘米，左右的填充边距为3厘米。</p>
</body>

CSS分组和嵌套

组选择器

h1,h2,p {color:green;
}

<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>

嵌套选择器

p {color: blue;text-align: center;
}
.marked {background-color: red;
}
p.marked {text-decoration: underline;
}

<body><p >这个段落是蓝色文本，居中对齐。</p><div class="marked"><P>这个段落不是蓝色文本。</P></div><P>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</P><p class="marked">带下划线的p段落</p>
</body>

转载于:https://www.cnblogs.com/Tony98/p/10964784.html

CSS轮廓 边距 填充 分组和嵌套相关推荐

  1. CSS 轮廓（outline）/CSS margin(外边距)/CSS padding（填充）

    所有CSS 轮廓(outline)属性 CSS margin(外边距) margin margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin 可以单独改变 ...

  2. W3school：CSS基础：CSS边框、CSS边距、CSS高度/宽度、CSS框模型、CSS轮廓

    W3school:CSS基础:CSS边框.CSS边距.CSS高度/宽度.CSS框模型.CSS轮廓 1.CSS边框(边框.边框宽度.边框颜色.边框各边.简写边框属性.圆角边框) 2.CSS边距(外边距. ...

  3. OpenCV的轮廓查找和填充

    OpenCV的轮廓查找有C版本和C++版本,当轮廓比较复杂的时候,例如嵌入多层轮廓,如果方法不当那么很容易会漏处理一些轮廓.本文介绍了复杂轮廓场景下的几种主要的查找轮廓和颜色填充方法. 1:cvFin ...

  4. html 背景不填充,CSS之背景的填充范围

    1.资料:CSS2.1 进行了更正:元素的背景是内容.内边距和边框区的背景 2.也就是说背景颜色,background-color:这些会填充内边距和边框border, 而不会填充外边框margin的 ...

  5. css外上边距怎么设置,css上边距怎么设置

    CSS设置上边距的方法一:使用margin-top属性 margin-top属性可以设置元素的上外边距 围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的"空白". ...

  6. 使用Python，OpenCV进行涂鸦（绘制文字、线、圆、矩形、椭圆、多边形轮廓、多边形填充、箭头~）

    使用Python,OpenCV进行涂鸦(绘制文字.线.圆.矩形.椭圆.多边形轮廓.多边形填充.箭头) 1. 效果图 2. 原理 2.1 绘制线:cv2.line(canvas, (300, 0), ( ...

  7. 教你玩转CSS 轮廓（outline）属性

    目录 CSS 轮廓(outline) 所有CSS 轮廓(outline)属性 CSS 轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. ...

  8. html中设置负边距的意义,css负边距之详解

    自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史.正因为此,从那以后CSS布局成为了优雅代码的代名词. 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功.这就 ...

  9. CSS轮廓样式属性为,简述CSS轮廓样式

    在网页设计中,如果你想突出一些元素,通常会怎么做?改变字体样式或者文本样式?除此之外,还有其他方法吗?答案是肯定的,这个方法就是今天小编想跟大家分享的内容--css的轮廓样式. 一.什么是轮廓 在CS ...

最新文章

  1. mysql create table()_MySQL Create Table创建表
  2. 极限编程 (Extreme Programming) 和用户故事 (User Stories) 的关系
  3. MinHook - 最小化的 x86/x64 API 钩子库
  4. 实现一个不能被继承的类
  5. 如何将本地项目上传至GitHub
  6. ReentrantLock之公平锁源码分析
  7. hadoop 入门实例【转】
  8. 统一管理MOSS2010用户头像
  9. VS2013在Release情况下使用vector有时候会崩溃的一个可能原因
  10. 立体视觉–stereo correspondence（双目立体匹配）
  11. phpcmsV9 添加内容：如何“增加复选框、下拉菜单”（含案例、截图）- 教程篇
  12. SqlServer2012自增主键跳跃增长的问题解决方案
  13. Oracle sql给一列赋值,简单的Oracle变量SQL赋值
  14. 《Groovy语言规范》-语法（一）
  15. python 修改文件名 修改日期_python实现批量修改文件名
  16. lldp协议代码阅读_软件实现LLDP协议HaneWin LLDP Service
  17. Hive教程(一) Hive入门教程
  18. 252个基本词根详解
  19. mysql 提高查询速度_6条策略提高mysql查询速度
  20. 来此加密证书申请,验证,自动部署

热门文章

  1. idea 模块jdk依赖总是自动变_解决IDEA中导入新的maven依赖后Language Level自动重置问题...
  2. 360浏览器没有声音_你用的浏览器好用吗？该国产电脑浏览器，极速、安全，值得使用...
  3. 前端开发的难点到底在什么地方?
  4. 零基础转行学习前端，需要学习哪些技术才可以找到工作吗？
  5. 怎么真正入行Web前端行业？JavaScript五大新特性是什么？
  6. 学习总结：JavaScript学习分享
  7. Servlet超详解+流程图
  8. java可选项_在Java中链接可选项8
  9. 百家号 python高手养成_python高手养成记04：python的所有数据类型，一篇足矣
  10. dos2unix命令找不到_Linux系统中的dos2unix命令