CSS 入门

最新推荐文章于 2025-12-15 18:15:00 发布

原创最新推荐文章于 2025-12-15 18:15:00 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

CSS是用于控制网页外观的层叠样式表，其语法包括选择器和属性值。它可以按行内、内嵌和外链三种方式引入，每种方式有其优缺点，如行内优先级最高但不便修改。CSS的优先级规则是行内>内嵌>外链，且支持属性继承，子元素能继承父元素的某些样式。HTML负责结构，CSS负责外观，JS负责行为。

1.什么是css？
   CSS (cascading Style Sheet的缩写)，可译为层叠样式表或级联样式表，用于控制页面的外观。
2.css的语法格式：
   选择器{
       属性：值;
       属性：值;
       ...
   }
3.css的引入方式
   --行内式/标签内
       举例：
       <div style='width:100px;height:100px;background:red;'></div>
   --内嵌式
       css内嵌式写法，写在head标签里面，title标签下面，用style标签包裹。
       举例：
       <style>
           div{
               width:100px;
               height:100px;
               background:red;
           }
       </style>
   --外链接
       先建一个css文件夹，在css文件夹里面创建css文件，html文件通过link标签里面的 href属性找到该css文件。
       举例：
       <link rel="stylesheet" type="text/css" href="css/index.css"/>
   --@import链接（了解就行，被摒弃的引入方式）
       举例：
       <style type="text/css">
           @import url("css/index.css");
       </style>
4.引入方式的优缺点：
       行内式/标签内：
       --优点：
           --优先级最高。
           --加载速度快。
       --缺点：
           --书写不方便，不容易修改样式，代码量大。
           --只能够控制单个标签。
           --增加html页面的体积。
       内嵌式：
       --优点：
           --加载速度快。
           --可以控制多个相同标签的相同外观/样式。
           --减少代码量，提高工作效率。
       --缺点：
           --不能够控制多个html页面。
           --增加html页面的体积。
       外链接：
       --优点：
           --可以控制多个相同标签的相同外观/样式。
           --减少代码量，提高工作效率。
           --能够控制多个html页面。
           --不增加html页面的体积。
       --缺点：
           --加载速度相比较慢。
           --优先级最低。
5.引入方式的优先级：
   行内>内嵌>外链接
   **浏览器解读代码的顺序是从上到下，从左到右依次解析。
   **内嵌样式和外链接样式谁在下，谁的优先级大
6.css继承特点：
       --子标签继承父标签及祖父标签以上的特点
       --标签必须是嵌套关系
       --一般情况下，子标签只能继承字体属性
7.html控制页面结构，css控制页面外观，js控制页面行为