五 . css系列之文本段落属性及应用
2024-05-10 08:03:28
（一）CSS属性——文本属性、段落属性
1.color:修饰字体颜色，属性值可以是颜色名称（red/blue/green/gold，建议写常见的名称）、十六进制、rgb值、rgba值
2.font-size：修饰字体的大小，属性值常为数值加单位，单位px/em，
注意如果字体大小不是0，那么单位必须加，如果是0，可以省略单位，字体默认的大小16px，常用12px
3.font-weight：修饰字体粗细，属性值为normal（默认，不加粗）、bold（加粗）
4.font-style：修饰字体是否倾斜，属性值为normal(默认，不倾斜)、oblique（倾斜）、italic（倾斜）
5.font-family：修饰字体类型，
注意事项
a.fong-family后面可以跟多个字体类型的值，中间用逗号分隔font-family:"隶书","楷体","黑体"，Arial，浏览器在应用字体类型时，从第一个开始寻找，如果 第一种类型即应用否则继续往下寻找，直到最后，如果都没有则应用默认类型"宋体"
b.如果字体类型为中文或者是由空格，那么需要将字体类型用双引号抱起来
6.字体修饰的复合形式font:值1 值2 值3 值4…
注意
a.font的复合形式，后面的值是由顺序要求的，顺序为font-style倾斜 font-weight粗细 font-size/line height大小/行高 font-family类型
b.属性值可以全部写上，也可以写一部分，没写的就用默认值，但是一定要注意在写复合形式时字体的大小和类型是不可以省略
c.如果既有复合形式font，也有单一形式，那么单一形式一定要写在下面
7.文本阴影text-shadow:值1 值2 值3 值4;
值1：代表阴影水平方向上的位移距离，可以是正整数（向右移）、也可以是负整数（向左移）
值2：代表阴影垂直方向上的位移距离，可以是正整数（向下移）、也可以是负整数（向上移）
值3：代表阴影半径
值4：代表阴影颜色
8.文本修饰text-decoration，属性值为underline、overline、line-through、none
underline：下划线
overline：上划线
line-through：删除线
none：去掉文本修饰效果
9.word-spacing:修饰英文单词间的距离，属性值可以是像素值，也可以是em
10.letter-spacing:修饰单词内部字符间的距离和汉字间的距离，属性值可以是像素值，也可以是em
11.text-transform：修饰英文字母大小写，属性值为capitalize(首字母大写)、uppercase(所有字母大写)、lowercase(所有字母小写)
12.line-height:设置行高，属性值可以是像素值、em、百分比
如果是单行文本，那么要让该行文本在垂直方向上居中，可以让行高等于高度
如果是多行文本，那么要让文本将容器平分，可以让行高等于高度除以行数
13.text-align:设置文本相对于容器的水平对齐方式，使用对象为块元素和行内块元素，不可以是行内元素
14.text-indent:设置元素的首行缩进效果，属性值为像素值、em、负数值
15.white-space：normal、pre、nowrap、pre-wrap、pre-line
normal:合并空格、换行
pre:不合并空格、不换行
nowrap:合并空格、不换行
pre-wrap:不合并空格、换行
pre-line：合并空格、换行
16.overflow：文本溢出后的处理方式
visible：默认，显示溢出文本
hidden：隐藏溢出文本
scroll：当文本溢出时出现滚动条，通过拖动滚动条，可以调节内容显示部位，注意即使内容没有溢出，也会出现滚动条所在的灰色边框
auto：自动判断文本是否溢出，如果没有溢出，那么不显示滚动条，如果有溢出，显示滚动条
overflow-x:文本横向溢出的处理方法
overflow-y：文本纵向溢出的处理方法
text-overflow：处理溢出的内容以什么形式显示，可以是clip、ellipsis（省略号）
（二）应用：让溢出文本以省略号形式显示
第一步：不换行white-space：pre
第二步：隐藏溢出文本overflow：hidden
第三步：处理溢出文本的显示显示：text-overflow：ellipsis
<head><meta charset="UTF-8"><title></title><style type="text/css">li{width: 130px;white-space: pre;overflow: hidden;text-overflow: ellipsis;}</style>
</head>
<body><ul><li>1688阿里巴巴批发网</li><li>首页从原料,生产,加工一系列服务.</li><li>找阿里巴巴,全球领先采购批发平台.阿里巴巴,采购批发找1688阿里巴巴批发网首页,汇聚更多商业资讯</li></ul>
</body>（三）display:用于定义元素在布局时的显示类型，常用值为block/inline/inline-block/none;
1.HTML元素的分类：块级元素、行内元素、行内块元素
块级元素：display：block;
行内元素：display：inline
行内块元素：display：inline-block
display:none隐藏HTML元素,改元素在文档中的位置会丢失
2.应用：下拉菜单
<head><meta charset="UTF-8"><title>下拉菜单</title><style type="text/css">ul{list-style: none;width: 120px;}a{display: block;text-decoration: none;color: #000;}
li>a{background: #ccc;height: 35px;line-height: 35px;}
div{display: none;}
li:hover div{display: block;}</style>
</head>
<body><ul><li><a href="#">吉林省</a><div><a href="#">长春市</a><a href="#">吉林市</a><a href="#">四平市</a></div></li><li><a href="#">辽宁省</a><div><a href="#">沈阳市</a><a href="#">大连市</a><a href="#">盘锦市</a></div></li><li><a href="#">黑龙江省</a><div><a href="#">哈尔滨市</a><a href="#">齐齐哈尔市</a><a href="#">黑河市</a></div></li></ul>
</body>3.应用：横向导航菜单
<head><meta charset="UTF-8"><title>横向导航菜单</title><style type="text/css">#nav{width: 800px;height: 40px;background: green;line-height: 40px;font-size: 0;}a{color: #fff;text-decoration: none;width: 100px;display: inline-block;font-size: 14px;text-align: center;}a:hover{background: pink;color: red;text-decoration: underline;}</style>
</head>
<body><div id="nav"><a href="#">最新电影</a><a href="#">最新电影</a><a href="#">最新电影</a><a href="#">最新电影</a><a href="#">最新电影</a><a href="#">最新电影</a><a href="#">最新电影</a><a href="#">最新电影</a></div>
</body>注意：行内块元素间右空隙，处理该空隙的方法
1.将HTML代码写在同一行上（不建议）
2.将行内块元素所在的父元素font-size：0，对于行内块元素自身在设置单独的font-size
4.应用：使用行内块元素的特性进行页面布局
<head><meta charset="UTF-8"><title>效果测试页面</title><style type="text/css">*{margin: 0;padding: 0;}
body{width: 800px;margin: 0 auto;}
#header{height: 80px;background: red;}
#nav{height: 40px;background: green;}
#main{height: 400px;background: blue;}.left{width: 400px;height: 400px;background: yellow;float: left;}.right{width: 400px;height: 400px;background: gold;float: left;}#footer{height: 60px;background: pink;}</style>
</head>
<body><div id="header"></div><div id="nav"></div><div id="main"><div class="left">左侧</div><div class="right">右侧</div></div><div id="footer"></div>
</body>五 . css系列之文本段落属性及应用相关推荐
- css中字体与段落属性设置/文本高级样式
CSS中字体与段落属性 毫无疑问,不管什么网站,文字一定是必不可少.文字可以是网页传播信息的主要手段.那么怎么显示文字,才能更加的美观,那么大家需要了解以下文字属性. 字体属性 属性 用途 语法(一些 ...
- HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
- CSS: CSS常用的文本样式属性
介绍:CSS常用的文本样式属性 color: 颜色 font-size: 字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...
- CSS字体和文本的属性学习
CSS Fonts(字体)属性用于定义于字体系列.大小.粗细和文字样式 P { font-family: "微软雅黑"; } div { font-family: "Mi ...
- CSS基础(part8)--文本外观属性
学习笔记,仅供参考,有错必纠 文章目录 CSS 文本外观属性 color:文本颜色 letter-spacing word-spacing line-height test-decoration te ...
- CSS系列之文本换行
文章の目录 一.word-break 1.概述 2.语法 3.属性值 4.示例 二.overflow-wrap 1.概述 2.语法 3.属性值 4.示例 三.word-wrap 四.区别 写在最后 一 ...
- css系列-font文本
字体设置 可以定义多个字体,系统会依次查找,比如 'Courier New' 字体不存在将使用 Courier 以此类推. font-family: 'Courier New', Courier, m ...
- CSS -- CSS字体及文本属性设置总结
文章目录 1 CSS字体属性 1.1 字体系列 1.2 字体大小 1.3 字体粗细 1.4 文字样式 1.5 字体复合属性 1.6 字体属性总结 2 CSS文本属性 2.1 文本颜色 2.2 对齐文本 ...
- css文本外观属性中设置字体,css 文本外观属性(text) 和 字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...
最新文章
- android profiler 简书,使用AndroidStudio提供的Android Profiler工具和mat进行内存泄漏分析...
- [数据库] Oracle使用CASE判断解决多值问题
- Lamport Logical Clock 学习
- 视频光端机常见故障问题及处理方法大全
- 前端学习（486）：css选择器上
- 基于JAVA+SpringMVC+MYSQL的在线英语精品课程视频教学平台
- 浅谈如何用We7站群平台打造垂直性政务网站
- 中间人攻击利用框架bettercap测试
- TPScan一键ThinkPHP漏洞检测工具使用
- matlab 四分位距,四分位数及matlab实现
- 一丶exit(1)丶exit(0)和return的区别
- Olly's Shadow
- win10 vs2022 .net6 opencvsharp 4.5.5自己编译wecharts 微信二维码扫描模块。
- Shell Tools and Scripting
- 2022 年全球重大经济事件盘点（ I ）
- 用网络调试助手UDP TCP测试
- html标签之列表标签，前端开发资料分享
- Buy Watermelon（思维题）
- m基于VDLL的矢量型GPS信号跟踪算法matlab仿真
- 卡方分布的概率密度公式推导