作为一名全栈工程师,在日常的工作中,可能更侧重于后端开发,如:C#,Java,SQL ,Python等,对前端的知识则不太精通。在一些比较完善的公司或者项目中,一般会搭配前端工程师,UI工程师等,来弥补后端开发的一些前端经验技能上的不足。但并非所有的项目都会有专职前端工程师,在一些小型项目或者初创公司中,职能划分并不明确,往往要一个人前后端全都会做, 所以作为一名全栈工程师或者后端工程师,掌握必备的前端知识,也是必不可少的一项技能。今天就着重讲解一下,作为一名全栈工程师,前端CSS方面的必须要掌握的相关知识。
CSS 指的是层叠样式表 (Cascading Style Sheets),描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素。通俗点讲:CSS是对网页中的标签进行美化的。
CSS 规则集(rule-set)由选择器和声明块组成:
CSS语法示例如下:
本文主要从几个方面进行讲解CSS样式。
尺寸相关属性主要设置页面中标签样式的大小,边框,边距等信息。如下所示:
关于尺寸【边框,边距,内容,宽度,高度】的示意图,如下所示:
背景相关属性,主要设置页面标签元素的背景样式,如背景色,背景图等信息,如下所示:
文本处理相关属性,主要设置文本相关内容的属性,如:颜色,字体,字号,加粗,斜体等内容。如下所示:
位置相关属性主要设置页面标签元素的左,右,上,下等位置信息,主要通过position进行设置。
position 位置属性,指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型。
如果我们希望将默认的网页标签呈现效果,更改为我们希望的呈现效果,这种操作就称之为网页布局。在进行布局处理的时候,需要用到布局相关的属性。布局通过display属性【设置元素是否被视为块或者内联元素以及用于子元素的布局,例如流式布局、网格布局或弹性布局】进行设置。
flex布局又称弹性布局,它使用flexbox使得容器有了弹性,更加适应各种设备的不同宽度,而不必依赖于传统的块状布局和浮动定位。它是CSS3中新增的规范,目前主流浏览器均已支持。值得一提的是,Flex布局不支持IE9及以下版本。
flex布局中主要包含了以下五个概念:
1. 弹性容器(flex container):采用Flex布局的外层容器。
2. 弹性项(flex item):容器中的子元素。
3. 主轴(main axis): 弹性容器的水平或垂直方向。
4. 交叉轴(cross axis):与主轴垂直的方向。
5. 对齐方式(align):设置弹性项在弹性容器内的对齐方式。
弹性布局常用属性,如下所示:
通过以上三个属性的设置可以方便的讲内容进行布局,如居中,左上,右上,左下,右下等
CSS 网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式。
gird布局的基本概念
flex适合一维布局,grid适合二维布局。将内部元素已行列的形式展示
justify-items
和 justify-self
以行轴为参照对齐项目,属性align-items
和 align-self
以列轴为参照对齐项目。关于size尺寸,background背景,文本,position位置,布局的综合示例,如下所示:
综合示例效果有:文本加粗,颜色,元素内间距,外间距,边框,背景色,位置,flex布局,书写模式等综合应用。效果如下所示:
示例源码Html部分,如下所示:
凉州词
黄河远上白云间,
一片孤城万仞山。
羌笛何须怨杨柳,
春风不度玉门关。
凉州词
黄河远上白云间,
一片孤城万仞山。
羌笛何须怨杨柳,
春风不度玉门关。
凉州词
黄河远上白云间,
一片孤城万仞山。
羌笛何须怨杨柳,
春风不度玉门关。
凉州词
黄河远上白云间,
一片孤城万仞山。
羌笛何须怨杨柳,
春风不度玉门关。
凉州词
黄河远上白云间,
一片孤城万仞山。
羌笛何须怨杨柳,
春风不度玉门关。
凉州词
黄河远上白云间,
一片孤城万仞山。
羌笛何须怨杨柳,
春风不度玉门关。
凉州词
黄河远上白云间,
一片孤城万仞山。
羌笛何须怨杨柳,
春风不度玉门关。
凉州词
黄河远上白云间,
一片孤城万仞山。
羌笛何须怨杨柳,
春风不度玉门关。
凉州词
黄河远上白云间,
一片孤城万仞山。
羌笛何须怨杨柳,
春风不度玉门关。
凉州词
黄河远上白云间,
一片孤城万仞山。
羌笛何须怨杨柳,
春风不度玉门关。
凉州词
黄河远上白云间,
一片孤城万仞山。
羌笛何须怨杨柳,
春风不度玉门关。
凉州词
黄河远上白云间,
一片孤城万仞山。
羌笛何须怨杨柳,
春风不度玉门关。
示例源码css部分,如下所示:
*{
padding: 0px;
margin: 0px;
}
.container{
width: 100%;
}
.article{
margin-top: 10px;
width: 100%;
padding: 10px;
display: flex;
box-sizing: border-box;
flex-wrap: wrap;
flex:1;
flex-direction: row;
justify-content: center;
}
.article .poem{
border: 1px;
border-style: dotted;
border-color: #f9f9f9;
border-radius: 2px;
margin: 4px;
width: 15%;
}
.article-v .poem{
background-color: goldenrod;
display: flex;
}
.article .poem span{
padding:4px;
margin: 4px;
letter-spacing: 6px;
color: #F9F9F9;
font-family: Arial, Helvetica, sans-serif;
}
.article .poem .title{
display: block;
font-size: larger;
font-weight: bolder;
}
.article .poem .author{
display: block;
font-size: large;
font-weight: bold;
}
.article .poem .content{
display: block;
font-size: 18px;
}
.article-v .poem .title{
writing-mode: vertical-lr;
}
.article-v .poem .author{
writing-mode: vertical-lr;
}
.article-v .poem .content{
writing-mode: vertical-lr;
}
.article-h .poem{
background-color: darkblue;
display: block;
}
CSS 过渡允许您在给定的时间内平滑地改变属性值。主要设置属性,如下所示:
transform设置变换,一般设置2D变换
3D变换,一般设定一个容器,即容器内容的子元素进行3D方式进行渲染展示,容器外的默认2D展示。
CSS动画使元素逐渐从一种样式变为另一种样式。您可以随意更改任意数量的 CSS 属性。如需使用 CSS 动画,您必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。
动画相关属性,如下所示:
综合示例2主要应用过渡,变换,动画等效果,如下所示:
示例源码Html如下所示:
我在后面
我在前面
示例源码CSS部分,如下所示:
.{
margin: 0px;
padding:0px;
}
.container{
position: absolute;
left: 50px;
top: 50px;
transform-style: preserve-3d;
perspective: 500px;
transform-origin: center;
}
.container div{
width: 200px;
height: 200px;
}
.container .box{
transform-style: preserve-3d;
perspective: 500px;
transform-origin: center;
transition: all 1s;
animation: xuanzhuan 5s linear infinite;
}
.container .box div{
position: absolute;
left: 0px;
top:0px;
line-height: 200px;
text-align: center;
}
.container .box .one{
transform: translate3d(0,0,-50px);
border: 1px solid gray;
background-color: beige;
}
.container .box .two{
border: 1px solid gray;
background-color: red;
}
@keyframes xuanzhuan{
from{
transform: rotate3d(0,1,0,0deg);
}
to{
transform: rotate3d(0,1,0,360deg);
}
}
以上就是全栈工程师必须要掌握的前端CSS技能的全部内容。希望可以抛砖引玉,一起学习,共同进步。