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

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • 长度值 长度单位总结一下,目前比较常用到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: <p>以这个<span>例子</span>为例。</p> 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

  • <q>标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话
    查看全部
    0 采集 收起

    2018-03-22

  • h1{ text-align:center; } <h1>了不起的盖茨比</h1> 同样可以设置居左: h1{ text-align:left; } <h1>了不起的盖茨比</h1> 还可以设置居右: h1{ text-align:right; } <h1>了不起的盖茨比</h1>
    查看全部
    0 采集 收起

    2018-03-22

  • 如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing来实现,如下面代码: h1{ letter-spacing:50px; } ... <h1>了不起的盖茨比</h1> 注意:这个样式使用在英文单词时,是设置字母与字母之间的间距。 单词间距设置: 如果我想设置英文单词之间的间距呢?可以使用word-spacing来实现。如下代码: h1{ word-spacing:50px; } ... <h1>welcome to imooc!</h1>
    查看全部
    0 采集 收起

    2018-03-22

  • css三种方式优先级:内联式>嵌入式>外部式 但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样,<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面(实际开发中也是这么写的)。感兴趣的小伙伴可以试一下,把它们调换顺序,再看他们的优先级是否变化。 其实总结来说,就是--就近原则(离被设置元素越近优先级别越高)。 但注意上面所总结的优先级是有一个前提:内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下,什么是权值呢?在后面的9-2小节中会讲解到。
    查看全部
    0 采集 收起

    2018-03-22

  • 1、css样式文件名称以有意义的英文字母命名,如 main.css。 2、rel="stylesheet" type="text/css" 是固定写法不可修改。 3、<link>标签位置一般写在<head>标签之内。不是在<style>标签内
    查看全部
    0 采集 收起

    2018-03-22

  • <style type="text/css"> span{ color:red; } </style> 嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在<head></head>之间。如右边编辑器中的代码。
    查看全部
    0 采集 收起

    2018-03-22

  • 1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。 2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。 3.method : 数据传送的方式(get/post)。 4.method="post" 大数据可以post 小数据用get post不会浏览器中地址中显示
    查看全部
  • 从 `submit` 这个按钮明白了: `id`是唯一标识符,不能重复; `name`是传递给后台程序的标识符,表示提交的数据是什么,相当于表格的表头; `value`是给用户看的,按钮上显示的文字,或者文本框默认显示的文字.
    查看全部
  • <ol> <li>信息</li> <li>信息</li> ...... </ol>
    查看全部
    0 采集 收起

    2018-03-22

  • <ul> <li>信息</li> <li>信息</li> ...... </ul>
    查看全部
    0 采集 收起

    2018-03-22

  • <code>代码语言</code> 注:如果是多行代码,可以使用<pre>标签。
    查看全部
    0 采集 收起

    2018-03-22

  • <br />标签是一个空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有<br />、<hr />和<img />。
    查看全部
  • <blockquote>标签的解析是缩进样式 <q>标签的解析是引号
    查看全部
    0 采集 收起

    2018-03-22

  • 文本域,支持多行文本输入 当用户需要在表单中输入大段文字时,需要用到文本输入域。 语法: <textarea rows="行数" cols="列数">文本</textarea> 1、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。 2、cols :多行输入域的列数。 3、rows :多行输入域的行数。 4、在<textarea></textarea>标签之间可以输入默认值。
    查看全部

举报

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

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