首页 > 技术文章 > CSS——简介

XiaMengJie 2020-03-02 17:25 原文

CSS

  层叠样式表(Cascading  Style  Sheets)

  CSS可以用来为网页创建样式表,通过样式表可以对网页进行装饰

  所谓层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低的

  而CSS就可以分别为网页的各个层次设置样式

  

  其显示页面:

 

 

   可以将CSS样式编写到元素的style属性当中,将样式直接编写到style属性中,这中样式称为内联样式:

 

 

  其显示页面:

 

 

 

 

 

  内联样式只对当前内容起作用:

 

 

 

 

 

   如果希望“样式”二字也有样式:

 

 

 

 

 

   内联样式只对当前的元素中的内容起作用,不方便复用

  内联样式属于结构与表现耦合,不方便后期的维护,不推荐使用

  也可以将CSS样式编写到head中的style标签里,通过CSS选择器中指定元素可以同时为这些元素一起设置样式,这样可以使样式进一步的复用,也可以使表现和结构进一步分离,也是推荐使用的方式:

 

 

 

 

 

   还可以将样式表编写到外部的CSS中,通过 link 标签来将外部的CSS文件引入到当前页面中,这样外部文件中的CSS样式表将会应用到当前页面中,将CSS样式统一编写到外部的样式表中,完全使结构和表现分离,可以使样式表在不同的页面中使用,最大限度的使样式表可以 进行复用,将样式统一写在样式表中,然后通过 link 标签引入,可以利用浏览器的缓存加快用户访问的速度提高了用户体验,所以在开发中最推荐使用的方式就是外部的CSS文件:

 

 

 

 

 

 

 

 

 

 

   在<style></style>里的内容不算HTML的内容了,<style></style>里全是CSS代码,外是HTML代码,<style></style>里不可以写HTML的内容,如此结构就是错误的:

 

 

  

  在<style></style>里也不可以用HTML的注释,在HTML里也不可以使用<style></style>的注释

 

 

CSS语法:

 

 图中 p 是选择器:通过选择器可以选中页面中指定的元素,并且将声明块中的样式应用到选择器对应的元素上

    声明块:声明块紧跟在选择器的后边,使用一对{ }括起来,声明块中实际上就是一组一组的名值对结构

        如 "color: red;" 中color是名,red是值

        这一组一组的名值对称之为声明,如图中声明块中有两个声明

        在一个声明块中可以写多个声明,多个声明之间使用 ";" 隔开,声明的样式名和样式值之间使用 ":" 来连接

 

推荐阅读