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

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
最热 最新
  • 追风的人不会老
    通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素 * {color:red;}
    查看全部
    0 采集 收起 来源：我全都要 - 通用选择器

    2015-02-05

  • Nemonameless
    类和ID选择器的异同： 相同点：可以应用于任何元素 不同点： 1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。 2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）
    查看全部
    0 采集 收起 来源：类和ID选择器的区别

    2015-02-05

  • lurkery
    长度值 长度单位总结一下，目前比较常用到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

  • 追风的人不会老
    包含选择器，即加入空格,用于选择指定标签元素下的后辈元素 .first span{color:red;} 总结：>作用于元素的第一代后代，空格作用于元素的所有后代。 .food li{ border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/ }
    查看全部
    0 采集 收起 来源：这么快就当爷爷了? - 后代选择器

    2018-03-22

  • Nemonameless
    ID选择器 在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别： 1、为标签设置id="ID名称"，而不是class="类名称"。 2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。 右侧代码编辑器中就是一个ID选择符的完整实例
    查看全部
    0 采集 收起

    2018-03-22

  • lurkery
    颜色值 在网页中的颜色设置是非常重要，有字体颜色（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;} 配色表： http://img1.sycdn.imooc.com//54c5b4120001f20808000902.jpg
    查看全部
    0 采集 收起

    2015-02-05

  • Nemonameless
    类选择器 语法： .类选器名称{css样式代码;} 注意： 1、英文圆点开头 2、其中类选器名称可以任意起名（但不要起中文噢） 使用方法： 第一步：使用合适的标签把要修饰的内容标记起来，如下： <span>胆小如鼠</span> 第二步：使用class="类选择器名称"为标签设置一个类，如下： <span class="stress">胆小如鼠</span> 第三步：设置类选器css样式，如下： .stress{color:red;}/*类前面要加入一个英文圆点*/
    查看全部
    0 采集 收起 来源：再选一个类 - 类选择器

    2018-03-22

  • 追风的人不会老
    还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。 .food>li{border:1px solid red;} 这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
    查看全部
    0 采集 收起 来源：捡了一个儿子 - 子选择器

    2018-03-22

  • lurkery
    字体缩写 网页中的字体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

  • Nemonameless
    标签选择器 标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码： p{font-size:12px;line-height:1.6em;} 上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。
    查看全部
    0 采集 收起 来源：选一个标签 - 标签选择器

    2018-03-22

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

    2015-02-05

  • lurkery
    盒模型代码简写 还记得在讲盒模型时外边距(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-05

  • Nemonameless
    每一条css样式声明（定义）由两部分组成，形式如下： 选择器{ 样式; } 在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。比如右侧代码编辑器中第7行代码中的“body”就是选择器
    查看全部
    0 采集 收起 来源：css3的游戏规则 - 什么是选择器？

    2015-02-05

  • 菜大绳
    2.在右边编辑器的第7行，输入下面代码： .first,#second span{color:green;}
    查看全部
    0 采集 收起 来源：给选择器分个组 - 分组选择器

    2015-02-05

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

    2018-03-22

首页上一页26596265972659826599266002660126602下一页尾页

举报

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

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

查看已购买的课程