认识CSS

CSS

CSS表示层叠样式表(Cascading Style Sheet,简称:CSS,又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表) 是为网页添加 样式的代码
在这里插入图片描述
在这里插入图片描述
CSS是一种语言吗?

  • MDN解释:CSS 也不是真正的编程语言,甚至不是标记语言。它是一门样式表语言;
  • 维基百科解释:是一种计算机语言,但是不算是一种编程语言;

历史

早期的网页都是通过HTML来编写的,但是我们希望HTML页面可以更加丰富

  • 这个时候就增加了很多 具备特殊样式的元素 :比如i、strong、del等等;
  • 后来也有不同的浏览器 实现各自的样式语言,但是没有统一的规划;
  • 1994年,哈肯·维姆·莱和伯特·波斯 合作设计CSS,在1996年的时候发布了 CSS1
  • 直到1997年初,W3C组织才专门 成立了CSS的工作组,1998年5月发布了 CSS2
  • 在2006~2009非常流行 “DIV+CSS” 布局 的方式来替代所有的html标签;
  • 从CSS3开始,所有的CSS分成了 不同的模块(modules),每一个“modules”都有于CSS2中额外增加的功能,以及向后兼容;
  • 直到2011年6月7日,CSS 3 Color Module 终于发布为W3C Recommendation;

总结:CSS的出现是为了美化HTML的,并且让结构(HTML)与样式(CSS)分离

  • 美化方式一:为HTML 添加各种各样的样式,比如颜色、字体、大小、下划线等等;
  • 美化方式二:对HTML 进行布局,按照某种结构显示(CSS进行布局 – 浮动、flex、grid);

编写

声明(Declaration)一个单独的CSS规则,如 color: red; 用来指定添加的CSS样式。

  • 属性名(Property name):要添加的css规则的名称;
  • 属性值(Property value):要添加的css规则的值;
    在这里插入图片描述

应用

CSS提供了3种方法,可以将CSS样式应用到元素上

  • 内联样式(inline style)
  • 内部样式表(internal style sheet)、文档样式表(document style sheet)、内嵌样式表(embed style sheet)
  • 外部样式表(external style sheet)

内联样式(inline style)

内联样式(inline style),也有人翻译成行内样式。

  • 内联样式表存在于 HTML元素的style属性 之中。
  • CSS样式之间用分号 ; 隔开,建议每条CSS样式后面都加上分号 ;
    在这里插入图片描述

内部样式表(internal style sheet)

内部样式表(internal style sheet)

  • 将CSS放在HTML文件 <head>元素里的<style>元素 之中。
    在这里插入图片描述

外部样式表(external style sheet)

外部样式表(external style sheet) 是将css编写一个独立的文件中,并且 通过<link>元素 引入进来。

  • 第一步:将css样式在一个独立的css文件中编写(后缀名为.css);
  • 第二步:通过 <link>元素 引入进来;
    在这里插入图片描述
    可以在style元素或者CSS文件中使用 @import 导入其他的CSS文件
    在这里插入图片描述

注释

CSS代码也可以添加注释来方便阅读

  • CSS的注释和HTML的注释是不一样的;
  • /* 注释内容 */
    在这里插入图片描述

官方文档

CSS官方文档地址
https://www.w3.org

CSS推荐文档地址
https://developer.mozilla.org

由于浏览器版本、CSS版本等问题,查询某些CSS是否可用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值