CSS:CSS的基础了解

css概述

CSS(Cascading Style Sheets,层叠样式表) 是用于控制网页样式和布局的一种样式表语言。用于描述网页的样式和布局,包括字体、颜色、大小、间距、边框等方面。

前端三🗡客:HTML,CSS,JavaScript,组成了我们看到的页面,CSS时其中不可或缺的一环,如果没有它,页面也就会像数据 一样一行一行展现在我们面前,正是因为CSS强大的修饰能力,让我们看到了五颜六色的页面。

css的发展史

随着技术的不断发展,CSS 也不断更新迭代,目前主要有三个主要版本:CSS1、CSS2 和 CSS3。

CSS1 是最早的版本,于 1996 年推出,引入了基本的样式控制功能,如文本样式、颜色和背景等,当下已基本废弃。

CSS2 在 1998 年发布,增加了更多的样式属性和布局控制功能,如浮动和定位等。

而 CSS3 是最新的版本,于 2011 年开始逐步推出,引入了更多的新特性,如动画、过渡效果、阴影、圆角等,以及对响应式布局和移动端优化的支持。

css的引入规则

三种引入方式

css的修饰这么强大,那么在代码中我们该如何使用它呢。它提供了三种使用方式:行内式(知道即可,不推荐使用),内嵌式,外联式。

行内式:

行内式,顾名思义就是写在行内的样式。在需要使用css修饰的标签上通过style属性添加样式,

样式和样式之间通过 ; 隔开。

行内式的缺点:

  1. 没有完全脱离HTML标签
  2. css样式让标签结构繁重,不利于HTML结构的解读
  3. 一个内联式的css代码只能给一个标签用,复用性差;多个相同时,会增加代码量,影响加载速度。
<div style = "width:300px">
我是盒子
</div>

内联式:

除了行内式,内联式也是写在html页面中的,它相较于行内式更加方便,它写在<head>标签内部写<style>标签,<style>标签写在<title>标签后面 。在style标签中通过class名和id这些选择器完成对页面的渲染

  • 内嵌式优点

    1. 实现了结构与样式的初步分离(css只负责样式,html负责结构)
    2. 多个标签可利用一段代码设置相同的样式,节省代码量。
  • 内嵌式缺点

    1. 结构和样式并没有完全分离,代码仍然写在HTML文件头部
    2. css只能给一个HTML文件使用,不能被多个HTML文件同时利用。
    3. 在HTML中如果css代码太多,会造成文件头重脚轻。

<head>
<style>
.a {
width : 300px
}
样式写在这里
</style>
<head>

外联式: 

由于发展越来越快,页面样式越来越复杂,css样式也越来越多,外联式也营运而生。写在独立的.css文件中的样式。通过<link>标签引入页面 中完成渲染。

外联样式表的两种导入方式

1,通过link标签引入

2,在style标签中通过@import url(路径)语句进行引用

为什么使用link引入,不使用@import引入

  1. 导入式和外联式作用基本相同
  2. 但是导入式在浏览器中加载时,会在HTML结构加载完毕后再进行编译,网速比较慢的时候,会导致网页出现没有css样式的效果,给用户的体验不好。
  3. 实际工作中,较少用导入式,推荐使用外联式样式表。

行内式,内嵌式 ,外联式的优先级

这三个引用方式的优先级为行内式 > 内联式 > 外联式

css的语法规则

1,css中的样式键值对为 属性名:属性值;的形式

2,属性值为字符串时要用""包裹

3,属性和属性之间要用;连接

4,css属性对空格,缩进不敏感

css的注释语法

css的注释语法为/* 注释 内容*/

快捷键:ctrl+/

<style>
/*注释 内容*/
</style>

相关推荐

  1. CSS:CSS基础了解

    2024-04-12 13:10:05       15 阅读
  2. Unity Shader基础知识入门了解

    2024-04-12 13:10:05       12 阅读
  3. 【Python】 了解二分类:机器学习中基础任务

    2024-04-12 13:10:05       11 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-12 13:10:05       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-12 13:10:05       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-12 13:10:05       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-12 13:10:05       20 阅读

热门阅读

  1. css Animation 动画-右进左出

    2024-04-12 13:10:05       17 阅读
  2. 实现移动端和pc端响应式css封装

    2024-04-12 13:10:05       16 阅读
  3. AWS Lab Streaming Data

    2024-04-12 13:10:05       14 阅读
  4. shell脚本每日练习

    2024-04-12 13:10:05       17 阅读
  5. Qt 无法连接MySQL数据库

    2024-04-12 13:10:05       17 阅读
  6. Objective-C学习笔记(NSDictionary,NSFileManager,Copy)4.11

    2024-04-12 13:10:05       13 阅读
  7. Thymeleaf

    2024-04-12 13:10:05       20 阅读
  8. 5.120 BCC工具之zfsslower.py解读

    2024-04-12 13:10:05       16 阅读
  9. c# Xml 和 Json 转换方法记录

    2024-04-12 13:10:05       18 阅读