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

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • 段落排版--对齐:为块状元素中的文本、图片设置居中text-align:center;left;right align 属性
    查看全部
    0 采集 收起

    2015-01-02

  • 段落排版--字间距、字母间距: 1、用letter-spacing设置文字或字母间距。2、用word-spacing设置单词间距。
    查看全部
    0 采集 收起

    2015-01-02

  • 段落排版--行间距(行高)p{line-height:1.5em;}
    查看全部
    0 采集 收起

    2015-01-02

  • 段落排版--缩进:中文文字中的段前空两个文字的空白,这个特殊的样式可以用下面代码来实现: p{text-indent:2em;}注意:2em的意思就是文字的2倍大小。 indent:排版缩进
    查看全部
    0 采集 收起

    2015-01-02

  • 文字排版--删除线 .oldPrice{text-decoration:line-through;} decoration 装饰 line-through
    查看全部
    0 采集 收起

    2015-01-02

  • 文字排版--斜体 以下代码可以实现文字以斜体样式在浏览器中显示: p a{font-style:italic;} <p>三年级时,我还是一个<a>胆小如鼠</a>的小女孩。</p>
    查看全部
  • 文字排版--粗体 可以使用css样式来改变文字的样式:粗体、斜体、下划线、删除线,可以使用下面代码实现设置文字以粗体样式显示出来。p span{font-weight:bold;} 为文字设置粗体是有单独的css样式来实现的,再不用为了实现粗体样式而使用h1-h6或strong标签了。
    查看全部
  • 文字排版--字号、颜色 可以使用下面代码设置网页中文字的字号为12像素,并把字体颜色设置为#666(灰色): body{font-size:12px;color:#666}
    查看全部
  • 文字排版--字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面代码实现:为网页中的文字设置字体为宋体。 body{font-family:"宋体";}这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。) 现在一般网页喜欢设置“微软雅黑”,如下代码: body{font-family:"Microsoft Yahei";}或body{font-family:"微软雅黑";} 注意:第一种方法比第二种方法兼容性更好一些。 因为这种字体即美观又可以在客户端安全的显示出来(用户本地一般都是默认安装的)。
    查看全部
  • 使用!important规定某些样式设置具有最高权值。 如下代码: p{color:red!important;} p{color:green;}<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p> 这时 p 段落中的文本会显示的red红色。 注意:!important要写在分号的前面 这里注意当网页制作者不设置css样式时,浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。这时注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。
    查看全部
  • 层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。 如下面代码: p{color:red;} p{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p> 最后 p 中的文本会设置为green,这个层叠很好理解,理解为后面的样式会覆盖前面的样式。 所以前面的css样式优先级就不难理解了: 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。
    查看全部
    0 采集 收起

    2018-03-22

  • 特殊性 有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码: p{color:red;} .first{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p> p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种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,理解为继承的权值最低。
    查看全部
  • CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签。 p{color:red;} <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p> 可见右侧结果窗口中p中的文本与span中的文本都设置为了红色。但注意有一些css样式是不具有继承性的。如border:1px solid red; p{border:1px solid red;} <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p> 在上面例子中它代码的作用只是给p标签设置了边框为1像素、红色、实心边框线,而对于子元素span是没用起到作用的。
    查看全部
  • 伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色: a:hover{color:red;} 上面一行代码就是为a标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。 关于伪选择符:     关于伪类选择符,到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是a标签上使用:hover了(其实伪类选择符还有很多,尤其是css3中,但是因为不能兼容所有浏鉴器,本教程只是讲了这一种最常用的)。其实:hover可以放在任意的标签上,比如说p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是a:hover的组合。
    查看全部
  • <a>的用法 一。链接网站 1.<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>(在当前窗口打开) 2.<a href="目标网址" target="_blank">click here!</a>(在新窗口打开) 二。链接Email地址(2,3,5,6均为参数,除了第一个参数用?开头,其他用&分隔) 1.mailto=默认地址 2.cc=抄送地址 3.bcc=密抄送地址 4. ;号,多个收件人,抄送人,密抄送人 5.subject= 主题 6.body=内容    <a href="mailto:默认地址?cc=抄送地址&bcc=密件抄送地址&subject=主题&body=邮件内容">发送</a>
    查看全部
    0 采集 收起

    2018-03-22

举报

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

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