CSS样式

最新推荐文章于 2022-08-05 11:13:56 发布

你回头我就在

最新推荐文章于 2022-08-05 11:13:56 发布

阅读量125

点赞数

本文链接：https://blog.csdn.net/qq_42672798/article/details/81020674

版权

<!DOCTYPE html>

<head>

<title>CSS样式</title>

</head>

<!--

background-attachment:设置背景图片是否随内容滚动

属性值:

fixed 背景不滚动

scroll 背景随内容滚动

-->

<!--

text-decoration:设置下划线,删除线,顶划线

属性值:

none 无

underline 下划线

line-through删除线

overline 顶划线

-->

<div style="text-decoration:underline;">我是div</div>

<!--text-transform:设置文本大小写

属性值:

lowercase 全小写

capitalize 单词首字母大写

uppercase 全大写

-->

<!--font-variant设置小型大写字母

属性值:

normal 正常效果

small-caps 小型大写字母字体

-->

<!--

text-indent:首行缩进

属性值:

px,em,rem,百分比

文字的默认字体大小 16px

1em = 16px

-->

<div style="text-indent: 2em;">史诗级难题</div>

<!--

text-align:文本水平对齐方式

属性值:

left 左对齐

center 居中对齐

right 右对齐

-->

<div style="text-align: center;">史诗级难题</div>

<div style="text-align: left;">史诗级难题</div>

<div style="text-align: right;">史诗级难题</div>

<!--

line-height:设置行高

属性值:

px,em,rem,百分比

文字的默认字体大小 16px

1em = 16px

-->

<!--

letter-spacing:设置字距

属性值:

px,em,rem,百分比

文字的默认字体大小 16px

1em = 16px

-->

<!--

word-spacing:设置词距(单词之间的距离)

属性值:

px,em,rem,百分比

文字的默认字体大小 16px

1em = 16px

-->

<!--

font-family:字体类型

属性值:具体的字体类型

-->

<div style="font-family: '微软雅黑','STKaiti';">好好学习,天天向上!Good good study,Day day up!</div>

<!--

font-size:字体大小

属性值:

px,em,rem,百分比

-->

<div style="font-size: 36px;">好好学习,天天向上!Good good study,Day day up!</div>

<!--

font-weight:字体大小

属性值:

lighter,normal(正常值),bold,bolder

100,200,300,400,500,600,700,800,900

其中400相当于normal,700相当于bold

-->

<div style="font-weight: 900;">好好学习,天天向上!Good good study,Day day up!</div>

<!--

font-style:字体样式

属性值:

normal 正常字体

italic 斜体

oblique 字体倾斜

-->

<div style="font-style: oblique;">好好学习,天天向上!Good good study,Day day up!</div>

<!--

color:字体颜色

属性值:

颜色单词,十六进制颜色,rgb,rgba

-->

<div style="color: rgb(100,100,55);">好好学习,天天向上!Good good study,Day day up!</div>

<!--

background-color:背景颜色

属性值:

颜色单词,十六进制颜色,rgb,rgba

-->

<div style="background-color: red; width: 300px;">撸起袖子加油干</div>

<!--

background-image:背景图片

属性值:

url(图片的路径)

-->

<div style="height: 300px; background-image: url(img/9.jpg);">撸起袖子加油干</div>

<!--

background-repeat:背景图片是否平铺

属性值:

repeat 平铺

no-repeat 不平铺

repeat-x 只在水平方向平铺

repeat-y 只在垂直方向平铺

-->

<div style="height: 300px; background-image: url(img/9.jpg); background-repeat: no-repeat;">撸起袖子加油干</div>

<!--

background-position:背景图片的位置

属性值:

1.left,right,center,top,bottom,两两组合,9个位置

2.x%,y%(百分比)

3.xpx,ypx(像素值)

-->

<div style="height: 300px; background-image: url(img/9.jpg); background-repeat: no-repeat; background-position: center center;">撸起袖子加油干</div>

</body>

</html>

你回头我就在

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;CSS样式&lt;/title&gt;&lt;/head&gt;&lt;!-- background-attachment:设置背景图片是否随内容滚动属性
复制链接

扫一扫