尚硅谷前端笔记-CSS简介、语法

小付学前端

于 2022-06-22 23:30:45 发布

阅读量167

点赞数

分类专栏： HTML5详细基础笔记文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_58264104/article/details/125418556

版权

HTML5详细基础笔记专栏收录该内容

15 篇文章 3 订阅

订阅专栏

本文介绍了CSS的三种应用方式：内联样式、内部样式表和外部样式表。内联样式只适用于单个元素，不便维护；内部样式表能复用样式但局限于当前页面；外部样式表可跨页面复用，利用缓存提高加载速度，是最佳实践。了解这些有助于提升网页开发效率和用户体验。

摘要由CSDN通过智能技术生成

 网页分成三部分：

           结构（HTML）
           表现（CSS）
           行为（javas）
     CSS

           -层叠样式表
           -网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式
              而最终我们能看到的只是网页的最上边的一层
           -总之一句话：CSs用来设置网页中元素的样式

     作用：使用CSS来修改元素的样式

第一种方式：(内联样式，行内样式）
  -在标签内部通过style属性来设置元素的样式
  -问题：
       使用内联样式，样式只能对一个标签生效，
          如果希望影响到多个元素必须在每个元素中都复制一遍
          并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便

  -注意：开发时绝对不要使用内联式

 <p style="color: red; font-size: 60px;">锄禾日当午</p>

第二种：
       -将样式编写到head中的style标签里
         然后通过CSS的选择器来选中元素并为其设置各种样式
         可以同时为多个标签设置样式，并修改时只需要修改一处即可全部应用
       -内部样式表更加方便对样式进行复用

       问题：
       我们的内部样式表只能对一个网页起作用
       里面的样式不能跨页面进行复用

<style>
          p{
            color:yellow;font-size:60px;
            }
      </style>

第三种方式：（外部样式表）最佳实践
     -可以将CSS样式编写到一个外部的CSS文件中
      然后通过link标签来引入外部的CSS文件
     -外部样式表需要通过link标签进行引入
        意味着只要想使用这些样式的网页的可以对其进行引用
        使样式在不同页面之间进行复用
     -将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制
       从而加快网页的加载速度，提高用户的体验

 <link rel="stylesheet" href="style.css">

简介完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <!--    第二种：
           -将样式编写到head中的style标签里
             然后通过CSS的选择器来选中元素并为其设置各种样式
             可以同时为多个标签设置样式，并修改时只需要修改一处即可全部应用
           -内部样式表更加方便对样式进行复用

           问题：
           我们的内部样式表只能对一个网页起作用
           里面的样式不能跨页面进行复用
           -->
    <!--   <style>
          p{
            color:yellow;font-size:60px;
            }
      </style>
     -->
<!--
        第三种方式：（外部样式表）最佳实践
             -可以将CSS样式编写到一个外部的CSS文件中
              然后通过link标签来引入外部的CSS文件
             -外部样式表需要通过link标签进行引入
                意味着只要想使用这些样式的网页的可以对其进行引用
                使样式在不同页面之间进行复用
             -将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制
               从而加快网页的加载速度，提高用户的体验

        -->
        <link rel="stylesheet" href="style.css">


</head>
<body>




<!--    网页分成三部分：
           结构（HTML）
           表现（CSS）
           行为（javas）
        CSS
           -层叠样式表
           -网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式
              而最终我们能看到的只是网页的最上边的一层
           -总之一句话：CSs用来设置网页中元素的样式
-->
<!--
       使用CSS来修改元素的样式

       第一种方式：(内联样式，行内样式）：
         -在标签内部通过style属性来设置元素的样式
         -问题：
              使用内联样式，样式只能对一个标签生效，
                 如果希望影响到多个元素必须在每个元素中都复制一遍
                 并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便

         -注意：开发时绝对不要使用内联式
-->

<!--    <p style="color: red; font-size: 60px;">小仙女李江宇</p>-->

     <p>大美女李江宇</p>
     <p>小仙女李江宇</p>

</body>
</html>

语法：

   CSS中的注释：注释中的内容会自动被浏览器所忽略

   CSS的基本语法：
         选择器 声明块

    -选择器：通过选择器可以选中页面中的指定元素
       比如p的作用就是选中页面中所有的元素

    -声明块：通过声明块来指定要为元素设置的样式
       声明块由一个一个的声明组成
       声明是一个名值对结构
            一个样式名对应一个样式值，名和值之间以 ：连接，以 ；结束

 <style>
      

        p{
           color: red;
            font-size: 52px;


        }
        h1{
            color: yellow;
        }
    </style>

语法完整版代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
    CSS中的注释：注释中的内容会自动被浏览器所忽略

    CSS的基本语法：
        选择器 声明块

        -选择器：通过选择器可以选中页面中的指定元素
           比如p的作用就是选中页面中所有的元素

        -声明块：通过声明块来指定要为元素设置的样式
           声明块由一个一个的声明组成
           声明是一个名值对结构
                一个样式名对应一个样式值，名和值之间以：连接，以；结束
 */


        p{
           color: red;
            font-size: 52px;


        }
        h1{
            color: yellow;
        }
    </style>


</head>
<body>

<h1>锄禾日当午</h1>
<p>汗滴河下苦</p>
</body>
</html>

此笔记来自于跟尚硅谷老师学习自己所写，用于自我复习。若对码友有用可参考！！！