web前端 |
您所在的位置：网站首页 › an怎么改字体样式 › web前端 |
web前端
|
CSS本质是用来修饰HTML标签的 常用CSS属性 （1）字体及文本属性文字相关效果 属性含义font字体及其属性（复合属性，不建议直接使用）font-family设置文本字体，电脑中存在字体font-size字体大小font-weight字体粗细font-style字体样式text文本相关text-algin文本对齐方式text-decoration下划线text-overflow：ellipsis文本显示超出省略text-indent首行缩进text-transform字母大小写转换示例： 字体及文本效果大熊猫飞云超话—新浪微博超话社区 大熊猫飞云超话—新浪微博超话社区 this is a book book 每天都在反复传文件，V1、V2、终版3、终版5？在飞书文档可以实时协同编辑，看到的永远都是最新版。文档中还可以@同事、添加评论、插入任务列表等多种类型的内容，岂止于文档，更是丰富的创作工具。 .box{ font-family: 楷体; font-size: 20px; font-weight: 600; /* font-weight：加粗。bold/bloder */ font-style: italic; /* 字体加斜 */ } .box2{ text-align: center;/* 文本对齐方式 */ text-decoration: underline;/* 下划线 */ text-transform: capitalize;/* 让字体产生变化。uppercase：字体大写。capitalize：单词首字母大写 */ text-indent: 32px;/* 字体缩进，文本软化效果 */ } .btn{ text-indent: -99px; /* 使得文字无法显示 */ } .msg{ height: 50px; width: 200px; border: 3px solid rebeccapurple; /* 字体内容超过div标签时，以下三个结合使用使得内容超出隐藏 */ text-overflow: ellipsis;/* 内容超出，加... */ white-space: nowrap;/* 保证超出内容不换行 */ overflow: hidden;/* 超出隐藏 */ }
opacity 前景色和背景色都实现透明 rgb函数：rgb(red,green,blue)。每种颜色的取值范围：[0,255] 示例： 样式修饰 这是一个div标签 这是第二个div标签 .box{ width: 300px; height: 300px; border: 1px solid red; /* border-radius: 10px;将弧度改为10px */ border-top-right-radius: 50px; /* 将右上弧度改为50px */ border-bottom-right-radius: 50px; /* 将右下弧度改为50px */ color: brown; /* 将标签内容颜色变为brown */ /* background:green; */ background-color: green; /* 将背景色设置为green */ } .box1{ width: 300px; height: 300px; border: 1px solid rebeccapurple; background-color: yellow; color: brown; opacity: 0.5; /* rgba() --- 函数中的alpha，第四个参数表示透明度 */ }
示例： 阴影效果
火
.box{
width: 300px;
height: 300px;
border: 1px solid red;
box-shadow: 20px 20px 0px skyblue;
/* box-shaodw:往左偏移20px，往下偏移20px，模糊度为0px */
box-shadow: 0px 10px 20px red,
10px 0px 20px rebeccapurple,
0px -10px 20px brown,
-10px 0px 20px forestgreen;
overflow: scroll;
}
.box1{
width: 300px;
height: 300px;
border: 1px solid rebeccapurple;
font-size: 50px;/* 设置大小 */
font-weight: bold;/* 加粗 */
color: rosybrown;/* 设置颜色 */
text-align: center;/* 居中 */
/* line-height: 300px; 行高为盒子高度 */
text-shadow:0px 0px 10px firebrick ;/* 阴影效果 */
}
overflow：hidden； 超出隐藏overflow-y：scroll；y轴出现滚动条overflow-x：scroll；x轴出现滚动条display：none； 隐藏标签visbility：hidden；隐藏标签，占据位置示例： 隐藏与显示属性 1 2 3 4 5 ul,ol{ list-style: none; } li{ width: 200px; height: 200px; border: 1px solid saddlebrown; } ul.news>li:nth-child(2){ /* display: none;隐藏 */ visibility: hidden;/* 隐藏 */ }
隐藏和显示标签 修改标签的默认属性（块标签/行内标签） 块标签【block】、行内标签【inline】。行内快标签【inline-block】 示例： display属性 这是一个div标签 这是一个超链接标签 这是一个超链接标签 这是一个超链接标签 这是一个超链接标签 这是一个超链接标签 这是一个超链接标签 .box{ width: 400px; height: 300px; border: 1px solid rebeccapurple; /* display: none;标签隐藏 */ /* display: inline;将其转为行内标签 */ } .box>a{ width: 150px; height: 40px; border: 1px solid red; /* display: block; 将行内标签转为块标签 */ /* display: flex; 弹性盒子 */ display: inline-block; text-decoration: none;/* 不再显示下划线 */ color: #999; text-align: center;/* 字体居中 */ line-height: 40px; border-radius: 20px; }
背景图片是否跟随滚动 background-size背景大小示例： 背景样式 body{ background-image: url(../img/123.png); background-color: #4383bc; background-repeat: repeat-x; } .box{ width: 800px; height: 800px; /* background: red url(../img/123.png) no-repeat; */ /* 当图片较小，内容含量较大，则图片会进行复制。no-repeat：图片不再进行复制复制 */ background-color: hotpink; background-image: url(../img/123.png); /* background-repeat: no-repeat;不开启复制 */ background-repeat: no-repeat;/* 在x轴进行复制，则y轴不会进行复制 */ background-position:100px 100px ; /* 背景图片的位置 */ /* 如果给定两个值，表示的是背景图片的坐标；也可透视精灵图/雪碧图 */ }
附： 精灵图和雪碧图：很多张图片放在一张图片上，用户只需请求一张图片就可以拿到所有需要的图片。开发人员利用背景图的位置去显示不同位置的图片，这是前端图片优化的一种方式。
示例： 精灵图/雪碧图1234567890 12345 2345 .body{ background-attachment: fixed; /* 背景图保持不变，文字实现拖动效果 */ } .box{ margin: auto; width: 25px; height: 20px; background-image:url(../img/234.png); background-position: 0px -50px; background-repeat: no-repeat; } .box:hover{ background-position: 0px -75px; /* 也可用来透视精灵图或者雪碧图。也可用英文表示：center表示居中 */ /* background-size: 200px 300px;指定大小 */ /* background-size: cover;实现自动缩放，通常与background-position联用，保证作背景图片 */ /* cover：自动覆盖所有面积 */ }
|
【本文地址】
今日新闻 |
推荐新闻 |