当前位置: 首页 > news >正文

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>

http://www.lryc.cn/news/334482.html

相关文章:

  • Android Framework学习笔记(2)----系统启动
  • 项目管理中的估算活动资源
  • java中的set集合及其子类
  • shell脚本查询匹配文件进行操作
  • vulnhub----natraj靶机
  • Web Component 组件库有什么优势
  • 如何配置vite的proxy
  • Linux CentOS基础操作
  • 最佳情侣身高差
  • 谷歌开发者账号防关联:如何选择性价比高的VPS,阿里、腾讯、酷鸟、AWS?
  • Virtual digital asset $E=$eaco. EarthChain
  • [计算机网络] 当输入网址到网页
  • 五年经验,还不懂小表驱动大表
  • springboot+websocket+微信小程序实现评论区功能
  • 【项目】如何在面试中介绍自己的项目经验(附如何解决未知的问题成长路线)
  • 解决Selenium元素拖拽不生效Bug
  • 提示工程中的10个设计模式
  • 提高网站安全性,漏洞扫描能带来什么帮助
  • 不要再使用 @Builder 注解了!有深坑呀!
  • 《UE5_C++多人TPS完整教程》学习笔记31 ——《P32 角色移动(Character Movement)》
  • 怎么使用jwt,token以及redis进行续期?
  • AI日报:北大Open Sora视频生成更强了;文心一言可以定制你自己的声音;天工 SkyMusic即将免费开放;
  • 替换空格(替换特定字符)
  • ctfshow web入门 php特性 web123--web139
  • pta L1-002 打印沙漏
  • 【简单讲解下PHP AES加解密示例】
  • 设计模式总结-外观模式(门面模式)
  • LiveGBS流媒体平台GB/T28181常见问题-系统服务日志如何配置日志个数日志路径日志时长web操作日志操如何配置保留天数及过滤
  • es6:set()和weakset()
  • C#仿OutLook的特色窗体设计