为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
初识HTML(5)+CSS(3)_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • 文字排版--删除线:.oldPrice{text-decoration:line-through;}
    查看全部
    0 采集 收起

    2014-11-29

  • 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 采集 收起

    2014-11-29

  • 注意: 1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。 2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
    查看全部
    0 采集 收起

    2014-11-29

  • 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; }
    查看全部
    0 采集 收起

    2018-03-22

  • 认识<img>标签,为网页插入图片 在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用<img>标签来插入图片。 语法: <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"> 举例: <img src = "myimage.gif" alt = "My Image" title = "My Image" /> 讲解: 1、src:标识图像的位置; 2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本; 3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本); 4、图像可以是GIF,PNG,JPEG格式的图像文件。
    查看全部
    0 采集 收起

    2018-03-22

  • 关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。 例子1: p{color:#000000;} 可以缩写为: p{color: #000;} 例子2: p{color: #336699;} 可以缩写为: p{color: #369;}
    查看全部
    0 采集 收起

    2014-11-29

  • 重要性 我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。 如下代码: p{color:red!important;} p{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p> 这时 p 段落中的文本会显示的red红色。 注意:!important要写在分号的前面 这里注意当网页制作者不设置css样式时,浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。这时注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。
    查看全部
  • 元素有三种布局模型: 1、流动模型(Flow) 2、浮动模型 (Float)div、p、table、img等 3、层模型(Layer) float:left|right 设置左右浮动 层模型有三种形式: 1、绝对定位(position: absolute) 2、相对定位(position: relative) 3、固定定位(position: fixed)
    查看全部
  • 相对于其它元素进行定位 1、参照定位的元素必须是相对定位元素的前辈元素(父元素): 2、参照定位的元素必须加入position:relative; 3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。
    查看全部
  • 如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
    查看全部
  • 如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
    查看全部
  • fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变。
    查看全部
  • 将文字设置成下划线 <span>三年级</span> span{text-decoration:underline;}
    查看全部
    0 采集 收起

    2018-03-22

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

    2018-03-22

  • 将文字设置而成斜体, p{font-style:italic;}
    查看全部

举报

0/150
提交
取消
课程须知
没有任何WEB经验的WEB应用程序开发者、对WEB前端技术感兴趣的用户均可学习本教程。
老师告诉你能学到什么?
本教程代领大家轻松学习HTML(5)、CSS(3)样式基础知识,可以利用HTML(5)、CSS(3)样式技术制作出简单页面。
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!