vue开发之style(六)(CSS页面布局之样式、背景、文字)

  最近在学vue开发,并且将学习笔记与大家一起分享,前面讲了vue环境的搭建:

  基于vscode的Vue前端环境搭建问题及解决办法

  还有vue的使用,重点就在webpack这个:

  vue开发之webpack(一)(这个太重要,系列专讲)

  vue开发之webpack(二)(webpack注释、ES6介绍)

  vue语法块包括三部分:template、script、style,其中template就是页面的设计,这里也有分享:

  vue开发之template(三)(标签属性介绍一)

  还有vue全家桶其他部分的介绍:

  vue全家桶之vue-router和vuex

  vue template的介绍还有两节,即本系列的四和五,将在明后两天分享出来,因为平台的原因吧,就先不发出来了。今天先分享style语法块,即使用CSS进行页面布局,有兴趣的朋友欢迎学习整个系列。

  01CSS样式

  CSS 指层叠样式表 (Cascading Style Sheets)

  样式通常保存在外部的 .css 文件中。

  CSS声明总是以分号(;)结束,声明总以大括号({})括起来:

  p {color:red;text-align:center;}

  其中:p为选择器,color为属性id,red为值

  CSS注释以 结束。

  HTML元素以id属性来设置id选择器,CSS中id 选择器以”#”来定义,ID属性不要以数字开头。

  class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。

  class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点”.”号显示。

  .center {text-align:center; margin-left:20px}

  注意:不要在属性值与单位之间留有空格

  也可以指定特定的HTML元素使用class,如所有的 p 元素使用 class=”center” 让该元素的文本居中:

  p.center {text-align:center;}

  插入样式表的方法有三种:

  外部样式表(External style sheet)——css文件内部样式表(Internal style sheet)——style标签内联样式(Inline style)——————–style属性优先级:内联>内部>外部>浏览器默认样式

  02CSS背景

  CSS 属性定义背景效果:

  (1)background-color 背景颜色

  body {background-color:#b0c4de;}

  颜色:#ff0000或者rgb(255,0,0)或者red三种形式中的一个

  三种颜色 红,绿,蓝的组合从0到255,一共有1600万种不同颜色(256 x 256 x 256)。

  数年以前,当大多数计算机仅支持 256 种颜色的时候,一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是,微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色(双方大约各使用 20 种)。

  我们不确定如今这么做的意义有多大,因为越来越多的计算机有能力处理数百万种颜色,不过做选择还是你自己。

  最初,216 跨平台 web 安全色被用来确保:当计算机使用 256 色调色板时,所有的计算机能够正确地显示所有的颜色。

  (2)background-image 背景图像

  background-image 属性描述了元素的背景图像,默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体。

  body {background-image:url(‘paper.gif’);}

  (3)background-repeat设置平铺

  background-repeat:no-repeat;不平铺background-repeat:repeat-x; 水平平铺background-repeat:repeat-y; 垂直平铺

  (4)background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。

  (5)background-position 设置背景图像的起始位置

  background-position:right top;属性可以简写如下:body {background:#ffffff url(‘img_tree.png’) no-repeat right top;}

  来看一个设置背景图片的示例:

  今天就先分享这么多了,明天继续说,欢迎关注,一起学习vue系列。最近持续更新中

  因为本人的研究方向原来是C++,python语言,深度学习,计算机视觉,tensorflow框架,AI部署,图像处理等,所以本号有这些方向的分享。最近是因为有需要做一个前端项目,所以在自学vue前端开发,这里将学习的笔记分享出来给大家参考。后面还会分享有关图像处理与深度学习计算机视觉实战的内容~

  

标签