专栏首页达达前端小奶狗给小喵咪上CSS课程

小奶狗给小喵咪上CSS课程

小奶狗给小喵咪上CSS课程

小奶狗给小喵咪上CSS课程

  • 小奶狗,你好啊?
  • 小喵咪你好~
  • 听说学习HTML,要学习CSS是吗?
  • 是的,小甜心~
  • 那么CSS是什么呢?
  • CSS是Cascading Style Sheet英文的缩写,中文中的意思是层叠样式表,是用来控制网页的样式的,是一种可以与网页结构分离的一种标记型语言哦~
  • 噢,那简单说就是CSS可以让HTML网页设计变得美化?
  • 嗯,没错,css可以使得字体,颜色,背景等呈现不同的样式~
  • 那小宝贝可以讲讲css发展历史吗,我想知道?
  • 嗯,ccs的出现是为了满足网页设计的需求,也是历史发展的必须下产生的,1994年初,哈坤·利提出了 CSS的最初建议,在年底,会议上提出css的建议,1995年再提出,然后建立了w3c组织成立了,这个项目的负责人是哈坤、波斯~
  • 小宝贝,那么什么是W3C呢?
  • W3C是World Wide Web Consortium的缩写,中文意思是“万维网联盟”,是一个Web标准化组织,是它制定了Web的技术标准~
  • 嗯嗯?
  • 1996年底,css成立,同年12月份,正式出版css,接着漫长的岁月中,不断变革,css成为网站需求的必备技术~
  • 嗯,我说一下,1996年W3C组织成立,推出css1.0,1998年推出css2.0~
  • 嗯,如今网页标准化,css技术成为网站的基本要求~
  • 额,小宝贝,一直讲到Web标准,那么什么是网站标准呢?
  • Web标准是网页的标准,其标准是由W3C负责的,狭义的 Web 标准是指网页设计的 DIV+CSS 化,广义的是指要符合W3C和ECMA规范哦~
  • 嗯?
  • 在标准的网页设计中,网页前端设计必备基本语言为CSS,HTML,JavaScript~
  • CSS,HTML,JavaScript?
  • 嗯,HTML负责网页的结构,css负责设计网页的表现,JavaScript负责网页的交互效果
  • 小宝贝,那css样式可以教我一下吗?
  • 样式是css最小的语法单元,css样式基本结构由选择器,样式包围符(开始),声明,延时包围符(结束)~
  • 选择器,声明?
  • 嗯,选择器告诉浏览器该样式将作用于页面的哪些对象,声明包含属性和属性值~
  • 声明包括:属性和属性值?
  • 属性名由一个单词或多个单词组成,多个单词之间通过连字符相连,属性值用来显示效果的参数~
  • 你能多讲点吗?
  • 哦,盒子模型,包括外边框,边框,内边距,宽,高等,margin,border,padding,height,width,background~
  • 它们是否可分?
  • 嗯,margin-top,margin-right,margin-bottom,margin-left; padding-top,padding-right,padding-bottom,padding-left,padding~
  • 嗯,好了,我懂了,我会去了解的,那么讲讲单位?
  • 嗯,讲讲绝对单位,英寸(in):是使用最广泛的长度单位,厘米(cm):生活中最常用的长度单位,毫米(mm):在研究领域使用广泛,磅(pt):在印刷领域使用广泛,也称点~
  • 是不是也有相对单位?
  • 是的,相对单位与绝对单位相比显示大小不是固定的,会受到屏幕分辨率,等各种因素影响~
  • 那么相对单位也有一些单位,需要了解的吧?
  • 是的,有em,它是表示元素的字体高度,(line-height: 2em),ex,它是根据所使用的字体中小写字母x的高度作为参考的,px是根据屏幕像素点来决定的~
  • 额,懂,听说要了解一下css的优先级样式?
  • 嗯,一般是标签选择器为1,伪元素和对象选择器为1,类选择器为10,属性选择器为10,ID选择器为100等~

结言

好了,欢迎在留言区留言,与大家分享你的经验和心得。

感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。

作者简介

达叔,理工男,简书作者&全栈工程师,感性理性兼备的写作者,个人独立开发者,我相信你也可以!阅读他的文章,会上瘾!,帮你成为更好的自己。长按下方二维码可关注,欢迎分享,置顶尤佳。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 5-css选择器

    后代选择器是选择父元素的所有子孙元素,一级子元素原则只选择第一级子元素,不会再向下查找元素

    达达前端
  • 前端面试日更解答 2020-03-23

    110.slice()与splice()的用法和区别你清楚吗? 109.[html]图片上传时实现本地预览功能的原理 108.数据类型检测的相关知识 10...

    达达前端
  • Web数据交互技术

    web叫全球广域网,可以叫做万维网,是一种分布式结构,建立在Internet上的网络服务。万维网共享分布在网络上的各个服务器中的所有互相连接的信息。这样子上网者...

    达达前端
  • 如何把custom form 7添加到wordpress每个页面

      我们已经知道wordpress如何添加contact form 7了,也知道[contact-form-7 id="xx" title="mytitle"]...

    ytkah
  • .NET开发框架(三)-高可用服务器端设计

    我们引入NLB,相对于ARR来说,ARR是应用级别的负载均衡方案,ARR只能做请求入口的分发服务,而NLB则是服务器级别的负载均衡方案。

    .Net框架学苑
  • 零基础html5+div+css+js网页开发教程第007期 网页基本代码框架

    上一节中,我们学习了利用hbuilder工具,对我们的日常网页开发进行快速开发。我们可以使用像数学一样的技巧,快速生成有规律的代码。在实际企业开发中,只要能满足...

    刘金玉编程
  • 启动MySql提示:The server quit without updating PID file(…)失败

    叶瑾
  • 『开发技术』MXNet中np.array与ndarray相互转换

    在MXNet中,NDArray是一个类,也是存储和变换数据的主要工具。如果你之前用过NumPy,你会发现NDArray和NumPy的多维数组非常类似。然而,ND...

    小宋是呢
  • 爬虫 | Python爬取网页数据

    之前也更过爬虫方面的内容 如何从某一网站获取数据,今天再更一次。后面会陆续更一些爬虫方面的内容(HTML, requests, bs4, re ...),中间可...

    bugsuse
  • 架构概念简析及初识架构师

    在软件设计中,人们对很多概念存在误解,或者模糊不清,其中一个最为普遍的误解就是:将架构和框架混为一谈。还有对类库和框架的区别是什么很疑惑。本文就这些概念性的问题...

    進无尽

扫码关注云+社区

领取腾讯云代金券