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

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • body{font-family:"宋体";}

    查看全部
  • 选择器的最高层级:!important

    p{color:red!important;}
    p{color:green;}
    <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

    这时 p 段落中的文本会显示的red红色。

    !important要写在分号的前面

    查看全部
  • 标签的权值为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*/

    查看全部

  • 选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

    查看全部
  • 样式的继承:

    继承是一种规则,它允许样式不仅应用于某个特定html标签元素而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签。

    p{color:red;}
    <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

    但注意有一些css样式是不具有继承性的。如border:1px solid red;

    查看全部
  • 伪类选择器:

    它允许给html不存在的标签(标签的某种状态)设置样式。

    比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:

    a:hover{color:red;}

    查看全部
  • 通用选择器:

    通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:

    * {color:red;}

    查看全部
  • 后代选择器:包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码:

    .first  span{color:red;}

    后代选择器与子选择器的区别:

    子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。

    总结:>作用于元素的第一代后代,空格作用于元素的所有后代。

    查看全部
  • 子选择器:

    即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码:

    .food>li{border:1px solid red;}

    这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。

    查看全部
  • 类选择器(.)和id选择器(#)的区别

    相同点:应用于任何元素;

    不同:

    1. ID选择器只能在文档中使用一次

    2. 可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。

      .stress{
          color:red;
      }
      .bigsize{
          font-size:25px;
      }
      <p>到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>

    查看全部
  • id选择器

    使用ID选择器,必须给标签添加上id属性,为标签设置id="ID名称",而不是class="类名称"。

    2、ID选择符的前面是井号(#)号,而不是英文圆点(.)。

    3、id属性的值既为当前标签的id,尽量见名思意,语义化。

    查看全部
  • 类选择器:

    .类选择器名称{css样式代码;}

    第一步:使用合适的标签把要修饰的内容标记起来,如下:

    <span>胆小如鼠</span>

    第二步:使用class="类选择器名称"为标签设置一个类,如下:

    <span class="stress">胆小如鼠</span>

    第三步:设置类选器css样式,如下:

    .stress{color:red;}/*类前面要加入一个英文圆点*/

    查看全部
  • 内联式,嵌入式,外联式css样式设置的优先级:

    内联>嵌入>外部

    嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样,<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面(实际开发中也是这么写的)

    查看全部
  • 外部css样式:

    是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:

    <link href="base.css" rel="stylesheet" type="text/css" />

    rel="stylesheet" type="text/css" 是固定写法不可修改

    <link>标签位置一般写在<head>标签之内。



    查看全部
  • 嵌入式css样式:可以把css样式代码写在<style type="text/css"></style>标签之间

    <style type="text/css">
    span{
    color:red;
    }
    </style

    嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在<head></head>之间。

    查看全部

举报

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

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