[比如用英语怎么说]01-CSS属性:字体属性和文本属性

CSS的基层单位手写体特性文本特性功能定位特性:position、float、overflow等

html中的基层单位多于一类,那是画素px,因此基层单位是能略去的,但在CSS中不那样。 CSS中的基层单位是要要写的,即使它没预设基层单位。

1 =2.54=25.4=72=6。

各式各样基层单位的涵义:

:寸Inches (1 寸 = 2.54 公分):公分Centimeters:公厘Millimeters:点Points,或是叫加元 (1点 = 1/72寸):捷达Picas (1 捷达 = 12 点)

:画素 :印刷品基层单位相等于12积和式 :比率,相较周遭的文本的大小不一

为何说画素px是两个相较基层单位呢,这也较好认知。比如说,屏幕的的体积是维持不变的,但他们能让其表明相同的解析度,在相同的解析度下,一般而言画素的宽度的确是不那样的啦。

比率那个相较基层单位要是不是用呢?这儿也举个范例:

CSS中,有许多非产业布局式样(与产业布局毫无关系),主要包括:手写体、细身、色调、大小不一、大背景、前面板、慢速、转义、美感特性(小写字、小写、转义)等。

这几段,他们先来说呵呵手写体特性。

css式样中,常用的手写体特性有下列三种:

CSS中,所有的行,都有细身。盒子模型的padding,绝对不是直接作用在文本上的,而是作用在行上的。

如下图所示:

上图中,他们设置细身为30px,30px * 5 = 150px,通过查看审查元素,那个p标签的高度果然为150px。而且他们发现,他们并没给那个p标签设置高度,显然是内容将其撑高的。

垂直方向来看,文本在自己的行里是居中的。比如说,文本是14px,细身是24px,那么padding是5px:

为了严格保证字在行里面居中,他们的工程师有两个约定: 细身、字号,一般都是偶数。这样能保证,它们的差一定偶数,就能够被2整除。

小技巧:如果几段文本多于一行,如果此时设置细身 = 盒子高,就能保证单行文本垂直居中。那个较好认知。

上面那个小技巧,只适用于单行文本垂直居中,不适用于多行。如果想让多行文本垂直居中,还需要计算盒子的padding。计算方式如下:

(1)字号:

(2)细身:

(3)手写体:(font-family是手写体,family是家庭的意思)

是否加粗特性以及上面这三个特性,他们能连写:(是否加粗、字号 font-size、细身 line-height、手写体 font-family)

格式:

举例:

PS:400是nomal,700是bold。

上面这几个特性能连写,但有两个要求,font特性连写至少要有字号和手写体,否则连写是不生效的(相等于没这一行代码)。

2、手写体特性的说明:

(1)网页中不是所有手写体都能用,即使那个手写体要看用户的电脑里面装没装,比如说你设置:

上方代码中,如果用户的 Windows 电脑里面没那个手写体,那么就会变成宋体。

页面中,中文他们一般使用:微软雅黑、宋体、黑体。英文使用:Arial、Times New Roman。页面中如果需要其他的手写体,就需要单独安装手写体,或是切图。

(2)为了防止用户电脑里,没微软雅黑那个手写体。就要用英文的逗号,提供备选手写体。如下:(能备选多个)

上方代码表示:如果用户电脑里没安装微软雅黑手写体,那么是宋体。

(3)他们须将英文手写体放在最前面,这样所有的中文,就不能匹配英文手写体,就自动的变为后面的中文手写体:

上方代码的意思是,英文会采用Times New Roman手写体,而中文会采用微软雅黑手写体(即使美国人设计的Times New Roman手写体并不针对中文,因此中文会采用后面的微软雅黑)。比如说,对于这段文本,会采用Times New Roman手写体,而会采用微软雅黑手写体。

可是,如果他们把中文手写体写在前面:(错误写法)

上方代码会导致,中文和英文都会采用微软雅黑手写体。

(4)所有的中文手写体,都有英文别名。

微软雅黑的英文别名:

宋体的英文别名:

于是,当他们把字号、细身、手写体这三个特性合二为一时,也能写成:

(5)细身能用比率,表示字号的百分之多少。

一般来说,比率都是大于100%的,即使细身一定要大于字号。

比如说, 等价于。能认知成word里面的2倍细身。

反过来, 等价于。

在设置手写体是否加粗时,特性值既能填写、这样的加粗手写体,也能直接填写 100至900 这样的数字。的值相等于400,的值相等于700。

CSS式样中,常用的文本特性有下列三种:

一般而言字母之间的间距 单词之间的间距 手写体修饰:none 去掉转义、underline 转义、line-through 中划线、overline 上划线 单词手写体大小不一写。uppercase大写、lowercase小写 手写体色调 在当前容器中的对齐方式。特性值能是:left、right、center(在当前容器的中间)、justify 单词的手写体大小不一写。特性值能是:(单词大写)、(单词小写)、(每个单词的首字母大写)

这儿来一张表格的图片吧,一览无遗:

另外还有两个简写特性叫做,它的作用是:将上面的多个特性写在两个声明中。

他们来看呵呵特性的效果:

给列表前面的图片加个边距吧,不然表明不完整:

这儿来一张表格的图片吧,一览无遗:

特性的特性值能是:

:预设值。多余的内容不剪切也不添加慢速条,会全部表明出来。:不表明超过对象体积的内容。:如果内容不超出,则不表明慢速条;如果内容超出,则表明慢速条。:Windows 平台下,无论内容是否超出,总是表明慢速条。Mac 平台下,和 特性相同。

针对上面的相同的特性值,他们来看呵呵效果: 举例:

效果:

鼠标的特性有下列几个特性值:

:预设值。浏览器根据当前情况自动确定鼠标光标类型。:IE6.0,竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。:和的作用那样:竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

比如说,我想让鼠标放在那个标签上时,光标表明手状,代码如下:

另外还有下列的特性:(不用记,需要的时候查呵呵就行了)

all-scroll :  IE6.0 有上下左右四个箭头,中间有两个圆点的光标。用于标示页面能向上下左右任何方向慢速。

col-resize :  IE6.0 有左右两个箭头,中间由竖线分隔开的光标。用于标示项目或标题栏能被水平改变体积。

crosshair :  简单的十字线光标。

default :  客户端平台的预设光标。通常是两个箭头。

hand :  竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

move :  十字箭头光标。用于标示对象可被移动。

help :  带有问号标记的箭头。用于标示有帮助信息存在。

no-drop :  IE6.0 带有两个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。

not-allowed :  IE6.0 禁止标记(两个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。

progress :  IE6.0 带有沙漏标记的箭头光标。用于标示两个进程正在后台运行。

row-resize :  IE6.0 有上下两个箭头,中间由横线分隔开的光标。用于标示项目或标题栏能被垂直改变体积。

text :  用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。

vertical-text :  IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。

wait :  用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。

*-resize :  用于标示对象可被改变体积方向的箭头光标。

url ( url ) :  IE6.0 用户自定义光标。使用绝对或相较 url 地址指定光标文件(后缀为 .cur 或是 .ani )。

这儿只举两个滤镜的范例吧。比如说让图片变成灰度图的效果,能这样设置滤镜:

举例代码:

效果如下:(IE有效果,google浏览器无效果)

延伸: 滤镜本身是平面设计中的知识。如果你懂一点PS的话···打开PS看看吧:

爆料呵呵,表示博主有两年多的平面设计经验,我做设计的时间其实比写代码的时间要长,嘿嘿···

现在,他们利用float浮动特性来把无序列表做成两个简单的导航栏吧,效果如下:

代码:

实现效果如下:

发布于 2022-09-10 16:09:32
收藏
分享
海报
0 条评论
91
目录

    0 条评论

    请文明发言哦~

    忘记密码?

    图形验证码