CSS语法

船长在船上

已于 2022-08-25 22:34:15 修改

阅读量1k

点赞数 1

于 2022-08-25 22:25:29 首次发布

本文链接：https://blog.youkuaiyun.com/SmartJunTao/article/details/126533231

版权

前端开发同时被 3 个专栏收录

140 篇文章

订阅专栏

javascript

66 篇文章

订阅专栏

CSS

11 篇文章

订阅专栏

⭐️⭐️⭐️ 作者：船长在船上
🚩🚩🚩 主页：来访地址船长在船上的博客
🔨🔨🔨 简介：优快云前端领域优质创作者，资深前端开发工程师，专注前端开发，在优快云总结工作中遇到的问题或者问题解决方法以及对新技术的分享，欢迎咨询交流，共同学习

🔔🔔🔔 感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！如有疑问可以留言、评论，看到后会及时回复。

CSS语法

1.css简介

层叠样式表

网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式。

内联样式（行内样式）

在标签内部通过style属性来设置元素的样式

<p style="color:red;font-size:60px;">内联样式（行内样式）</p>

问题：内联样式只能对一个标签生效。如果希望影响到多个元素，必须在每一个元素中都复制一遍；当样式发生变化时，必须要一个一个的修改，非常的不方便。

内部样式表

将样式编写到<head>中的<style>标签里然后通过css的选择器来选中元素，并为其设置各种样式，修改选择器多个标签同时变化。内部样式表更加方便对样式进行复用.

<style>
  p {
    color: red;
    font-size: 30px;
  }
</style>

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

外部样式表

可以将css样式编写到一个外部的CSS文件中，通过<link>标签来引入外部的CSS文件。

只要想使用这些样式的网页都可以对其进行引用使样式，可以在不同页面之间进行复用。

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

将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

2. CSS基本语法

<!-- html中的单行注释 -->
<!-- 
  html中的多行注释
  html中的多行注释
  html中的多行注释
-->


/* css中的单行注释 */
/* 
  css中的多行注释
  css中的多行注释
  css中的多行注释
*/


/* JS(JavaScript)和JQuery中的单行注释*/
/*
  JS(JavaScript)和JQuery中的多行注释
  JS(JavaScript)和JQuery中的多行注释
  JS(JavaScript)和JQuery中的多行注释
*/