美文网首页
HTML5中属性的继承

HTML5中属性的继承

作者: Alexander | 来源:发表于2016-03-15 11:11 被阅读937次

本章摘要 :

  • CSS有N多属性,根据继承性,主要可以分为2大类
    可继承属性
    父标签的属性值会传递给子标签
    一般是文字控制属性

不可继承属性
父标签的属性值不能传递给子标签
一般是区块控制属性

一, 可继承的标签

/**************可继承的标签*******************/
所有标签可继承
pvisibility、cursor

内联标签可继承
pletter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

块级标签可继承
ptext-indent、text-align

l列表标签可继承
plist-style、list-style-type、list-style-position、list-style-image

/**************不可继承的标签******************/

pdisplay、margin、border、padding、background
pheight、min-height、max-height、width、min-width、max-width
poverflow、position、left、right、top、bottom、z-index
pfloat、clear
ptable-layout、vertical-align
ppage-break-after、page-bread-before
punicode-bidi

二, CSS中常见的属性

<html>

<head lang="en">

<meta charset="UTF-8">

<title>CSS中常见的属性</title>

<style>

/*可继承的属性*/

body{

/*设置字体大小*/

font-size: 40px;

/*设置文字颜色*/

color: red;

/*设置字体加粗*/

font-weight: bolder;

}

/*块级标签*/

div {

/*复合性属性,可用于设置背景颜色和图片*/

background: url("images/7.jpg");

width: 200px;

height: 200px;

/*cover是用于设置图片的尺寸,让图片跟随标签的尺寸而显示*/

background-size: cover;

/*设置文字居中显示*/

text-align: center;

/*display和visibility都有隐藏内容的功能,但是两者之间的区别是,display隐藏内容后,所有的内容以及属性都会消失,但是visibility隐藏内容,但是它的高度和宽度一直都是存在的*/

/*display: none;*/

/*visibility: hidden;*/

/*设置光标显示的样式*/

cursor: pointer;

}

span{

background-color: blue;

width: 300px;

height: 200px;

/*设置行高,用于设置垂直居中*/

line-height: 300px;

}

a{

/*去除下划线*/

text-decoration: none;

}

ul{

/*将圆点设置为正方形*/

/*list-style: square;*/

/*将圆点删除掉*/

list-style: none;

}

#Alex{

/*超出标签的内存自动处理掉*/

/*overflow: hidden;*/

/*超出标签的内容全部添加到标签中*/

/*overflow: scroll;*/

/*overflow: inherit;*/

overflow: auto;

}

</style>

</head>

<body>

<p>AAAAAAAAAAAAAAA</p>

<span>BBBBBBBBBBBB</span>

<div>CCCC</div>

<a href="#">谷歌一下,您就知道了</a>

<div id="Alex">DDDDDDDDDDDDDDDDDDDDDDDDDDD</div>

<ul>

<li>William</li>

<li>William</li>

<li>William</li>

<li>William</li>

</ul>

</body>

</html>

相关文章

  • HTML5新增的通用属性

    一.HTML5新增的通用属性 1.contentEditable属性 contentEditable属性具有可继承...

  • HTML5中属性的继承

    本章摘要 : CSS有N多属性,根据继承性,主要可以分为2大类可继承属性父标签的属性值会传递给子标签一般是文字控制...

  • HTML5之placeholder属性以及如何更改placeho

    熟悉HTML5的人应该都知道,placeholder这个属性是HTML5中新增的属性,该属性的作用是规定可描述输入...

  • html表单

    html5 中的标签 其他标签 html中的属性

  • 拖放

    html5中draggable的属性 js中的拖放事件

  • css中的继承属性和非继承属性

    继承属性 字体系列属性font:组合字体font-family:规定元素的字体系列font-weight:设置字体...

  • ES的类与继承

    ES5中的类与继承 构造函数继承,原型继承,组合式继承 静态方法,静态属性,实例方法,实例属性 ES6中的类与继承...

  • 为HTML5 placeholder占位文字添加css样式

    placerholder属性是HTML5中的新属性。 定义和用法: placeholder属性提供可描述输入...

  • CSS基础样式

    一、什么是 CSS 继承?哪些属性能继承,哪些不能? CSS继承,就是指父元素中设置的属性,能够继承到子孙元素。 ...

  • 自定义属性 - 2018-05-15

    2018-05-15 创建 HTML5 data-* 自定义属性 HTML5中添加了data-的方式来自定义属性,...

网友评论

      本文标题:HTML5中属性的继承

      本文链接:https://www.haomeiwen.com/subject/mwtqlttx.html