文字设置
相关的属性介绍:
1.font-weight 文字着重
2.font-style 文字倾斜
3.font-size 文字大小(一般设置为偶数)
4.font-family 字体(中文默认宋体)
5.line-height 行高 (加粗是因为这个属性比较重要)
6.文字的复合样式
font:font-style | font-weight | font-size/line-height | font-family(需要注意的是文字的复合样式是需要按照顺序来设置的 )(我尝试的将font-style | font-weight可以相互换位置,但是最好按照顺序来写避免不必要的麻烦)!
(记忆口诀 s -w-s -l-f 是我是理发)
解释行高:
单独解释行高是因为行高比较特殊,行高:指的是文字在一行中所占的位置
通过行高的设置,可以控制文字在上下二个方向的位置,将行高和高度设置一样可以将文字在标签中处于居中位置.
当我们遇到多行文字如何测量行高的问题?
首先 1 .确定文字的大小
2 .计算出上下二行文字之间的距离除以2
这里除以2之后分2种情况
2.1 当行高是奇数 上面的xpx 下面的 x+1 px 下面的比上面多一个像素.
2.2 当行高是偶数的时候,那么上下的值是一样的.
p{line-height:2em;}
文本设置
text-align 1.right 2.left 3.center 文本对齐方式 (可以将块元素内的文本和图片等居中显示)
{如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现的。}
text-indent 1.px单位 2.em 单位(根据字体自动计算大小) 首行缩进
text-decoration 1.underline 2.none 下划线设置
letter-spacing 1.px 字母间距
word-spacing 1.px 单词间距
white-spacing 强制不换行
常用的属性 text-indent可以控制文本在左右的位置,结合上面line-height可以控制文字上下的位置,这样文字的上下左右位置就都可以控制了!
特殊效果:
原价上的删除线使用下面代码就可以实现：
.oldPrice{text-decoration:line-through;}
常识概念:
1.一个空格有多大? 宋体的字体的一半大
2.测量文字的大小 从上到下
3.文字的大小 并不一定是16px大小,不同的浏览器不同.
水平居中设置-定宽块状元素
当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置div这个块状元素水平居中：
html代码：
我是定宽块状元素，哈哈，我要水平居中显示。
css代码：
div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/margin:20px auto;/* margin-left 与 margin-right 设置为 auto */}
也可以写成：
margin-left:auto;
margin-right:auto;
注意：元素的“上下 margin” 是可以随意设置的。
水平居中总结-不定宽块状元素方法（一）
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
加入table标签
设置display: inline方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置
设置position:relative和 left:50%：利用相对定位的方式，将元素向左偏移50%，即达到居中的目的
第二种方法：改变块级元素的 display 为 inline 类型（设置为行内元素显示），然后使用text-align:center来实现居中效果。
一个android自学前端之路:如有不正确的地方欢迎指正!!
这里我给大家推荐简单容易上手理解的学习html+css的视频地址
(免费)前端初窥
欢迎添加作者qq群 一起学习交流!
微信群:
