慕课网

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

初识HTML(5)+CSS(3)

最热最新

堇M小沐

长度值长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。 1、像素像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。 2、em 就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码： p{font-size:12px;text-indent:2em;} 上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。下面注意一个特殊情况：但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码： html: 以这个例子为例。 css: p{font-size:14px} span{font-size:0.8em;} 结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。 3、百分比 p{font-size:12px;line-height:130%} 设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

查看全部

0 采集收起
2018-03-22
侧耳倾听17

p{color:rgb(133,45,200);} p{color:#00ffff;}

查看全部

0 采集收起
2015-02-07
堇M小沐

颜色值在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种： 1、英文命令颜色前面几个小节中经常用到的就是这种设置方法： p{color:red;} 2、RGB颜色这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。 p{color:rgb(133,45,200);} 每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如： p{color:rgb(20%,33%,25%);} 3、十六进制颜色这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。 p{color:#00ffff;}

查看全部

0 采集收起
2015-02-07
enjie

分组选择符当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色： h1,span{color:red;} 它相当于下面两行代码： h1{color:red;} span{color:red;}

查看全部

0 采集收起来源：给选择器分个组 - 分组选择器
2015-02-07
enjie

伪类选择符更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色： a:hover{color:red;} 上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。关于伪选择符：关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏鉴器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。

查看全部

0 采集收起来源：伪装者 - 伪类选择器
2015-02-07
堇M小沐

字体缩写网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码： body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋体",sans-serif; } 这么多行的代码其实可以缩写为一句： body{ font:italic small-caps bold 12px/1.5em "宋体",sans-serif; } 注意： 1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。 2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用： body{ font:12px/1.5em "宋体",sans-serif; } 只是有字号、行间距、中文字体、英文字体设置。

查看全部

0 采集收起
2018-03-22
老牛兄

a 标记中 target="_blank" 属性定义在新浏览器（新标签）中打开网页

查看全部

0 采集收起
2018-03-22
enjie

通用选择器通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色： * {color:red;}

查看全部

0 采集收起来源：我全都要 - 通用选择器
2015-02-07
堇M小沐

颜色值缩写关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。例子1： p{color:#000000;} 可以缩写为： p{color: #000;} 例子2： p{color: #336699;} 可以缩写为： p{color: #369;}

查看全部

0 采集收起
2015-02-07
enjie

包含(后代)选择器包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码： .first span{color:red;} 这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。总结：>作用于元素的第一代后代，空格作用于元素的所有后代

查看全部

0 采集收起来源：这么快就当爷爷了? - 后代选择器
2018-03-22
堇M小沐

盒模型代码简写还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下： margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/ 通常有下面三种缩写方法: 1、如果top、right、bottom、left的值相同，如下面代码： margin:10px 10px 10px 10px; 可缩写为： margin:10px; 2、如果top和bottom值相同、left和 right的值相同，如下面代码： margin:10px 20px 10px 20px; 可缩写为： margin:10px 20px; 3、如果left和right的值相同，如下面代码： margin:10px 20px 30px 20px; 可缩写为： margin:10px 20px 30px; 注意：padding、border的缩写方法和margin是一致的。

查看全部

0 采集收起
2015-02-07
enjie

子选择器还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码： .food>li{border:1px solid red;} 这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。

查看全部

0 采集收起来源：捡了一个儿子 - 子选择器
2018-03-22
enjie

类和ID选择器的区别学习了类选择器和ID选择器，我们会发现他们之间有很多的相似处，是不是两者可以通用呢？我们不要着急先来总结一下他们的相同点和不同点：相同点：可以应用于任何元素不同点： 1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。下面代码是正确的： 三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。 而下面代码是错误的： 三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。 2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。下面的代码是正确的(完整代码见右侧代码编辑器) .stress{ color:red; } .bigsize{ font-size:25px; } 到了三年级下学期时，我们班上了一节公开课... 上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px。下面的代码是不正确的(完整代码见右侧代码编辑器) #stressid{ color:red; } #bigsizeid{ font-size:25px; } 到了三年级下学期时，我们班上了一节公开课... 上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。

查看全部

0 采集收起来源：类和ID选择器的区别
2018-03-22
邓邓

还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码： .food>li{border:1px solid red;} 这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。

查看全部

0 采集收起来源：捡了一个儿子 - 子选择器
2018-03-22
堇M小沐

Relative与Absolute组合使用小伙伴们学习了12-6小节的绝对定位的方法：使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范： 1、参照定位的元素必须是相对定位元素的前辈元素： <div id="box1"> <div id="box2">相对参照元素进行定位</div> </div> 从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。 2、参照定位的元素必须加入position:relative; #box1{ width:200px; height:200px; position:relative; } 3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。 #box2{ position:absolute; top:20px; left:30px; } 这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

查看全部

0 采集收起来源：Relative与Absolute组合使用
2018-03-22

首页上一页 26547 26548 26549 26550 26551 26552 26553 下一页尾页

0/150

提交

取消

开始学习

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

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