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

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • 段落排版--行间距(行高) 这一小节我们来学习一下另一个在段落排版中起重要作用的行间距(行高)属性(line-height),如下代码实现设置段落行间距为1.5倍。 p{line-height:1.5em;
    查看全部
    0 采集 收起

    2015-02-05

  • <h1></h1>是标题标签 <p></p>是段落标签 img是图片 <img src="1.jpg">
    查看全部
    0 采集 收起

    2018-03-22

  • 段落排版--缩进 中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现: p{text-indent:2em;} <p>1922年的春天,一个想要成名名叫尼克卡拉威(托比?马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。</p> 注意:2em的意思就是文字的2倍大小。
    查看全部
    0 采集 收起

    2018-03-22

  • font-style:italic;
    查看全部
  • 文字排版--下划线 有些情况下想为文字设置为下划线样式,这样可以在视觉上强调文字,可以使用下面代码来实现: p a{text-decoration:underline;} <p>三年级时,我还是一个<a>胆小如鼠</a>的小女孩。</p>
    查看全部
    0 采集 收起

    2018-03-22

  • label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。
    查看全部
  • ID选择器 在很多方面,ID选择器都类似于类选择符,但也有一些重要的区别: 1、为标签设置id="ID名称",而不是class="类名称"。 2、ID选择符的前面是井号(#)号,而不是英文圆点(.)。 右侧代码编辑器中就是一个ID选择符的完整实例。
    查看全部
    0 采集 收起

    2018-03-22

  • 标签的权值为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,所以可以理解为继承的权值最低。
    查看全部
  • 元素分类--内联块状元素 内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增),<img>、<input>标签就是这种内联块状标签。 inline-block元素特点: 1、和其他元素都在一行上; 2、元素的高度、宽度、行高以及顶和底边距都可设置。 提示:下一小节是用视频动画来讲解css中的盒模型。
    查看全部
  • 伪选择器:常用a:hover组合,其他组合兼容性不好。 http://labs.qianduan.net/css-selector/ :hover 在IE6中只有a元素可用。 E:empty 貌似在webkit核心浏览器中有些小bug。 如果这个bug依然存在,不太确定如何测试。 IE6不支持.class1{}.class2{}双类选择器。 IE8注意事项: E[attr]选择器在值为空的时候或者写错的时候,将不会生效; IE8支持CSS2.1的所有属性,支持伪类,但是不支持伪元素。 IE8中的IE7兼容模式 E[attr] 和IE8一样,值为空或写错的时候,无效; E[attr~=val]这里唯一需要注意的是,属性的值,区分大小写; E[attr|=val]IE7有一些大小写敏感的问题,但是通常可以正常使用; :first-child IE7 会将一个注释或者文字节点当成first-child,而不是只有元素才是“子”元素。所以,如果在第一个子元素前有注释或文字,IE7会匹配之而不是去匹配第一个子元素。 Safari/Chrome Safari3.2(事实上可以追溯到3.1)以上的版本已经完全的支持所有CSS选择器了。 Safari3.0基本上对CSS 2的选择器支持很好,但不支持CSS3大部分新增的选择器,而且对属性选择器的支持不是很完整。 iPhone中的Safari有3.0和3.2两个版本,对CSS的支持情况与PC/Mac版的支持情况一致。 Android系统自带的浏览器基本上也是基于webkit核心的,其对于CSS选择器的支持情况待测。
    查看全部
  • 下拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple"属性,就可以实现多选功能,在 widows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项。
    查看全部
    0 采集 收起

    2018-03-22

  • 解决行内元素间隙bug问题 行内元素之间会产生间隙bug问题的场景: 1、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。 如下代码: <div> <a>1</a> <a>2</a> <span>33333</span> <span>4... 元素分类--内联元素 在html中,<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从页使用div元素具有内联元素特点。 内联元素特点: 1、和其他元素都在一行上; 2、元素的高度、宽度、行高及顶部和底部边距不可设置; 3、元素的宽度就是它包含的文字或图片的宽度,不可改变。 小伙伴们你们观查一下右侧代码段,有没有发现一个问题,内联元素之间有一个间距问题,这个问题在本小节的wiki中有介绍,感兴趣的小伙伴可以去查看。
    查看全部
  • 元素分类--块级元素 什么是块级元素?在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。 a{display:block;} 块级元素特点: 1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行) 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
    查看全部
  • 当 type="radio" 时,控件为单选框 当 type="checkbox" 时,控件为复选框 (checked:当设置 checked="checked" 时,该选项被默认选中)
    查看全部
  • 文字排版--粗体 我们还可以使用css样式来改变文字的样式:粗体、斜体、下划线、删除线,可以使用下面代码实现设置文字以粗体样式显示出来。 p span{font-weight:bold;} 在这里大家可以看到,如果想为文字设置粗体是有单独的css样式来实现的,再不用为了实现粗体样式而使用h1-h6或strong标签了。
    查看全部

举报

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

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