CSS中的继承属性和非继承属性(原文传送门:点击详情)
CSS参考手册: https://www.w3cschool.cn/cssref/css-reference.htmlcss样式继承规则详解: https://www.cnblogs.com/Renyi-Fan/p/9225805.html(笔记+理解)
一、无继承性的属性
属性 | 描述 |
---|---|
display | 规定元素应该生成的框的类型 |
属性 | 描述 |
---|---|
vertical-align | 垂直文本对齐 |
text-decoration | 规定添加到文本的装饰 |
text-shadow | 文本阴影效果 |
white-space | 空白符的处理 |
unicode-bidi | 设置文本的方向 |
-
下面是举例,更为详细可自行百度,比较难搞的是
- ①vertical-align到底怎么用;
- ②Vertical-Align,你应该知道的一切。
vertical-align
。
vertical-align:text-top;
text-decoration:none;
text-shadow: 5px 5px 5px #FF0000;
white-space: nowrap;
/*unicode-bidi 属性与 direction 属性一起使用,来设置或返回文本是否被重写,以便在同一文档中支持多种语言。*/
direction:rtl;
unicode-bidi:bidi-override;
属性 | 描述 |
---|---|
widtht 、height | 宽高 |
margin 、margin-top 、margin-right 、margin-bottom 、margin-left | 外边距 |
padding 、padding-top 、padding-right 、padding-bottom 、padding-left | 内边距 |
👇👇👇border: border-width border-border-style border-color; 👆👆👆 | 边框属性设置只需要记住这条公式即可,想要设置某个方向的边,只需中间加上方向(顺序可换不影响,但最好养成良好编码习惯) |
border 、border-top 、border-right 、border-bottom 、border-left | 边框 |
border-width 、border-top-width 、border-right-width 、border-bottom-width 、border-left-width | 边框的宽 |
border-style 、border-top-style 、border-right-style 、border-bottom-style 、border-left-style | 边框样式 |
border-color 、border-top-color 、border-right-color 、border-bottom-color 、border-left-color | 边框的颜色 |
margin、padding、broder的缩写方式:
(方向是 上右下左逆时针顺序:top,right,bottom,left)👉👉👉margin和padding(点击这里查看我画的更容易理解的盒子示意图)
两者都是一样的,只需给边距赋值。
margin:10px 20px 30px 40px;
/*上面margin属性的缩写展开后如下:*/
margin-top:10px;
margin-right:20px;
margin-buttom:30px;
margin-left:40px;
padding:25px 10px 35px 15px;
/*上面padding属性的缩写展开后如下:*/
padding-top:25px;;
padding-right:10px;
padding-buttom:35px;
padding-left:15px;
👉👉👉border
border属性不同(不写方向,那就是整框),它是赋值边的大小(宽)、边的类型(实线/虚线)、边的颜色
border:1px solid #f39;
/*上面border属性的缩写展开后如下:*/
border-width:1px;
border-style:solid;
border-color:#f39;
/*如果是只想设置某边的属性:*/
border-left:2px solid #ff4040;
/*上面border-left属性的缩写展开后如下:*/
border-left-width:1px;
border-left-style:solid;
border-left-color:#f39;
属性 | 描述 |
---|---|
👇👇👇background: background-color background-image background-repeat background-position background-attachment; 👆👆👆 | 所有背景属性的公式,记住这条就行,也可以单独属性设置(顺序可换不影响,但最好养成良好编码习惯) |
background-color | 背景颜色 |
background-image | 背景图 |
background-repeat | 如何重复背景图像 |
background-position | 背景图像的位置 |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动 |
/*在一个声明中设置所有背景属性:*/
background: #00ff00 url(xxxx.gif) no-repeat fixed top;
/*全写如下*/
background-color:#00ff00;
background-image:url(xxxx.gif);
background-repeat:no-repeat;
background-position:fixed;
background-attachment:top;
【延申:background用法】
属性 | 描述 |
---|---|
float | 浮动(无论何种元素使用float都会生成块级框) |
clear | 清除浮动,去除高度塌陷(练习点此链接) |
position | 定位类型(绝对/相对/固定,练习点此链接) |
top 、left 、bottom 、right | 上左下右移动(与position配合使用) |
min-width 、max-width | 设置元素的最小/最大宽度(练习点此链接) |
min-height 、max-height | 设置元素的最小/最大高度 |
overflow | 规定当内容溢出元素框时发生的事情(省略号代替或者滚动条,练习点此链接) |
clip | 剪裁绝对定位元素(控制裁剪区域,练习点此链接) |
z-index | 设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面(练习点此链接) |
div.text{
float:right; /*右浮动*/
clear:both; /*清除两边浮动元素*/
}
div.box{
position:absolute; /*配合方向使用,来确定位置(相对于static定位以外的第一个父元素进行定位。)*/
top:10px; /*top和bottom 选一个属性就行*/
left:10px; /*right和left 选一个属性就行*/
}
p{
min-width:100px; /*min-width、max-width、min-height、max-height*/
}
textarea{
overflow:scroll; /*溢出属性配合宽高,超出宽高才溢出*/
width:100px;
height:100px;
}
img{
position:absolute;
clip:rect(0px,60px,200px,0px); /*配合绝对定位,剪裁绝对定位元素*/
}
z-index:-1; /*设置数值来调整层叠顺序,值越大越上层显示*/
属性 | 描述 |
---|---|
content | 与 :before 及 :after 伪元素配合使用,来插入生成内容 |
counter-reset | 设置某个选择器出现次数的计数器的值。默认为 0。 |
counter-increment | 设置某个选取器每次出现的计数器增量。默认增量是 1。 |
css的content属性(传送门)
counter-reset和counter-increment(传送门)
属性 | 描述 |
---|---|
👇👇👇outline: outline-color outline-style outline-width; 👆👆👆 | 绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用(记住这条公式即可。练习点此链接)(顺序可换不影响,但最好养成良好编码习惯) |
outline-color | 规定边框的颜色 |
outline-style | 规定边框的样式 |
outline-width | 规定边框的宽度 |
outline:#00ff00 dotted thick;
当然,如果不设置其中的某个值,也不会出问题,比如
outline:solid #ff0000;
也是允许的(outline-style则必须声明,否则默认none)。
属性 | 描述 |
---|---|
size (css参考手册“页面媒体(Paged Media) 属性”) | 指定含有BOX的页面内容的大小和方位 |
page-break-after | 用于设置在指定元素后面插入分页符 |
page-break-before | 在指定元素前添加分页符 |
@media print
{
table {page-break-after:always;}
}
@media print
{
table {page-break-before:always;}
}
关于@规则(at-rule)的传送门:
①CSS中@用法小结;
②CSS语法之@规则(at-rule)。
属性 | 描述 |
---|---|
play-during | 设置或检索背景音乐的播放 |
cue | 在一个声明中设置提示属性 |
cue-after | 指定要播放的声音在一个元素的内容后面 |
cue-before | 指定要播放的声音在一个元素的内容前面 |
pause | 在一个声明中设置暂停属性 |
pause-after | 在一个元素的内容之后,指定暂停 |
pause-before | 在一个元素的内容之前,指定暂停 |
详情点击:CSS语音参考
二、有继承性的属性
属性 | 描述 |
---|---|
👇👇👇font: font-style font-variant font-weight font-size/line-height font-family 👆👆👆 | 设置所有字体属性(记住这条公式即可,💥必须按顺序!练习点此链接) |
font-style | 规定字体样式 |
font-variant | 规定字体异体 |
font-weight | 规定字体粗细 |
font-size/line-height (行高是文本属性) | 规定字体尺寸和行高 |
font-family | 规定字体系列 |
font-stretch | 对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。 |
font-size-adjust | 为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height |
注意:
①这里和其他语法简写不同,必须按照font-style、font-variant、font-weight、font-size/line-height、font-family的顺序设置;②
font-size
和font-family
的值是必需的。如果缺少了其他值,默认值将被插入,如果有默认值的话。
p.ex1
{
font:italic arial,sans-serif; /*默认font-size和font-family值,不设置*/
}
p.ex2
{
font:italic bold 12px/20px arial,sans-serif;
}
属性 | 描述 |
---|---|
text-indent | 文本缩进 |
text-align | 文本水平对齐 |
line-height | 行高 |
word-spacing | 增加或减少单词间的空白(即字间隔) |
letter-spacing | 增加或减少字符间的空白(字符间距) |
text-transform | 控制文本大小写 |
direction | 规定文本的书写方向 |
color | 文本颜色 |
元素 | 描述 |
---|---|
visibility | 设置元素是否可见 |
visibility:hidden;
虽然功能上和display:none;
一样都是设置元素不可见,但是,visibility:hidden;
会占据页面上的空间,display:none;
则不会。
属性 | 描述 |
---|---|
caption-side | 设置表格标题的位置 |
border-collapse | 设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示 |
border-spacing | 设置相邻单元格的边框间的距离(仅用于“边框分离”模式) |
empty-cells | 设置是否显示表格中的空单元格(仅用于“分离边框”模式) |
table-layout | 显示表格单元格、行、列的算法规则 |
属性 | 描述 |
---|---|
list-style: list-style-type list-style-position list-style-image; | 设置所有的列表属性(记住这条公式即可,💥必须按顺序!练习点此链接 |
list-style-type | 设置列表项标记的类型 |
list-style-position | 设置在何处放置列表项标记 |
list-style-image | 使用图像来替换列表项的标记 |
按下面顺序设置(语法:
list-style:square inside url('/i/arrow.gif');
)
- list-style-type
- list-style-position
- list-style-image
可以不设置其中的某个值,比如 list-style:circle inside;
也是允许的。未设置的属性会使用其默认值。
元素 | 描述 |
---|---|
quotes | 设置嵌套引用的引号类型 |
q:lang(en)
{
quotes: "�" "�" "'" "'";
}
说明:前两个值规定第一级引用嵌套,后两个值规定下一级引号嵌套。
quotes:“第一级string” “第一级string” “第二级string” “第二级string”…;
元素 | 描述 |
---|---|
cursor | 设置要显示的光标的类型(形状) |
元素 | 描述 |
---|---|
page (css参考手册“页面媒体(Paged Media) 属性”) | 指定一个元素应显示的页面的特定类型 |
page-break-inside | 设置元素内部的 page-breaking(分页) 行为(只有 Opera 浏览器支持此属性) |
🔺(不是windows)widows (css参考手册“分页(Print) 属性”) | 设置当元素内部发生分页时必须在页面顶部保留的最少行数 |
orphans | 设置当元素内部发生分页时必须在页面底部保留的最少行数 |
属性 | 描述 |
---|---|
speak | 指定内容是否会提供听觉方式 |
speak-header | 设置或检索表格标题是在所有的单元格之前发声,还是到一个不与之关联的单元格就结束发声。 |
speak-numeral | 设置或检索数字如何发音。 |
speak-punctuation | 设置或检索标点字符如何发音 |
speech-rate | 指定发言速度 |
volume | 指定发言的音量 |
voice-family | 设置或检索当前声音类型 |
pitch | 指定讲话声音 |
pitch-range | 指定讲话声音的变化(单调的声音或动态的声音) |
stress | 讲话声音在指定的地方"重音" |
richness | 指定丰富的讲话声音(浑厚的声音或细的声音) |
azimuth | 设置声音应该来自哪里 |
elevation | 设置声音应该来自哪里 |
详情点击:CSS语音参考
三、所有元素可以继承的属性
1、元素可见性:visibility2、光标属性:cursor
四、内联元素可以继承的属性
1、字体系列属性2、除text-indent、text-align之外的文本系列属性