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

初识HTML(5)+CSS(3)-升级版

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • 使用text-decoration添加文本修饰


    1、text-decoration可以设置添加到文本的修饰。

    2、text-decoration默认值为none, 定义标准的文本。

    3、text-decoration的值为underline为定义文本下的一条线。

    4、text-decoration的值为overline为定义文本上的一条线。

    5、text-decoration的值为line-through为定义穿过文本下的一条线,一般用于商品折扣价。 text-decoration:line-through;






    查看全部
  •  font样式的简写方式

    body{
       font-style:italic;
       font-weight:bold;
       font-size:12px;
       line-height:1.5em;
       font-family:"宋体",sans-serif;
    }

    缩写

    body{
       font:italic  bold  12px/1.5em  "宋体",sans-serif;
    }


    注意:

    1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。

    2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。


    一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:

    body{
       font:12px/1.5em  "宋体",sans-serif;
    }

    只是有字号、行间距、中文字体、英文字体设置。

    查看全部
  • 使用color设置字体颜色


    color的值有3种设置方式:


    英文命令颜色

    p{color:red;}


    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%);}


    十六进制颜色

    这种颜色设置方法是现在比较普遍使用的方法,其原理其实也是 RGB 设置,但是其每一项的值由 0-255 变成了十六进制 00-ff。

    p{color:#00ffff;}

    配色表:


    查看全部
  • 使用font-style设置字体样式

    1、font-style可以设置字体样式,并且有种3设置方式。

    2、正常字体为normal,也是font-style的默认值。

    3、italic为设置字体为斜体,用于字体本身就有倾斜的样式。

    4、oblique为设置倾斜的字体,强制将字体倾斜。

     

    查看全部
  • 使用font-weight设置字体粗细


    font-weight: bold   表示文字以粗体显示。


    normal 默认值。定义标准的字符。
    bold 定义粗体字符。
    bolder 定义更粗的字符。
    lighter 定义更细的字符。


    100-900定义由细到粗的字符。400 等同于 normal,而 700 等同于 bold。
    inherit 规定应该从父元素继承字体的粗细。


    粗体字:font-weight:bold;

    倾斜字:font-style:italic;
      下划线文字:text-decoration:underline;
      删除线文字:text-decoration:line-through;

    查看全部
  • 使用font-size设置字体大小


    设置网页中文字的字号为12像素:

    body{font-size:12px;}

    查看全部
  •  使用font-family设置字体系列

    例如:

            body{font-family:"宋体";}


    现在一般网页喜欢设置“微软雅黑”,如下代码:

    body{font-family:"Microsoft Yahei";}

    body{font-family:"微软雅黑";}

    注意:第一种方法比第二种方法兼容性更好一些。

    因为这种字体即美观又可以在客户端安全的显示出来(用户本地一般都是默认安装的)。

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


    注意:!important要写在分号的前面


    样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!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*/


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

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

                 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

    查看全部
  • 分组选择器

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


    .first,#second span{

               color:green;

           }


    =  .first{color:green};

        #second span{};

    查看全部
  • 伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,


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

    a:hover{color:red;}

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


    关于伪选择符:

        关于伪类选择符,到目前为止,可以兼容所有浏览器的“伪类选择符”就是 a 标签上使用 :hover 了(其实伪类选择符还有很多,尤其是 css3 中,但是因为不能兼容所有浏览器,本教程只是讲了这一种最常用的)。其实 :hover 可以放在任意的标签上,比如说 p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是 a:hover 的组合。

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


    * {color:red;}

    查看全部
  • 包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。(or 后代选择器)


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


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

    查看全部
  • 子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。

    查看全部

举报

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

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