【CSS】基础CSS样式属性

最新推荐文章于 2024-06-03 23:30:08 发布

折途想要敲代码

最新推荐文章于 2024-06-03 23:30:08 发布

阅读量422

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_63235356/article/details/126327959

版权

文字类:

设置文字字体:

font-family:

可以直接使用中文,例如:"font-family: 宋体;"

可以写多个,浏览器会依次查找,直到找到用户拥有的对应字体文件(即你要是用了花里胡哨的字体,人家没对应的字体文件也白搭,建议使用常见的字体,例如黑体、微软雅黑之类的)

设置字体大小:

font-size:

谷歌默认字体大小是16像素.

由于不懂用户会使用什么奇奇怪怪的浏览器,所以尽量设置一下全局默认字体大小.

设置字体粗细:

font-weight:

可写具体数值大小(非像素),也可以写

"normal"表示正常粗细,数值为400.

"bold"表示加粗,数值为700.

"bolder"表示特粗.

"lighter"表示细.

常用来把奇奇怪怪的字体粗细变回正常,即400.

最大值为900.

设置字体样式:

font-style:

"normal":正常样式.

"italic":倾斜.

常用来把倾斜的字体变成正常.

设置水平对齐:

text-align:

"center":居中对齐.

"left":靠左对齐.

"right":靠右对齐.

装饰文本样式:

text-decoration:

"none":无特殊样式

"underline":下划线

"overline":上划线

"line-through":删除线

除了"none"和"underline"以外,其他基本不用.主要用来把字体变回正常状态,例如将链接的下划线取消.

另外去除列表的装饰为:"list-style:none"

设置字体颜色:

color:

可以直接用英文写颜色:"red"、"blue"、“green”……

可以用RGB来写：rgb(0,0,0)……

CSS3可用RGBA来写(相比较RGB,多了最后一位透明度):rgba(100,100,100,0.3)……

可以用十六进制来写：#666666……

可以设置为透明："transparent"

设置文本缩进：

text-indent：

可用2em来缩进两个文字距离，em代表父元素的字体大小。例如父元素字体大小为16px，2em=32px就是两个文字的距离。

设置行间距：

line-height：

如果想要文字在块元素中垂直居中，可将其行间距改成与块元素高度一致。

设置文字阴影：

text-shadow：水平阴影位置  垂直阴影位置  模糊距离  模糊颜色

文字复合写法：

font：font-style font-weight font-size/line-height font-family

顺序不能乱,并且其中font-size和font-family为必写项(即其可以省略).

背景类：

设置背景颜色：

background-color：

和上面设置字体颜色一样

设置背景图片:

background-image:url("具体路径")

设置背景图片平铺:

background-repeat:

"no-repeat":不平铺,若图片无法铺满也不再添加图片了,即只加一张背景图.

"repeat":平铺.若图片无法铺满则向x和y轴再添加图片,直到铺满某一轴.

"repeat-x":x轴上平铺,若图片无法铺满,则向x轴再加图片,直到x轴铺满.

"repeat-y":y上平铺,若图片无法铺满,则向y轴再加图片,直到y轴铺满.

一般使用"no-repeat",若无法填满盒子则修改图片大小.

设置背景图片大小:

background-size:

可以填具体的宽、高像素大小.

可以填“cover”：等比缩放至覆盖全图。

可以填“contain”：等比缩放使得背景图达到最大，即图片宽与盒子宽一致或是图片高与盒子高一致。

设置背景位置：

background-position：

可以设置具体的x、y值，x轴上右为正方向，y轴上下为正方向。

可以用方位名词：“right”“left”“center”“top”

可以用百分比：以自身大小为标准。

背景固定：

ground-attachment：

“scroll”：背景随内容而滚动。

“fixed”：背景固定。

背景属性复合写法：

background：背景颜色 背景图片 是否平铺 是否固定 背景位置

例子：

源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one {
            font-family: 宋体;
            font-size: 50px;
            font-weight: 900;
            color: rgba(200, 0, 0, 0.3);

        }

        .two {
            font: italic 400 16px/20px 黑体;
            text-align: center;
            text-decoration: underline;
            color: rgb(128, 118, 163);
            text-shadow: 10px 10px 10px gray;
        }

        .three {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            background: #63bbd0 url("../素材/素材/image/animal/animal4/all.jpg") no-repeat scroll right;
            background-size: 300px;
        }

    </style>
</head>
<body>
<p class="one">宋体</p>
<p class="two">这是一段话</p>
<div class="three"></div>
</body>
</html>

折途想要敲代码

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【CSS】基础CSS样式属性

可以直接使用中文,例如:"font-family: 宋体;"可以写多个,浏览器会依次查找,直到找到用户拥有的对应字体文件(即你要是用了花里胡哨的字体,人家没对应的字体文件也白搭,建议使用常见的字体,例如黑体、微软雅黑之类的)...
复制链接

扫一扫