CSS文字段落排版常用设置
时间:2019-08-22
本文章向大家介绍CSS文字段落排版常用设置,主要包括CSS文字段落排版常用设置使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
.firstp {
/* 文字排版:颜色、字号、字体、粗体、斜体、下划线、删除线 */
color: #666; /*颜色*/
font-size: 30px; /*字号*/
font-family: "宋体"; /*字体*/
font-weight: bold; /*粗体*/
font-style: italic; /*斜体*/
text-decoration: underline; /*下划线 删除线用:line-through*/
/* 段落排版:缩进、行高、文字距离、单词间距、对齐 */
text-indent: 2em; /* 缩进 */
line-height: 1.5em; /* 行高 */
letter-spacing: 5px; /* 中文字距离 || 字母间距 */
word-spacing: 50px; /* 单词间距 */
text-align: center; /* 对齐:居中:center、左对齐:left、右对齐:right */
/* 背景设置:背景色、背景图片、背景平铺模式、背景定位 */
background-color: #333; /* 背景色*/
background-image: url(img/bg.png); /* 背景图片 */
background-repeat: no-repeat; /* 背景平铺模式: 不重复 */
background-position: 30% 20px; /* 背景定位 */
}
CSS中设置颜色的方法有多种
- 颜色的英文单词
.cont {color: red}
- RGB配色:由R(red)、G(green)、B(blue)三种颜色的比例来配色
.cont {color: rgb(51, 102, 102)}
这三个值也可以用0%~100%之间的值来设置
.cont {color: rgb(10%, 30%, 66%)}
- 十六进制颜色:00-ff
.cont {color: #0033ff}
CSS的颜色值当使用16进制的色彩值时,若每两位的值相同,可以缩写一半
.cont {color: #333333}
可以缩写成:
.cont {color: #333}
.cont {color: #aa3366}
可以缩写成:
.cont {color: #a36}
字体样式可以进行缩写
.cont {font: bold italic small-caps 18px/1.5em "宋体"}
上面的缩写顺序为:
.con {
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 18px;
line-height: 1.5em;
font-family: "宋体";
}
该缩写顺序的先后为:
- 先声明:font-weight、font-style、font-variant。这三个样式不分先后
- 然后是 font-size(通常设置字体的时候可以一起设置行高:字体/行高 如:18px/1.5em)
- 最后是 font-family
背景样式可以缩写成
.con {background: #333 url(img/bg.png) no-repeat 30% 20px;}
该缩写顺序为:
.con {
background-color: #333; /* 背景色*/
background-image: url(img/bg.png); /* 背景图片 */
background-repeat: no-repeat; /* 背景平铺模式: 不重复 */
background-position: 30% 20px; /* 背景定位 */
}
原文地址:https://www.cnblogs.com/dyfblogs/p/11397412.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Pandas的列表值处理技巧,避免过多循环加快处理速度
- 详解Linux iptables常用防火墙规则
- Linux文件权限与群组修改命令详解
- Spring-IOC-从单例缓存中获取单例 Bean
- Linux上为你的任务创建一个自定义的系统托盘指示器
- 14个Seaborn数据可视化图
- Linux中的进程守护supervisor安装配置及使用
- 《JavaScript数据结构与算法》读书笔记
- 《JavaScript函数式编程指南》读书笔记
- 冒泡排序
- 详解linux下避免僵尸进程的几种方法
- Ubuntu下Subversion(SVN)的快速安装与配置详解
- Linux查看某个端口的连接数的方法
- 浅析Linux中使用nohup及screen运行后台任务的示例和区别
- 快速搭建简易、高效、多线程http服务器