字体属性/文本属性/元素的显示模式/背景图片颜色位置平铺/图片空隙解决办法

最新推荐文章于 2024-06-26 11:44:31 发布

喵帕斯_喵太

最新推荐文章于 2024-06-26 11:44:31 发布

阅读量453

点赞数

CC 4.0 BY-SA版权

分类专栏：前端基础文章标签： html css

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/115047450

前端基础专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了CSS中的字体属性，包括字体类型、大小、粗细及斜体等，并解释了复合写法。此外还介绍了文本属性，如颜色、对齐、装饰等，以及行高和首行缩进的设置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

字体属性

可以分为以下几个大类

1 .字体类型
2.大小
3. 粗细
4. 斜体

字体类型 font-family

div {
    font-family:华文彩云 , 宋体, 微软雅黑 ;
}

注意：一般是不推荐用中文写法，多字体是防止浏览器不识别，如果不识别第一个就会自动识别下一个以此类推。

字体大小 font-size
值越大字越大

div {
	font-size: 80px;
}

字体粗细 font-weight

div {
    font-weight:700; /* 加粗 */
    font-weight:400; /* 正常 */
}

注意：字体粗细font-weight属性值不需要带px。

文字倾斜 font-style

div {
    font-style: italic;/* 倾斜 */
    font-style: normal;/* normal */
}

复合写法

font: font-style font-weight font-size/line-height font-family ;
font: italic 700  16px 'Microsoft yahei';
/*其他的可以不写 但是 20px 字体大小 类型必须写 顺序不可调换*/
font: 20px 'Microsoft yahei';

注意：,使用font属性时，必须按照以上顺序规范来书写，不能更换顺序,并且各个属性以空格隔开
不需要的属性可以省略不写（取默认值），但是必须保留 font-size和font-family属性，否则将失效。

文本

可以设置颜色对齐装饰 -下划线缩进以及行高等相关的属性

文本颜色 color

预定义的颜色名：red、green、blue；
十六进制：#ff0000；
RGB 代码：rgb(255, 0, 0) 或 rgba(255, 0, 0, 0.5)

div {
    color: red;
    color: #ff0000;
    color: rgb(255,0,0);
}

注：rgba一般多用于背景阴影颜色调节。

文本对齐 text-align

控制文本在水平方向上对齐

更加详细的描述叫做控制 容器内的元素在容器的空间内对齐

div {
    text-align: center;
    text-align: left;
    text-align: right;
}

文本装饰 text-decoration

给文字加上一条线

div {
    text-decoration : underline;/* 下划线 */
    text-decoration : line-through;/* 删除 */
    text-decoration : overline;/* 上划线 */
    text-decoration : none;/* 什么都没有 */
}

更多的是用在给 a标签 移除 下划线

a {
    text-decoration : none;/* 什么都没有 */
}

首行文本缩进

p {
    text-indent: 2em;  /* 1个文字的大小 可以理解为 1em */
}

行间距

也就是俗称的行高可以设置文字在容器内垂直居中

div {
    height: 300px;
    background-color: aqua;
    line-height:300px;
}

元素显示模式

分类

块级元素
- 宽度默认占据一整行
- 高度默认由内容撑开
行内元素
- 默认宽度和高度都由内容撑开
- 主动设置宽度和高度都是无效
行内块
- 宽度和高度都是由内容撑开 行内特点
- 可以设置宽度和高度 块级特点
- img, input , button
使用技巧
- 容器用来装元素
  - 容器一般是块级元素如 div h1 h2 h3 p
    - 如果是一个特别复杂的盒子那么它一定是 div 标签
  - 元素 span a ,i em …
- 不要出现元素装容器
  - span > div (×）
- 行内块可以充当容器 也可以充当元素

行内元素有：a b span img input select strong
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
常见的空(void)元素：<br><hr> <img> <input> <link> <meta>
鲜为人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

背景
背景颜色
背景图片
背景平铺
背景图片位置
背景图像固定

背景图片

使用场景

图片显示
精灵图雪碧图
渐变

div记得加上大小

div {
    width:300px;
    height:400px;
    background-image: url(路径);
}

背景平铺

控制图片在容器如何平铺显示

div{
    background-image: url(路径);
    background-repeat:no-repeat;  /* 不平铺 */
    background-repeat:repeat;     /* 平铺 */
    background-repeat:repeat-x;   /* X 方向平铺 */
    background-repeat:repeat-y;   /* Y 方向平铺 */
}

背景图片位置

控制背景图片在容器内的位置

div {
    background-image:url(1.png);
    background-position: center center;/* left right top bottom center  0px 0px*/
    background-position: right bottom;
}

注意：背景可以通过简写来节省代码量，例background:url(路径) no-repeat center center; 没有书写顺序

背景图片固定

可以设置背景图片是跟随页面滚动还是相对页面固定

div {
    background-attachment: scroll; /* 默认值 */
    background-attachment: fixed; /* 固定 */
}

背景透明
背景透明而内容不透明
- 内容指的是里面的盒子或者里面的文字

div {
    background-color:rgba(0,0,0,.5) /* .5 表示是透明度  0 完全透明 1 不透明 */
}

图片空隙解决办法

如图所示：添加前
在这里插入图片描述
部分情况下会出现图片之间有空隙的情况，这是由于图片默认对齐方式问题。
只需要添加img{vertical-align:top} 或者 vertical-align: middle:
如图所示：添加后

注：边框圆角是做过了border-radious处理.