qzmjef 发表于 2024-6-30 10:44:19

前端基本入门二（CSS）


    <h2 style="color: black; text-align: left; margin-bottom: 10px;">学习大纲</h2>学会<span style="color: black;">运用</span>CSS<span style="color: black;">选取</span>器熟记CSS样式和外观属性<span style="color: black;">熟悉</span><span style="color: black;">把握</span>CSS<span style="color: black;">各样</span><span style="color: black;">选取</span>器<span style="color: black;">熟悉</span><span style="color: black;">把握</span>CSS<span style="color: black;">各样</span><span style="color: black;">选取</span>器<span style="color: black;">熟悉</span><span style="color: black;">把握</span>CSS三种<span style="color: black;">表示</span>模式<span style="color: black;">熟悉</span><span style="color: black;">把握</span>CSS背景属性<span style="color: black;">熟悉</span><span style="color: black;">把握</span>CSS三大特性<span style="color: black;">熟悉</span><span style="color: black;">把握</span>CSS盒子模型<span style="color: black;">熟悉</span><span style="color: black;">把握</span>CSS浮动<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">10.<span style="color: black;">熟悉</span><span style="color: black;">把握</span>CSS定位</p>11.<span style="color: black;">熟悉</span><span style="color: black;">把握</span>CSS高级技巧强化CSS
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">CSS的发展历程</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">从HTML被发明<span style="color: black;">起始</span>，样式就以<span style="color: black;">各样</span>形式存在。<span style="color: black;">区别</span>的浏览器结合它们各自的样式语言为用户<span style="color: black;">供给</span>页面效果的<span style="color: black;">掌控</span>。最初的HTML只<span style="color: black;">包括</span>很少的<span style="color: black;">表示</span>属性。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">随着HTML的成长，为了满足页面设计者的<span style="color: black;">需求</span>，HTML添加了<span style="color: black;">非常多</span><span style="color: black;">表示</span>功能。<span style="color: black;">然则</span>随着这些功能的<span style="color: black;">增多</span>，HTML变的越来越杂乱，<span style="color: black;">况且</span>HTML页面<span style="color: black;">亦</span>越来越臃肿。于是CSS便诞生了。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">CSS初识</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS(Cascading Style Sheets) 美化样式</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS<span style="color: black;">一般</span><span style="color: black;">叫作</span>为CSS样式表或层叠样式表（级联样式表），<span style="color: black;">重点</span>用于设置HTML页面中的文本内容（字体、<span style="color: black;">体积</span>、对齐方式等）、<span style="color: black;">照片</span>的外形（宽高、边框样式、边距等）以及版面的布局等外观<span style="color: black;">表示</span>样式。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS以HTML为<span style="color: black;">基本</span>，<span style="color: black;">供给</span>了丰富的功能，如字体、颜色、背景的<span style="color: black;">掌控</span>及整体排版等，<span style="color: black;">况且</span>还<span style="color: black;">能够</span>针对<span style="color: black;">区别</span>的浏览器设置<span style="color: black;">区别</span>的样式。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">引入CSS样式表（书写位置）</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS<span style="color: black;">能够</span>写到那个位置？ 是不是<span style="color: black;">必定</span>写到html文件里面呢？</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">内部样式表</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;head&gt;
      &lt;style type="text/CSS"&gt;
      <span style="color: black;">选取</span>器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
      &lt;/style&gt;
      &lt;/head&gt;
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">语法中，style标签<span style="color: black;">通常</span><span style="color: black;">位置于</span>head标签中title标签之后，<span style="color: black;">亦</span><span style="color: black;">能够</span>把他放在HTML文档的任何<span style="color: black;">地区</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">type="text/CSS" 在html5中<span style="color: black;">能够</span>省略， 写上<span style="color: black;">亦</span>比较符合规范， <span style="color: black;">因此</span>这个<span style="color: black;">地区</span><span style="color: black;">能够</span>写<span style="color: black;">亦</span><span style="color: black;">能够</span>省略。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">行内式（内联样式）</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">内联样式，又有人<span style="color: black;">叫作</span>行内样式、行间样式、内嵌样式。是<span style="color: black;">经过</span>标签的style属性来设置元素的样式，其基本语法格式如下：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"&gt; 内容 &lt;/标签名&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">语法中style是标签的属性，<span style="color: black;">实质</span>上任何HTML标签都<span style="color: black;">持有</span>style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起<span style="color: black;">功效</span>。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">外边</span>样式表（外链式）</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">链入式是将所有的样式放在一个或多个以.CSS为扩展名的<span style="color: black;">外边</span>样式表文件中，<span style="color: black;">经过</span>link标签将<span style="color: black;">外边</span>样式表文件链接到HTML文档中，其基本语法格式如下：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;head&gt;
      &lt;link href="CSS文件的路径" rel="stylesheet" /&gt;
      &lt;/head&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">重视</span>： link 是个单标签哦!!!</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">该语法中，link标签<span style="color: black;">必须</span>放在head头部标签中，并且<span style="color: black;">必要</span>指定link标签的三个属性，<span style="color: black;">详细</span>如下：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">href：定义所链接<span style="color: black;">外边</span>样式表文件的URL，<span style="color: black;">能够</span>是相对路径，<span style="color: black;">亦</span><span style="color: black;">能够</span>是绝对路径。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">type：定义所链接文档的类型，在<span style="color: black;">这儿</span><span style="color: black;">必须</span>指定为“text/CSS”，<span style="color: black;">暗示</span>链接的<span style="color: black;">外边</span>文件为CSS样式表。</p>rel：定义当前文档与被链接文档之间的关系，在<span style="color: black;">这儿</span><span style="color: black;">必须</span>指定为“stylesheet”，<span style="color: black;">暗示</span>被链接的文档是一个样式表文件。
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">三种样式表总结（位置）</h2>




情迷布拉格 发表于 2024-8-30 10:32:13

你的话语如春风拂面，让我感到无比温暖。

4zhvml8 发表于 2024-10-14 15:34:22

期待更新、坐等、迫不及待等。

4zhvml8 发表于 2024-10-31 17:20:18

网站建设seio论坛http://www.fok120.com/
页: [1]
查看完整版本: 前端基本入门二（CSS）