{ width: 80%; margin: 0 auto; } .text { font-size: 5vw; /* 使用视口单位 */ } @media (max-width: 600px) { .text { font-size: 3vw; /* 在小屏幕上减小文字大小 */ } } </style> </head> <body> <div class="container"> <h1 class="text">这是一个自动缩小的标题</h1> <...
背景大小:background-size 背景(图片)是否重复直到铺满:background-repeat 过渡效果:transition 字体 字体大小:font-size 字体颜色:color 字体粗细:font-weight 字体(备选)族:font-family 文字间距:letter-spacing 文字对齐方式:text-align 文字超出范围的显示处理:text-overflow 图片 object-fit:contain/cover flex布局...
文字与图片如果要要将字移动到图片的上方,这里就需要定位一下,设置div为父级,为相对定位;设置h1为绝对定位:div{position:relative;} h1{font-size:16px;color:red;position:absolute;top:20px;left:10px;}如果要使文字竖直放置:使用,或者设置div的宽度刚好为文字的宽度标题h系列:h1 { display: blo ...
px(像素)、em(相对于自身font-size的倍数)、百分数、整数、vw(视窗宽度的1%)、vh(视窗高度的1%) 颜色: 十六进制 #FF6600 或者 #F60 RGBA颜色 rgb(0,0,0) 或者 rgba(0,0,0,1) hsl颜色 hsl(360,100%,100%) 做一个彩虹: CSS布局: 什么是布局?布局就是把页面分成一块一块,按左中右、上中下等排列。
font-size: 18px; padding: 0; border: 0; margin: 0 auto 10px auto; color: #fff; font-weight: 700; } @-webkit-keyframes free_download1 { 0% { transform: scale(0.9) } 20% { transform: scale(1) } 40% { transform: scale(0.9) } 60% { transform: scale(1) } 80% { transform...
scale 是等比例放大缩小一个物体,而仔细观察上述效果,明显是有字体的粗细、字体的字宽的变化。这里,其实用到了 CSS 比较新的特性 -- 可变字体,也就是 font-variation。 本文,将借助这个效果,介绍一下什么是 CSS font-variation。 什么是 CSS font-variation,可变字体? 根据MDN -- Variable fonts,可变字体(Varia...
auto 默认值。浏览器自己决定是否要字距调整。例如字号,也就是font-size属性值比较小的时候,如果进行字距调整就会显得很奇怪,因此,浏览器会禁止。 normal 应用字距调整。 none 不根据字体文件中的字距信息进行字距调整。 但是,font-kerning并不是什么时候都有作用的。
font-kerning:auto| normal | none 其中: auto 默认值。浏览器自己决定是否要字距调整。例如字号,也就是font-size属性值比较小的时候,如果进行字距调整就会显得很奇怪,因此,浏览器会禁止。 normal 应用字距调整。 none 不根据字体文件中的字距信息进行字距调整。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多列布局</title> <style type="text/css"> #div1{ column-count: 3; /*分3栏*/ column-gap: 40px; /*栏间距*/ column-rule: 2px solid lightgreen; /*栏间分隔线,与border设置类似*/ line-height: 26px; font-size: 14px...
auto 默认值。浏览器自己决定是否要字距调整。例如字号,也就是font-size属性值比较小的时候,如果进行字距调整就会显得很奇怪,因此,浏览器会禁止。 normal 应用字距调整。 none 不根据字体文件中的字距信息进行字距调整。 但是,font-kerning并不是什么时候都有作用的。