邂逅CSS层叠样式表

前言


🐔我们在上篇文章学习了HTML的常见元素,但是编写网页单靠HTML是不行的,因为HTML仅仅只能进行网页的基本骨架的开发,如果想对网页的样式进行编写就需要CSS相关的技术,本文章属于入门级别教程,同时也是个人学习笔记的性值,前端老鸟建议绕路~

一.认识CSS


😳CSS全称是层叠样式表,是为网页添加样式的,CSS并不是一门真正的编程语言,甚至不是一门标记语言,只能被称为计算机语言。

🦔在了解一个技术的时候我们需要理解它的历史,CSS也是这样,我们首先来看下CSS的历史。

  1. 早期的网页都是通过HTML编写的,这个时候还没有CSS编写网页是通过strong br等。
  2. 后来不同浏览器也实现了不同的样式语言但是没有统一。
  3. 1994年,哈肯·维姆·莱和伯特·波斯合作设计CSS,在1996年的时候发布了CSS1。
  4. 直到1997年初,W3C组织才专门成立了CSS的工作组,1998年5月发布了CSS2。
  5. 在2006~2009非常流行 "DIV+CSS"布局的方式来替代所有的html标签。
  6. 从CSS3开始,所有的CSS分成了不同的模块(modules),每一个"modules"都有于CSS2中额外增加的功能,以及向后兼容。
  7. 直到2011年6月7日,CSS 3 Color Module终于发布为W3C Recommendation。

🐸总结:CSS的美化方式和布局方式。

  1. 美化方式:通过设置不同的属性进行美化,颜色,字体等等。
  2. 布局:对HTML进行布局按照某种结构显示(CSS进行布局,flex布局)。

二.编写CSS样式


🦝CSS的语法规则是怎么样的哪?

🐻‍❄️声明了一个单独的CSS规则,比如color:red用来添加CSS样式。

  1. 属性名:需要添加的CSS属性名称。
  2. 属性值:需要添加的对应属性名的属性值。

🐸如何将CSS样式应用到元素上面?在CSS中提供了三种方式将CSS应用到元素上面。

  1. 内联样式。
  2. 内部样式:文档样式表,内部样式表。
  3. 外部样式表。

🐣内联样式:内联样式存在于HTML中的style属性中,CSS样式之间通过;分隔,建议所有属性都加;

  1. 在进行原生开发的时候不建议使用这种写法。
  2. 在进行Vue开发的时候vue-Template中进行开发的时候会使用内联的写法。

🐓内部样式表:将CSS放在HTML文件<head>元素里的<style>元素之中。

在进行Vue开发的时候每一个组件也会有一个style写法和内部样式表写法一样但是原理不同。


🙈外部样式表:外部样式表是将CSS写入一个单独的文件里面然后通过link标签进行引入,使用外部样式表。

  1. 第一步:将css样式在一个独立的css文件中编写(后缀名为.css)。
  2. 第二步:通过元素引入进来。

😳可以在style元素或者CSS文件中使用@import导入其他的CSS文件

三.CSS的注释


😗和上篇文章讲的HTML一样CSS也可以编写注释的内容,CSS注释和HTML注释是不一样的。

arduino 复制代码
/* 这是CSS的注释写法 */

四.常用的CSS属性


🦔CSS的属性有很多,我们如果想全部记住基本不可能,我们往往需要在使用的时候进行查找使用,我们必须掌握的属性有如下这些:

🦝目前需要掌握的CSS属性内容。

  1. font-size:文字大小。
  2. color:文字颜色,前景色。
  3. background-color:背景色。
  4. width:宽度。
  5. height:高度。

🐻‍❄️background-color决定背景色

🐸CSS属性colorCSS用来设置内容文本的前景色,包括文字,装饰线,边框,外轮廓。

五.案例练习


六.总结


🐓这篇文章我们大致了解的CSS的作用以及,常用的基本样式,包含几个基础的样式,CSS包含的内容很多,我们很难进行全部掌握,当我们需要使用某些样式的时候我们可以进行具体的查阅和学习,我们可以练习一下对应案例,初步理解CSS。

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站3 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑9 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
bin915310 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek