程序博客网 > 电路二端口矩阵参数

CSS学习笔记（四）：文本、颜色和背景

来源：互联网发布：电路二端口矩阵参数编辑：程序博客网时间：2024/05/17 00:12

文本

html中，控制文本的标签主要有：b、blockquote、code、em、i、p、h1-h6

常用样式

line-height

文本行基线之间的距离，而不是字体大小。设置行高时，会在行内元素的 内容区顶部和底部 增加/减少一定的量来创建一个行内框
行间距=(行高-字体大小)/2 （有可能为负）
文本框中每个元素会生成内容区，内容区会生成一个行内框
相对于元素本身的 font-size值进行设置，而不是相对于父元素的 font-size设置，从父元素继承时，相对于父元素计算。

text-align

应用于块级元素，影响控制元素的内部内容，若使用 <center> 标签，会让整个元素居中
属性值取 justify 时，使行两端对齐的同时使各行长度都相等

vertical-align

只用于行内元素、替换元素(img/input)和单元格，不能影响块级元素，不会改变字体大小
一个垂直对齐元素无基线(img/input)，则底端会与父元素基线对齐
行框的高度要足以包含最高行框的顶端和最低行框的底端，因此，垂直对齐的元素会影响行高。
设置容器高(height)和 font-size同大小，可以达到字符垂直居中的效果

空白间距控制

word-spacing: 字间隔
letter-spacing:字母间隔
white-space: normal/ nowarp/ pre/ pre-wrap/ pre-line/ inherit
可应用至任何元素，normal下，html会降所有空白符合并为一个空格
pre：空白符不会被忽略
nowrap：防止换行，除非使用了 br
pre-wrap：保留空白符，但会正常换行
pre-line：保留换行符，合并空白符

颜色和背景

前景是元素的文本和周围的边框，背景是内容框、内边距
设置了 color，则前景色会默认应用到 border-style，除非用 border的颜色覆盖

background-color

不会被继承，因此可以直接给 <body>设置
允许向任何元素设置 <img>，它不会被继承

background-position: top/ bottom/ center/ left/ right

关键字顺序无要求，但是不能超过两个，若使用百分数，则水平位置在前，主要影响平铺从哪儿开始
会相对于元素的内边距边界放置，完全平铺的背景会填充边框区的背景
background-img 总是从0% 0%，即 内边距 左上角位置开始平铺，百分数、数值可以结合使用，可设负值

background-attachment: scroll/ fixed/ inherit

声明原图像相对于可视区的可见性，设为 fixed时，图像会相对于可视区定位，而不是包含元素。

以上样式都可以缩写在 background中，且顺序任意

添加一个img后，默认会将所有的元素区域及padding用图像平铺，图像尺寸不够的自动在x y方向repeat

0 0

电路二端口矩阵参数

电路二端口矩阵参数

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子美化图标美化字美化城市美化房间美化宿舍签名美化环境美化水管美化下拉框美化美化qq教程酷点美化包美化风景美化板美化社区美化版和平精英美化和平精英美化包下载 qq美化包下载美化包和平精英 qq主题美化包黄金风衣美化包免费qq主题美化包保护水土美化家园手抄报状态栏美化工具皮肤美化器下载 qq主题美化助手飞车手游美化包小精灵美化下载和平精英美化包风衣美化包下载吃鸡衣服小妖精美化2018版真人美化系统美化包下载安装风衣美化包下载 qq美化包教程美化照片软件照片美化软件美化图片的软件图片美化软件主题美化下载美化照片软件哪个好