专业编程基础技术教程

网站首页 > 基础教程 正文

CSS 背景和字体(三)——每天几个样式,轻松玩转CSS

ccvgpt 2024-09-09 02:18:40 基础教程 5 ℃

背景定位

background-position 属性定义背景定位。

CSS 背景和字体(三)——每天几个样式,轻松玩转CSS

让body背景图垂直居中显示。

body{

background-image: url(../img/flower.jpg);

background-repeat:no-repeat;

background-attachment: fixed;

background-position: center;

}

浏览器中显示:

背景图垂直居中显示

background-position属性值的用法:

属性值第一个值为水平位置,第二个值是垂直位置。可以使用百分比,像素,关键字来定义属性值。

x% y%

background-position: 50% 50%;

xpos ypos

background-position: 100px,200px;

关键字值得用法:

background-position: top,center;

可能的 值:

  • top left

  • top center

  • top right

  • center left

  • center center

  • center right

  • bottom left

  • bottom center

  • bottom right

CSS 字体

1.font-size 设置字体大小。(浏览器默认的是16px)

p{font-size:14px;}

注意第二个字体设置为16px是为了让童靴们对比出默认字体大小。

浏览器中显示:

2.font-weight 设置字体的粗细。

p{font-weight:bold}

font-weight 属性值:

normal 默认值。定义标准的字符。

bold 定义粗体字符。

bolder 定义更粗的字符。

lighter 定义更细的字符。

数字定义:定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。

  • 100

  • 200

  • 300

  • 400

  • 500

  • 600

  • 700

  • 800

  • 900

3.font-family

设置字体系列。属性值可以是多个。

p{font-family:"Times New Roman",Georgia,Serif;}

上面的例子设置了多个属性值,如果浏览器不支持第一个字体,则会尝试下一个。

你必须非常努力,才能看起来毫不费力!

关注小白前端,持续收到文章推送!

最近发表
标签列表