现在是选择web开发作为职业选择的合适时机。就像网页设计师一样，网页开发人员也着迷于尝试新css技术的方法，并突破了css可以做的限制。
在这里，我们将介绍一些新的css技术和整个规范，这些技术正在进入创意设计。您可以通过描述良好的css控制设计的几乎任何方面。此外，它可以通过更清晰，更一致的代码增强整体用户体验。
1.首字母首字母是一个css属性，该属性选择元素的第一个字母并指定字母占用的行数。大多数情况下，它用于印刷媒体和信息网站，新闻网站，其中段落的第一个字母比其他内容高得多。
initial-letter属性会自动调整创建风格化首字下沉所需的行数和字体大小。首字母批准以下值：
<number>指的是字母占用的行数，其中不接受负值;如果要重置值，如果它可以从级联继承并且没有应用于第一个字母的缩放效果，则normal是有用的;<integer>确定字母在预设大小时应下沉的行数。值必须大于零，如果未指定该值，则重复大小值，将其覆盖到最接近的正整数;该::first-letter pseudo-element可用于选择将被格式化为一个字母字符。在::first-letter pseudo-element不选择具有显示元件的第一个字母：内联，但只适用于有块，表芯，表标题，或列表项的显示值的元素。
<!doctype html>
<html>
<head>
<style>
p {
font-family: serif;
font-size: 20px;
margin-bottom: -15px;
}
h1 {
font-family: sans-serif;
font-size: 3.1em;
color: black;
}
body {
padding: 10px;
}
div {
width: 550px;
line-height: 25px;
}
p:first-of-type:first-letter {
background-color: black;
color: white;
float: left;
font-size: 50px;
margin-right: 10px;
margin-top: 7px;
padding: 18px;
box-shadow: 0 0 10px -2px black;
}
</style>
</head>
<body>
<h1>about initial letter</h1>
<div>
<p>only one who devotes himself to a cause with his whole strength and soul can be a true master. for this reason mastery demands all of a person</p>
<p>concern for man and his fate must always form the chief interest of all technical endeavors. never forget this in the midst of your diagrams and equation</p>
</div>
</body>
</html>
2.可变字体可变字体表示作为opentype规范的一部分定义的一组新功能，允许字体文件在单个文件中包含多种字体变体，称为变量字体。实际上，它允许您只使用一个@ font-face引用来访问字体文件中包含的变量。此外，可变字体允许转换字体样式，自定义字体样式和动画等功能。使用可变字体的好处是您可以访问所有可用样式，重量和宽度。
可变字体通过变化轴定义它们的变化，有5个标准轴：
ital：斜体轴的工作方式不同，因为它已启用或禁用，中间没有。可以使用font-style css属性设置该值。此外，通过引入font-synthesis：none，将阻止浏览器意外地应用变化轴和合成斜体。wght：控制字体的权重，可以使用font-weight css属性设置值。wdth：控制字体的宽度，可以使用font-width css属性设置值。在css中使用font-stretch属性，我们可以设置字体宽度为百分比值，如果我们提供的字体超出字体 – 在编码域中，浏览器使字体处于最接近的允许值。opsz：光学尺寸是指改变字体光学尺寸的实践，可以使用css字体光学尺寸设置值。光学尺寸值根据字体大小自动应用，但可以使用字体变化进行操作-settings.when使用font-optical-sizing时，允许的值为auto或none，使用font-variation-settings时，会提供数值。slnt：控制字体的倾斜度，并且可以使用字体样式的css属性设置值。它可以通过表示为数字范围来变量，这允许字体沿着该轴的任何位置变化。使用@ font-face的可变字体 – 在web上使用可变字体时，这涉及定义指示可变字体文件的@ font-face规则。这里有2个链接，允许您查找可变字体：axis-praxis.org和v -fonts.com。
<!doctype html>
<html>
<head>
<title>about variable fonts</title>
</head>
<style>
@font-face {
font-family: 'avenir next variable';
src: url('https://cdn.rawgit.com/monotype/monotype_prototype_variable_fonts/f8067a0e/avenirnext/avenirnext_variable.ttf') format('truetype');
}
html {
font-family: 'avenir next variable', sans-serif;
}
p {
font-variation-settings: 'wght' 630, 'wdth' 88;
}
</style>
<body>
<h1>about variable fonts</h1>
<h2>about variable fonts</h2>
<p>
any intelligent fool can make things bigger and more complex… it takes a touch of genius – and a lot of courage to move in the opposite direction.
</p>
</body>
</html>
3.逻辑属性和值逻辑属性和值是一个css模块，它引入了逻辑属性和值，可以通过逻辑方向和维度映射来控制外观。逻辑属性和值使用块和内联等术语来描述它们流动的方向。逻辑属性和值规范表征其逻辑关系中物理值的映射。
内联维度 – 是在所使用的书写类型中写入文本行的维度。因此，在一个随机的英文文档中，文本是水平的，从左到右，在另一个阿拉伯文档中，写作也是水平的，但从右到左，如果我们考虑到日文文档，内联维度现在是垂直的，因为写作模式垂直运行。
块尺寸 – 对应于块在页面上显示的顺序。在英语和阿拉伯语中，它们是垂直执行的，而在任何垂直书写模式下它们都是水平执行的。
<!doctype html>
<html>
<head>
<style>
html {
font: 20px sans-serif;
}
body {
padding: 25px;
background-color: lightyellow;
color: black;
}
.box {
border: 4px solid black;
border-radius: 20px;
padding: 20px;
margin: 12px;
}
.one {
block-size: 100px;
inline-size: 200px;
}
.two {
height: 100px;
width: 200px;
}
</style>
</head>
<body>
</div>
<div id=container>
<div class=box one>
my block-size is 100 pixels, my inline-size 200px.
</div>
<div class=box two>
my height is 100 pixels, my width 200px.
</div>
</div>
</body>