CSS3基础知识

HTML标签的外观样式是由CSS(层叠样式表 Cascading Stylesheet)来控制的。CSS是程序语言,但它与设计紧密相关,所以它也是UI设计师必须要掌握的知识。HTML重在结构布局、标签清晰的命名、以及模块化、可维护;而CSS侧重于精准还原设计稿。

CSS的引入

我们要让CSS控制html标签的样式,首先我们要先引入css,css的引入方式主要有三种,前面富文本编辑器里面的样式叫做内联式,也就是给标签的style属性添加值。比如之前我们写的案例:

这种方式在进行微信公众号排版时经常用到,不过在写网页的时候不是很推荐,因为我们需要给每个标签添一个个加样式比较麻烦,而且不方便以后维护。

我们再来看下面的两种引入方式,嵌入式和外部式,我们先来看案例:

在第一节的内容里面,我们新建了项目的文件夹结构,而通常我们会把样式文件的名称命名为style.css,你也可以随意命名,比如home.css、index.css都是可以的。我们后面会把css的样式都写在style.css里面

既然CSS引入方式有三种,要是我们用这三种方式给同一个标签同时添加了不同的样式,哪种方式的样式会起作用呢?这会涉及到优先级的问题,大家学完所有内容后可以查看技术文档再来研究一下,通常是内联式>嵌入式>外部式。

选择器

大家是不是已经发现我们写的页面有点丑?我们可以对页面里面的HTML标签进行CSS样式的美化,然后。但是我们的代码里面<view>组件这么多,要是不对每个组件进行区分,就很难对每个组件进行美化了。

类选择器与ID选择器

这个时候我们就要先了解一下选择器的概念。选择器是用来干什么的呢?从名字里我们就可以看出来,就是为了选择。比如学校有1000个人,我们要选择出其中一个人,那我们可以给所有人一个学号,这个学号是唯一的,我们可以称这个学号为id,可以精准的选择;还有的时候我们需要对一群人进行分类选择,比如整个班级或者所有男生,这个班级、性别,我们可以称为class。

 

  • 属性( property)是一个标识符,用可读的名称来表示其特性
  • 值(value)则描述了浏览器引擎如何处理该特性。每个属性都包含一个有效值的集合,它有正式的语法和语义定义,被浏览器引擎实现。

学习说明

CSS3 的属性非常多,我们把最常用的进行了一个分类。点击属性名,就可以打开它在w3cshool的对应页面,每个案例最好都实际操作一下。当大家了解了这些属性,并完成了今天的任务之后,可以阅读每个属性分类对应的MDN技术文档。

技术文档:CSS参考手册

这里大家只需要了解CSS的字体属性文本属性背景属性边框属性盒模型

CSS涉及的知识点非常多,现在大家也只需要知道有这些概念即可,学技术千万不要在没有看到实际效果的情况下来死记概念。概念没有记住一点关系都没有,因为大家可以随时来查文档。接下来我们也会有实际的例子让大家看到效果,大家想深入学习的时候可以回头再看这些文档。

字体属性与文本属性

 

字体属性

 MDN进阶文档:字体属性
font 在一个声明中设置所有字体属性。简写属性
font-family 规定文本的字体系列。
font-size 规定文本的字体尺寸。
font-style 规定文本的字体样式。
font-weight 规定字体的粗细。
@font-face 通过 CSS3,web 设计师可以使用他们喜欢的任意字体。

文本属性

颜色单位

长度单位

vw、vh

百分比、em、px、

 

MDN进阶文档:文本属性
color 设置文本的颜色。
line-height 设置行高。
text-align 规定文本的水平对齐方式。
text-decoration 规定添加到文本的装饰效果。
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。
text-wrap
word-break
text-shadow 向文本添加阴影

 

下面这些关于CSS的基础知识点,大家可以结合我们是如何调整Word、PPT的样式的来理解,比如我们是怎么调整文本的大小、颜色、粗细等等的,添加样式的时候要注意随手实战了解了效果再说。

比如class为title的<view>组件里面的文字是标题,我们需要对标题的字体进行加大、加粗以及居中处理,这时候我们就可以在home.wxss文件里加入以下代码,然后大家看看有什么效果。

通过.title这个选择器,我们就选择到了class为title的<view>组件,然后就可以精准地对它进行美化,对它的美化代码不会用在其他组件上了。

大家也要留意css的写法,这里font-size,font-weight,text-align外面称之为属性,冒号:后面的我们称之为值,属性:值这一整个我们叫做声明,每个声明我们用分号;隔开。大家不要记这些概念,知道是个什么东西就行了。

class为item-title的<view>组件里面的文字是一个列表的标题,我们希望它和其他文字的样式有所不同,不过这个标题要比title的字体小一些;比其他文字更粗,但是比title更细;颜色我们可以添加一个彩色字体,

我们希望描述类的文字颜色浅一点,不要那么黑,我们可以换一个浅一点的颜色,我们在home.wxss下面继续加代码。

大家注意,我们这里有两个选择器,一个是desc,一个是item-desc,当我们希望两个不同的选择器有相同的css代码时,可以简化一起写,然后用逗号,隔开。

除了标题(class为title和item-title的<view>组件)我们都给他们加了字体大小,我们希望所有的文字大小、行间距有一个统一的设定。

为了大家方便查阅技术文档,我们把这些常用的css技术文档整理到以下表格,方便大家更深入的去学习。

字体属性
font-family 规定文本的字体系列。
font-size 规定文本的字体尺寸。
font-weight 规定字体的粗细。
文本属性
color 设置文本的颜色。
line-height 设置行高。
text-align 规定文本的水平对齐方式。

盒模型

边框属性

盒模型

大家有没有发现段落之间的距离、文字之间的距离,以及与边框之间的距离都比较拥挤?这个时候就需要用到盒子模型啦。盒子模型就像一个长方形的盒子,它有长度、高度、也有边框,以及内边距与外边距。我们通过实战来了解一下。

长度、高度、边框我们比较好理解,那这个内边距和外边距是什么意思呢?

内边距就是这个长方形的边框与长方形里面的内容之间的距离,有上边距,右边距、下边距、左边距这个四个内边距,分别为padding-top,padding-right,padding-bottom,padding-left。注意是上、右、下、左,这样一个顺时针。

那外边距就是这个长方形的边框与长方形外面的内容之间的距离,同样也有上边距margin-top,右边距margin-right,下边距margin-bottom,左边距margin-left这个四个边距。同样也是上、右、下、左这个顺时针。

比如我们给id为lesson3和study的<view>组件加一个内部距,让文字

padding的简写  上面这四个padding是可以做一定的简写的,关于padding的简写,大家可以去阅读以下技术文档,多用就会了,CSS padding属性 ,在这里有四个padding简写的案例,比如上面的这四条声明可以简写成padding:20px 15px。大家可以业余深入了解一下。

class为title的view组件是标题,我们希望它和下面的文字距离大一点,我们可以添加以下样式:

这里咋又冒出了一个em的单位,em是相对于当前字体尺寸而言的单位,如果当前你的字体大小为16px,那1em为16px;如果当前你的字体大小为18px,那1em为18px。

为了让class为item-title的<view>组件,也就是列表的标题更加突出,我们可以给它左边加一个边框,

这样,小程序的一篇文章的样式看起来就算马马虎虎可以接受啦~为了便于大家查阅,我们也把盒子模型的三类属性整合在了一起

内边距属性
padding 在一个声明中设置所有内边距属性。
padding-top 设置元素的上内边距。
padding-right 设置元素的右内边距。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
外边距属性
margin 在一个声明中设置所有外边距属性。
margin-top 设置元素的上外边距。
margin-right 设置元素的右外边距
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
边框属性
border 在一个声明中设置所有的边框属性。比如border:1px solid #ccc;
border-top 在一个声明中设置所有的上边框属性。
border-right 在一个声明中设置所有的右边框属性。
border-bottom 在一个声明中设置所有的下边框属性。
border-left 在一个声明中设置所有的左边框属性。
border-width 设置四条边框的宽度。
border-style 设置四条边框的样式。
border-color 设置四条边框的颜色。
border-radius 简写属性,设置所有四个 border-*-radius 属性。
box-shadow 向方框添加一个或多个阴影。

背景属性

MDN进阶文档:背景属性
background 在一个声明中设置所有的背景属性。
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 设置元素的背景图像。
background-position 设置背景图像的开始位置。
background-repeat 设置是否及如何重复背景图像。
background-origin 规定背景图片的定位区域。
background-size 规定背景图片的尺寸。
background-clip 规定背景的绘制区域。

CSS简写

简写

CSS继承

继承

伪类

CSS伪类是添加到选择器的关键字,指定要选择的元素的特殊状态。例如,:hover 将在用户悬停在选择器指定的元素上时应用样式。

伪类连同伪元素一起, 他们允许你不仅仅是根据文档DOM树中的内容对元素应用样式,而且还允许你根据诸如像导航历史这样的外部因素来应用样式(:visited, 为例), 同样的,可以根据内容的状态 (例如 在一些表单元素上的 :checked ), 或者鼠标的位置 (例如 :hover 让你知道是否鼠标在一个元素上悬浮)来应用样式.

:hover悬停

:visited

:focus

:first-child and :last-child

:nth-child

odd and even

技术文档:CSS伪类

https://marksheet.io/css-pseudo-classes.html