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

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • font-family:

    为网页中的文字设置字体、字号、颜色等样式属性。

    eg:

    body{font-family:"宋体";}
    这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。)

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

    些特殊的情况需要为某些样式设置具有最高权值,可以使用!important来解决。

    注意:

    !important要写在分号的前面

    样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。

    查看全部
  • 权值计算-特殊性:

    标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。

    注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。

    查看全部
  • 伪类选择器:

    可以给html不存在的标签设置样式,比如说我们给HTML中的一个标签元素的鼠标划过的状态来设置字体颜色;

    a:hover{color:red;}

    查看全部
  • 选择器的优先级:

    技术点的解释:

    1、如果一个元素使用了多个选择器,则会按照选择器的优先级来给定样式。

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

    查看全部
  • 后代选择器:

    第一后代的儿子,

    查看全部
  • 子选择器、:

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

    li需要标注的内容中使用的标签

    查看全部
  • 类和ID选择器的区别:

    相同点:可以应用于任何元素

    不同点:

    1、ID选择器只能在文档中使用一次,与类选择器不同,在HTML文档中,ID选择器只可以使用一次,而且仅一次,而选择器可以使用多次。

    如果标注一次,使用ID选择器。

    如果使用多次,使用类选择器,不可以使用ID选择器

    查看全部
  • 样式的继承:

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

    <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>


    注意:

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

    查看全部
  • 分组选择器:

    当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,)

    eg:

    h1,span{color:red;}

    它相当于下面两行代码:

    h1{color:red;}
    span{color:red;}

    查看全部
  • 取一个标识-ID选择器

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

    2、ID选择符的前面是#号,而不是英文圆点

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

    如:

    #box{

       corlor:red; 

    }

    <div id=""box>我是一个id</div>

    查看全部
  • 类标签就是在定义标签的前面添加一个英文原点。

    在head下定义一个类标签

    如:

    .h{

        color: red;

    }

    然后在标签内以内联式把需要的标注的文字,标注出来。

    在span内使用class调用,如:class='.h'

    查看全部
  • 伪类选择器:

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

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

    a:hover{color:red;}

    上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。

    注意:

    :hover 可以放在任意的标签上,比如说 p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是 a:hover 的组合。

    查看全部
  • 通用选择器:

    它使用一个(*)号指定,它的作用是匹配html中所有标签元素,

    eg:* {color:red;}
    使用html中任意标签元素字体颜色全部设置为红色

    查看全部
  • 后代选择器:

    包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。

    eg:

    .first  span{color:red;}

    这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。

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

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

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

    查看全部

举报

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

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