手记

【九月打卡】第6天 前端工程师2022版 css基础入门第一讲

课程名称:前端工程师2022版

课程章节:css基础入门


课程讲师: elex

课程内容:

大纲:

    第一部分

        CSS3简介

    第二部分

        CSS3书写位置+CSS3基本语法


2-1 CSS3简介

    CSS=cascading style sheet,层叠式样式表

        用来给HTML添加样式的语言


    CSS3 vs CSS2

       增加了大量的样式、动画、3D特效、移动端特性等


    前端三层:

        HTML-结构层:搭建结构、放置部件、描述语义

        CSS-样式层:美化页面、实现布局

        JavaScript-行为层:实现交互效果、数据收发、表单验证等


    CSS的意义:

        使样式和结构进行了分离,不再杂糅,html负责结构,css负责样式

        选择器作为html和css的纽带     

        css≈样式的"清单"

        css的本质:简单直接的罗列样式


2-2 CSS的书写位置

    1.内嵌式:内嵌在.html文件中

        head标签对中书写style标签对,在里面用选择器给列出样式


    2.外链式:

        将CSS单独存为.CSS文件,使用link标签在html文件中的head标签对中引入它

            <link rel="stylesheet" href="……">

                rel=关系;styleshett=样式表


        优点:

            多个html网页可以共用一个css样式表文件


    3.导入式:

        最不常见

            <style>

                @import url(文件位置+css文件的名字)

            </style>


        缺点:

            这种方式引入的样式表,不会等css文件加载完毕,而是会立即渲染html结构,所以页面会有一段时间的素面朝天的情况

            ==html加载好了,但是css加载慢了的话,页面就会出现有html但是没有css样式的网页


    4.行内式:

        样式可以通过写style属性直接写在标签上

            <h2 >H2</h2>


        缺点:

            牺牲了样式表批量设置样式的能力,


        但是后台工程师经常用行内式


2-3 CSS3的基本语法

    选择器 {

        k:v;    k=属性名,v=属性的值;

        k:v;

        k:v;

        k:v;

    }

        最后一条样式可以不书写分号,最好写上

        css的样式写可以不换行,就是页面不美观


    CSS的注释:

        /**/    ctrl+/


2-10 扩展

    外链式、内嵌式、导入式都可以写在body里面,但是这种写法不规范,不推荐


    为什么不推荐大量使用行内式?

        1.html代码和css代码混合在一起,会使文档的结构比较混乱,使整个文档的代码量增大,不利于阅读


        2.这种形式的样式代码,不能够复用,如果多个结构样式是相同的话,那么页面上就会存在多出相同的css代码,不利于页面的维护


    CSS四种书写位置的使用场合:

        内嵌式:

            如果写的css代码比较少

        

        外链式:

            css代码比较多的时候使用,使文档的结构与样式分离


        行内样式/内嵌式:

            网页相关联的css文件太多,并且css中的代码也比较多,不便查找和修改


        导入式;

            基本使用场景很少,了解即可


    CSS书写的注意事项:

        style标签有type属性,并且属性值唯一(text/css),该属性值可以省略不写

        样式表内的最后一项的结尾分号(可以不写,不影响浏览器的解析)但是建议加上,防止后续要增项出现失误

        选择器与选择器之间,不能写分号或者其他符号,会导致下面的样式不生效

  1. 课程收获:

谢谢老师,讲的非常细致,很容易懂。


1人推荐
随时随地看视频
慕课网APP