资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/前端基础-CSS是什么？

前端基础-CSS是什么？

番茄西红柿 / 3646人阅读

阅读目录

  • 一、 什么是CSS
  • 二、 为何要用CSS
  • 三、 如何使用CSS

一、 什么是CSS

CSS全称Cascading Style Sheet层叠样式表，是专用用来为HTML标签添加样式的。

样式指的是HTML标签的显示效果，比如换行、宽高、颜色等等

层叠属于CSS的三大特性之一，我们将在后续内容中介绍

表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里

二、 为何要用CSS

在没有CSS之前，我们想要修改HTML标签的样式则需要为每个HTML标签多带带定义样式属性，如下

</>复制代码 
  1. DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5. head>
  6. <body>
  7. <h1 align="center">
  8.     <font color="pink" size="5">天净沙·秋思font>
  9. h1>
  10. <p align="center">
  11.     <font color="pink" size="5">锦瑟无端五十弦，一弦一柱思华年。font>
  12. p>
  13. <p align="center">
  14.     <font color="pink" size="5">庄生晓梦迷蝴蝶，望帝春心托杜鹃。font>
  15. p>
  16. <p align="center">
  17.     <font color="pink" size="5">沧海月明珠有泪，蓝田日暖玉生烟。font>
  18. p>
  19. <p align="center">
  20.     <font color="pink" size="5">此情可待成追忆，只是当时已惘然。font>
  21. p>
  22. body>
  23. html>
HTML演示

这么做的缺点是

</>复制代码 
  1. #1、记忆困难：需要记忆每个标签的所有样式相关属性，如果标签没有某个样式相关的属性，那么设置了也没有效果
  2. #2、代码耦合度高：HTML语义与样式耦合到一起
  3. #3、扩展性差：当某一类样式需要修改时，我们需要找到所有设置了该样式标签进行修改

于是CSS应运而生，很好地解决了以上三个问题

</>复制代码 
  1. DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <style>
  6.         h1,p {
  7.             color: pink;
  8.             font-size: 24px;
  9.             text-align: center;
  10.         }
  11.     style>
  12. head>
  13. <body>
  14. <h1>天净沙·秋思h1>
  15. <p>锦瑟无端五十弦，一弦一柱思华年。p>
  16. <p>庄生晓梦迷蝴蝶，望帝春心托杜鹃。p>
  17. <p>沧海月明珠有泪，蓝田日暖玉生烟。p>
  18. <p>此情可待成追忆，只是当时已惘然。p>
  19. body>
  20. html>
用CSS来实现

三、 如何使用CSS

1、如何使用CSS之CSS的语法

</>复制代码 
  1. CSS语法可以分为两部分：
  2. #1、选择器
  3. #2、声明
  4. 声明由属性和值组成，多个声明之间用分号分隔，如下图

 

2、如何使用CSS之CSS的四种引入方式

</>复制代码 
  1. #1、行内式
  2. Egon是一个非常了不起的人
  3. #2、嵌入式
  4.     
  5. #3、外部样式表之导入式
  6.     
  7. #4、外部样式表之链接式（企业开发中使用这种方式）
  8.     
</>复制代码 
  1. #1、行内式
  2. 行内式是在标签的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。
  3. "color: red;font-size: 50px;text-align: center">Egon是一个非常了不起的人
  4. #2、嵌入式
  5. 嵌入式是将CSS样式集中写在网页标签内的的标签对中。格式如下：
  7.     "utf-8">
  8.     
  9. Egon是一个非常了不起的人
  10. #新建外部样式表，然后使用导入式和链接式引入
  11. 首先在与html文件同级目录下有一个css文件夹，该文件夹下新建一个外部样式表mystyle.css,内容为
  12. p {
  13.     color: red;
  14.     font-size: 50px;
  15.     text-align: center
  16. }
  17. #3、导入式
  18.     "utf-8">
  19.     
  20. Egon是一个非常了不起的人
  21. #4、链接式（推荐使用） 
  22.     "utf-8">
  23.     "stylesheet" href="css/mystyle.css">
  24. Egon是一个非常了不起的人
  25. #导入式与链接式的区别:
  26. 1、标签属于XHTML,@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的
  27. 2、导入式的缺点：
  28. 导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷，用户体验差。
  29. 3、链接式的优点：
  30. 使用链接式时与导入式不同的是它会在网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
  31. #！！！注意点！！！
  32. 1、style标签必须放到head内 ,type="text/css"代表文本类型的css
  33. 2、type属性其实可以不用写，默认就是type="text/css"
  34. 3、设置样式时必须按照固定的格式来设置，key:value;
  35.     其中;不能省略，最后一个属性其实可以省略，但我们可以简单地统一记成不 
  36.     能省略就行了
四种方式的详细演示

 

 

3、css注释

</>复制代码 
  1. /*中间放注释的内容*/
云服务器 GPU云服务器 什么是css css是什么 css是什么意思 前端开发前端是什么

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2222.html

相关文章

  • 程序员到底要学什么？

    摘要：程序员到底要学什么程序员到底要学什么或者说，程序员到底要学多少东西呢这个问题问到你了吗今天就来简单聊一聊程序员的学习之路。程序员的种类很多，这里只讲前端工程师和后端工程师，因为自己也就接触到这两个层面。 ...

    mo0n1andin 评论0 收藏0

  • 26自学转行前端（写给和1年前一样迷茫的我的你）

    摘要：转行前端有哪些疑虑在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面这里前后端指的是开发的前后端。 转行前端有哪些疑虑？ 在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面：这里前后端指的是web开发的前后端。1、前端岗位需...

    番茄西红柿 评论0 收藏2637

  • 26自学转行前端（写给和1年前一样迷茫的我的你）

    摘要：转行前端有哪些疑虑在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面这里前后端指的是开发的前后端。 转行前端有哪些疑虑？ 在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面：这里前后端指的是web开发的前后端。1、前端岗位需...

    番茄西红柿 评论0 收藏2577

  • 26自学转行前端（写给和1年前一样迷茫的我的你）

    摘要：转行前端有哪些疑虑在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面这里前后端指的是开发的前后端。 转行前端有哪些疑虑？ 在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面：这里前后端指的是web开发的前后端。1、前端岗位需...

    番茄西红柿 评论0 收藏0

  • 百度前端任务(3)(4)(5)——巧谈前端基础html,css布局

    摘要：经过了百度前端技术学院任务三和四五，在这里总结一下前端布局的一些个人见解，很多前端新手就是没有理解怎么布局而一直学不好先说一下，我个人理解的前端布局的思想吧。 经过了百度前端技术学院任务三和四五，在这里总结一下前端布局的一些个人见解，很多前端新手就是没有理解怎么布局而一直学不好 先说一下，我个人理解的前端布局的思想吧。 在前端布局的时候， 先不要设计太多什么margin,paddin...

    CoyPan 评论0 收藏0

  • 百度前端任务(3)(4)(5)——巧谈前端基础html,css布局

    摘要：经过了百度前端技术学院任务三和四五，在这里总结一下前端布局的一些个人见解，很多前端新手就是没有理解怎么布局而一直学不好先说一下，我个人理解的前端布局的思想吧。 经过了百度前端技术学院任务三和四五，在这里总结一下前端布局的一些个人见解，很多前端新手就是没有理解怎么布局而一直学不好 先说一下，我个人理解的前端布局的思想吧。 在前端布局的时候， 先不要设计太多什么margin,paddin...

    YacaToy 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<