网站专题BANNER

新手前端指南:一小时搞懂 CSS 属性应用

发表日期:2021-09-04 文章编辑:洛壹网络 文章来源:深圳网站建设

CSS 包含了非常多的属性和规则,学习 CSS 就是学习这些属性的用法,今天我们会挑选出最常用的属性做说明。


文字相关属性

1. 文本属性

在 CSS 中,文本指的是标签中的文字内容,我们可以控制一些特定的文本属性,常用的包含:


color:标签中的文本颜色,使用颜色名或 #212131 这样的编码

line-height:每行文本的高度,用像素单位设置

text-align:文本的对齐属性,包含 left、right、center(居中)

text-decoration:文本的修饰内容,包含 none、underline(下划线)、line-through(删除线) 等设置

word-spacing:字间距,用像素单位设置

这里就不每个属性都演示一次了,大家可以自己动手试试。我们主要关注 text-align 这个属性。


text-align 这个属性有向下继承的特性,即我们在父标签中定义了对齐方向,那么子标签也会遵守这个方向。


2. 字体属性

在 CSS 中,字体属性和文本属性是分开的,这是很容易搞混的东西。字体属性用的是 font 属性,而在 font 下还包含若干常用的属性:


font-family: 设置文字的字体

font-size:文字的字号,用像素表示

font-style:字体风格,包含 normal(默认)、italic(斜体)、oblique(倾斜)

font-weight:字体的字重,可以用数字也可以字体自带字种

在字体设置的规则上,并不是我们想怎么设置都可以,而是考虑用户有什么字体。


因为浏览器对文字的渲染是通过用户本地的字库来完成的,这也是为什么我们设计 UI 和网页的时候不能随心所欲用字体的原因之一。


在中文界面中,通常我们不用去设置中文字体,但可以为英文或数字文本设置一些常见的英文字体,例如 「Arial」,「Futura」 等。


并且可以设置多个字体,通过逗号隔开,如果第一个字体用户没有,那么会自动替换成下一个字体。


3. 列表属性

列表在实际应用中非常的普遍,CSS 有专门针对列表的属性设置,即 list-style 属性,它还包含下面一些属性类型:


list-style-image:列表项符号替换成图片的设置;

list-style-postion:列表项符号图片所处的位置;

list-style-type:列表项符号的类型,包含none、disc(实心圆)、circle(空心圆)、suqare(方形)、decimal(数字)等;

list-style 这个属性只能作用在 ul、ol、li 标签,对其它标签无效。对于列表项的图像设置我们先撇开不谈,我们设置最多的数值就是采用 none,否则浏览器会自带列表项符号(很丑)。


背景设置

前面为了展示模块实际区域,我们应用过很多次 background 属性来定义背景色,相信大家已经有所了解。但是,background 的作用可不仅仅只是定义背景色而已,它包含:


background-color:定义背景色的属性

background-image:定义背景图片的属性,使用 “url ( img/logo.png )” 的方法

background-position:定义背景图片的x、y轴距离标签左上角的距离

backgorund-repeat:定义图片重复的规则

背景色我们已经知道,关键就在背景图的使用上。比如淘宝中包含了各种酷炫的图片,虽然多数图片是内容图,但是,也有少部分图片是网站本来的基础设计内容之一,也就是——切图。


排版定位属性

如果我们通过浏览器的检查功能去查看界面的框架,就会发现实际上一个完整的网页是由无数矩形拼接起来的,我在自己的教学中为了方便大家理解称其为 —— 矩阵视图。


要把这些矩形框架合理搭建起来,就需要应用到定位相关的属性,来控制它们的顺序和位置,主要应用到的属性包含下面几个:


position:定位类型设置,主要有 static(默认)、 relative(相对定位)、absoulte(绝对定位)、fixed(固定定位) 属性。

z-index:页面的 z 轴层级设置,用数字表示序列。

float:元素的浮动定位设置,可以设置 left、right。

clear:清除浮动元素的属性,包含 left、right、both、none。

top/left/right/bottom:上左右下方向的偏移距离设置。


1. 定位类型

我们主要在 postion 中会使用的几种定位类型,是绝对能把新手绕晕的内容,先简单介绍一下:


position:static 是定位的默认值,也就是没有定位

position:relative 相对定位,对于该元素原本的位置进行定位

position:absolute 绝对位置,对于上一级父元素的位置进行定位

position:fixed 固定定位,是对于浏览器画布区域进行定位

这么简单的解释大家肯定已经被绕晕了,所以我们换个角度,一个元素的坐标轴数值,完全是由其 「 中心点」来确定,但是这个中心点并不是只固定在画布左上定点 (fixed),有可能是画布中任意一点(relative),也可能是关联了上级图层(absolute)。


不同中心点制定逻辑,就会造成不同的元素运动效果,但这和网页布局有什么关系?


确实在一个固定了宽高的页面中,定位没太多使用的必要,但是,有「 响应式」布局的概念,我们可以拖动浏览器大小修改画布尺寸,以及类似苹果详情页这种喜欢使用大量动效的骚操作,这些都是 「运动」 的过程。


于是我们就必须采取定位的措施,确保元素的显示正常……


应用 static 以外的定位类型以后,z-index、top/left/right/bottom 等其它属性才能生效,这四个位置属性只是设置相对 「中心点」 的移动方向,但是 z-index 就比较有趣了。


它可以制定元素间堆叠的顺序,因为当我们使用特殊的定位类型以后,元素之间就可以相交,比如我们在 Sketch 中添加了很多图层,这些图层也能相交,但上方的图层会覆盖下方的图层,包括上面的苹果官网案例也是,安卓 MD 规范中也有应用。


Z-index 就是就是由正常的数字序号决定优先级,它可以是正数,也可以是负数(负数就处于页面水平层下方,优先级比正常标签更低)。


2. 浮动元素

讲完定位方式,然后我们就要聊聊浮动属性 float 了。大家可以放心,它可没有前面的 Position 属性复杂(但也没简单到哪里去啊)。


对于网页标签来说,多数标签(具有 block 特性的)有独占一行的特征,即使它的宽度并不是100%,但它们也不会允许别的标签和自己并列,大家可以自己输入两个 h1 标签,看看它们是不是有了 「换行效果」。


而 float 属性的主要作用,就是让它们可以根据某个方向进行对齐,并且不会再排斥有别的元素和自己出现在同一行中。


而 clear 属性,则是用来清除特定方向浮动元素的属性,指定左右 left、right,或者两侧 both 都清除浮动元素。


动画相关设置

1. 过渡效果

动效在 web 2.0 以后的需求越来越强,尤其是对于交互的反馈表现,在过去,我们只能依托 JS 来实现操作的动效,但在更新到了 CSS3 以后,就为我们提供了直接操控动效的属性 —— transition。它包含了 4 个下级属性,分别是:


transition-property:需要过渡的 CSS 名称,填写属性名

transition-duration:动画执行的时长,填写秒数即可

transition-timing-function:动画缓动设置,如 ease-in、ease-out 等

transition-delay:动画延迟设置,填写秒数即可

看一个鼠标悬浮在按钮上,背景色在2秒从灰色过渡成红色的代码案例:


默认和 hover 相当于制定了两个关键帧,而我们把需要制作成补间动画的参数在起始帧(div选择器)进行声明,那么动画效果就可以实现。


当然,这个效果还可以包含宽、高、字号、边框、角度等其它属性。一条 transition 属性中可以声明多个需要执行过度动画的元素和对应参数,用逗号隔开:


在设置缓动效果上,transition 除了默认自带的几种标准缓动外,还支持创建贝塞尔曲线的函数,其输入格式为 —— cubic-bezier(n,n,n,n),在很多动效软件中都有提供该数值方便我们直接输入。


2. 动画属性

前面的过度,是通过 hover 的定制来实现两个关键帧之间的补间。但是,部分情况下我们也会希望什么操作也不做,元素自己会执行动画事件,或者出现更多的关键帧。


于是,就引入了 animation 属性,它主要包含下面几种下级属性:


animation-name:定义动画事件名

animation-duration:动画完成时间

animation-timing-function:动画的缓动效果

animation-iteration-count:动画的播放次数,可是指定数字,也可以是 infinte (无限)

然后我们会用一个专门的动画控制指令 @keyframes 来对动画实现具体的定义,可以看看下面的代码案例:


也就是说,我们对一个需要发生动画的标签进行 animation 的设置,先声明一个动画事件的名称和执行规则,然后通过 @keyframes 来关联这个动画,并具体定义动画关键帧的开始和结束属性值。


上方案例的 from 和 to,就是起始关键帧和结束关键帧的属性值,补间的内容会自动生成。但除了只设置这两个帧以外,@keyframes 也允许我们设置一些更具体的关键帧出来,通过使用 % 的形式来制定时间线上的关键帧。

这就等于在这两秒中,我们关键帧制定在了 0秒、0.5秒、1秒、1.5秒、2秒 上,补间动画就会根据这些关键帧开始执行,这就可以帮助我们制作出丰富多样的动画。


其它常用样式属性

复杂的东西告一段落,最后再整理一些基本的内容,让大家缓缓。


1. 色彩设置原理

前面我们使用的 color、background-color 等属性,都是用来指定色彩的属性。但是设置色彩本身,不仅仅只是 16 进制色或者已经给出的颜色命名,还包括可以使用 RGB 和 RGBA 色值。


RGB设置:color: rgb(255,255,0); 复制软件中rgb参数到小括号内即可

RGBA设置:color: rgba(255,255,0,0.5); 在rgb后面增加了一个透明度,0.0 是完全透明,1是不透明


2. 边框其它属性

boder 除了我们看到的描边设置外,还可以用来控制元素圆角的大小,虽然字面理解起来它们关联不是太大,但是 CSS3 中提供了 boder-radius 属性定义元素的四个边角,除了它本身外还包含下级:


border-top-left-radius:左上角

border-top-right-radius:右上角

border-bottom-left-radius:左下角

border-bottom-right-radius:右下角

我们可以通过增加对应的像素数值,来实现圆角矩形的效果,尤其在按钮的实现中。例如:


除了圆角,同属于这个类型的属性中还有一个阴影的属性,那就是 box-shadow 属性。它的设置和 XD 以及 Sketch 的阴影设置是一样的,下方案例分别是阴影的 X轴距、Y轴距离、BLUR模糊值、色彩:


3. 元素透明度设置

CSS 中提供了一个 Opacity 属性专门用来控制元素的透明度,透明度的值和 RGBA 的使用方法一致,并且,这个透明度会影响下级元素,相当于我们为 Sketch 中制作的编组设置了透明度。


4. 盒子属性

在页面的展示中,经常要实现一个遮罩的效果,那么我们就会用到 overflow 盒子属性,这个属性主要用来对标签内的元素状态做应对,比如下面这些设置:


hidden:元素内容超出标签盒子大小,那么就被隐藏(裁切)

scroll:为这个标签盒子提供内部滚动条的机制

auto:如果内容超出标签盒子的大小,那么自动增加内部的滚动条


5. 长宽的具体设置

之前的演示我们应该都知道了,元素尺寸中宽和高的具体设置属性是 width 和 heigh,但是这两个属性的设置除了使用数值外,同时还可以设置百分比,比如:


这样子,这个 div 的宽就是整个浏览器视图区域的 50% 宽,我们变更浏览器宽度的时候,它的宽也会一起变更。也就是说,百分比设置,是根据它的上层标签宽来决定的,50%的宽即上级标签实际尺寸宽度的一半。


除了百分比外,宽和高都提供了一个最小和最大值的设定,即 min-width、max-width、min-height、max-height,它可以限定标签的长宽在一个特定的范围中。


比如上方的设置中,就是基于浏览器视图50%的情况下,最大的尺寸只到 300px,就不会再超出了。min和max两个设置也是自适应中的重要环节。


相关内容
我们
定制
咨询
联系
在线咨询
您的浏览器版本太低

请升级您的浏览器: Internet Explorer11 或以下浏览器: Firefox  /  Chrome  /  360极速浏览器