慕课网

精品课程初识HTML(5)+CSS(3)

初识HTML(5)+CSS(3)

最热最新

hwwn

层叠：对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用（后面的样式会覆盖前面的样式）如下面代码: p{color:red;} p{color:green;} <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p> 最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。所以前面的css样式优先级就不难理解了：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

查看全部

0 采集收起
2018-03-22
hwwn

当为同一个元素设置了不同的CSS样式代码时，浏览器根据权值来判断使用哪种css样式，权值高的就使用哪种css样式标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100 p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/ 注意：继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低 .first{color:green;}权值最大，span{color:pink;}权值为1，那为什么显示的是粉红色呢？，.first{color:green;}是为第一段设置为绿色，当没有span{color:pink;}这条语句时，span会也会显示为green，是因为span继承了.first中的绿色，但当设置了span{color:pink;}这条语句后，span就是会复盖上面继承下来的绿色，因为继承的权值你可以理解是最低的，有的文献中说继承的权值只有0.1

查看全部

0 采集收起来源：权值计算-特殊性
2014-12-31
hwwn

HTML/CSS——第9章CSS的继承、层叠和特殊性——继承 1、CSS的【某些样式】是具有【继承性】的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其内嵌的【后代】。 2、如字体颜色、大小是具有继承性的，而边框则没有继承性 3、不可继承的属性如下： display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。

查看全部

0 采集收起来源：继承者 - 样式的继承
2014-12-31
天行健_

参照定位： 1.参照定位的元素必须是相对定位元素的前辈元素 2.参照定位的元素必须加入 position:relative;（绝对定位）

查看全部

0 采集收起来源：Relative与Absolute组合使用
2014-12-31
天行健_

固定定位: （相对于浏览器定位）固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响跟背景图片的固定类似。 position:fixed; bottom:0; right:0; 代码解释：固定定位，定位在下边的距离为零，右边的距离为0，也就是右下角。

查看全部

0 采集收起来源：我就在那不动了-层模型之固定定位
2014-12-31
天行健_

相对定位: 相对于以前的位置移动,偏移前的位置保留。 position:relative; top:50px; left:100px; 相对于以前位置向右移动100象素，向下移动50象素。

查看全部

0 采集收起来源：相对于自己的位置-层模型之相对定位
2014-12-31
天行健_

层模型有三种形式： 1、绝对定位(position: absolute) 2、相对定位(position: relative) 3、固定定位(position: fixed) 绝对定位: position:absolute; left:100px; top:50px; 代码解释：绝对定位，左边的距离增加100px，上边的距离增加50px 作用是将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

查看全部

0 采集收起来源：万事无绝对 -层模型之绝对定位
2014-12-31
天行健_

浮动模型：块状元素并排显示 div{ float:left; } div{ float:right; }

查看全部

0 采集收起来源：起飞咯 - 浮动模型
2014-12-31
天行健_

流动模型：默认的网页布局模式：典型的特征： 1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为默认宽度为100% 2.内联元素都会在所处的包含元素内从左到右水平分布显示。

查看全部

0 采集收起来源：排队显示-流动模型（二）
2014-12-31
天行健_

css布局模型：有三种布局模型： 1、流动模型（Flow） 2、浮动模型 (Float) 3、层模型（Layer）

查看全部

0 采集收起来源：CSS3的布局 - css布局模型
2014-12-31
天行健_

边界: 元素与其它元素之间的距离 margin:10px; 属性跟padding一样 padding在border内，margin在border外

查看全部

0 采集收起来源：距离产生美 - 使用margin为盒子设置外边距（边界）
2014-12-31
天行健_

填充: 元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码： div{padding:20px 10px 15px 30px;} 一个值时，是四个方向，两个值时，第一个为上下的值，第二个为左右的值。

查看全部

0 采集收起来源：宰相肚里能撑船 - 使用padding为盒子设置内边距（填充）
2014-12-31
天行健_

边框 p标签单独设置左边框 p{border-left:1px solid red;} top 上， bottom 下，left 左，right右 margin 跟 padding 同样可单独设置四个方向

查看全部

0 采集收起来源：我想脚下踩条线 - 使用border为盒子添加边框（二）
2014-12-31
天行健_

边框： div{ border:2px solid red; } border：width style color； border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）。

查看全部

0 采集收起来源：画个圈圈 - 使用border为盒子添加边框（一）
2014-12-31
天行健_

盒子里面的内容：文字、图片、另一个标签元素每个元素都有四个方向！月饼盒到月饼的距离：内填充（ padding ）两个月饼盒之间的距离：外边距（ margin ）盒子的边框（厚度）（ border ） <div><ul><ol><p><h><table>等块级标签都具备盒子模型的特征

查看全部

0 采集收起来源：变个盒子-什么是盒模型（视频）
2018-03-22

首页上一页 27117 27118 27119 27120 27121 27122 27123 下一页尾页

0/150

提交

取消

开始学习

课程须知: 没有任何WEB经验的WEB应用程序开发者、对WEB前端技术感兴趣的用户均可学习本教程。

老师告诉你能学到什么？: 本教程代领大家轻松学习HTML(5)、CSS(3)样式基础知识，可以利用HTML(5)、CSS(3)样式技术制作出简单页面。