文本属性
text-decoration
文本装饰
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| blink | 定义闪烁的文本。 |
| inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
text-transform
| 值 | 描述 |
|---|---|
| none | 默认。定义带有小写字母和大写字母的标准的文本。 |
| capitalize | 文本中的每个单词以大写字母开头。（仅针对首字母） |
| uppercase | 定义仅有大写字母。 |
| lowercase | 定义无大写字母，仅有小写字母。 |
| inherit | 规定应该从父元素继承 text-transform 属性的值。 |
text-indent
文本缩进，设置文本的起点，一般我们进行首行缩进。
1 | p{text-indent: 2em;} |
tip：这个玩意也会继承。
example
1 2 3 4 5 6 7 8 9 10 11 | <style type="text/css">
.box{text-indent: 2em;width: 400px; border : 1px solid #333;}
</style>
<body>
<div class="box">
一个很重要的问题一个很重要的问题一个很重要的问题一个很重要的问题一个很重要的问题一个很重要的问题一个很重要的问题一个很重要的问题
<p>一个很重要的问题一个很重要的问题一个很重要的问题一个很重要的问题一个很重要的问题一个很重要的问题一个很重要的问题一个很重要的问题</p>
<p>一个很重要的问题一个很重要的问题一个很重要的问题一个很重要的问题一个很重要的问题一个很重要的问题一个很重要的问题一个很重要的问题</p>
<p>一个很重要的问题一个很重要的问题一个很重要的问题一个很重要的问题一个很重要的问题一个很重要的问题一个很重要的问题一个很重要的问题</p>
</div>
</body> |
text-algin
文本对齐方式
| 值 | 描述 |
|---|---|
| left | 把文本排列到左边。默认值：由浏览器决定。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果 |
letter-spacing
字符间距
这个貌似也没啥说的还是过了吧。。。๑乛◡乛๑
word-spacing
单词间距，亲啊一定要区分清楚啊。 Hi girl！我只能说很少用，毕竟我们不写英文。
line-height
行高，数字。
在css里边最tm难理解的两个东西它就是其中一个。尴尬…
先来个图！
green：top（顶线）
blue：middle（中线）
red：baseline（基线）
pink：bottom（底线）
example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <style>
/*
设置字体我们可以同时设置行高，意思就是可以采用数字 2的含义是基于字体大小的倍数
通常我们不会这样子写，因为会设置字体的大小，如果是浏览器默认的值当然可以这样子写。
*/ /*
css中行高平均分布在一行文本的上下。
这里字体的默认大小是16px，line-height为2那么就是32px,多出来的
16px怎么会在文本的上下各填充8px。但是这样子好像有点... 直接line-height: 32px多好费劲 ⊙︿⊙.
*/ .p{width: 200px;height: 32px;text-align: center;line-height: 2;border: 1px solid red;}
</style>
<body>
<p>行高，没错就是我</p>
</body> |
vertical-align
垂直对齐 以基线为参照上下移动文本，但是这个玩意只能影响行内元素
在css里边最tm难理解的另一个。
example
1 2 3 4 5 6 | <style>
p sub{font-size:60%; vertical-align:-.4em;}
</style>
<body>
<p>H<sub>2</sub>O. 10<sup>5</sup></p>
</body> |
tip：vertical-align通常用来让两个行内元素对齐，虽然我们有时候设置了大小行高，行内的元素有时候也无发正常居中毕竟line-height是对文字的。这里line-height与vertical-align大家知道怎么去使用碰到问题解决问题，不要深究， 会死 。
last
最后给大家看一下字体与文本的结合，英文的排版样式布局。欣赏一下！
@import url(
*{ margin : 0;padding: 0;}
body{
font-family :"CrimsonRoman", georgia, times, serif;
background-color:#fff;
margin:100px 10% 0;
}
/* 设置h2的字体 文本*/h2{
font-size:18px;
line-height:24px;
font-weight :bold;
text-align:center;
font-variant:small-caps;
word-spacing:.5em;
letter-spacing:.6em;
}
/* 设置h1的字体 文本 */h1{
font-size: 60px;
line-height:96px;
font-family:"Pinyon Script", cursive;
margin:4px 0 -4px;
text-align:center;
font-weight:normal;
}
p {
font-size:18px;
line-height:24px;
}
/* 设置长引用的边距 */blockquote {margin:0px 20%;}
/* 设置引用字体的样式 */q {
font-size:18px;
font-style:italic;
line-height:24px;
}
/* 首字母下沉 */h1 + p::first-letter {
font-family:times, serif;
font-size:90px;
float:left;
line-height:.65;
padding:.085em 3px 0 0;
}
/* 修改第一行的文本 小型大写字母 */h1 + p::first-line {
font-variant:small-caps;
letter-spacing:.15em;
}
/*只缩进跟在段落后面的段落*/p + p {text-indent:14px;}
/*引用内容前面的 引号 */q::before {content:"201C"}
/*引用内容后面的引号*/q::after {content:"201D"} |
1 2 3 4 5 6 7 8 9 10 11 | <!-- q标签 文本两端插入引号 --> <!-- blockquote标签 标记长引用 会给元素的前后添加边距 --> <h2>an excerpt from</h2> <h1>The Hound of the Baskervilles</h1> <p>Holmes stretched out his hand for the manuscript and flattened it upon his knee. “You will observe, Watson, the alternative use of the long s and the short. It is one of several indications which enabled me to fix the date.” At the head was written: “Baskerville Hall,” and below in large, scrawling figures: “1742.”</p> <p>“It appears to be a statement of some sort.”</p> <p>“Yes—it is a statement of a certain legend which runs in the Baskerville family.”</p> <blockquote> <q>Of the origin of the Hound of the Baskervilles there have been many statements, yet as I come in a direct line from Hugo Baskerville, and as I had the story from my father…</q> </blockquote> <p>When Dr. Mortimer had finished reading this singular narrative he pushed his sp |
Q&A
1 2 3 4 5 6 7 8 9 10 11 | <input type="button" value="按钮"> <input type="button" value="按钮"> <input type="button" value="按钮"> <button>6</button> <button>6</button> <button>6</button> <div style="border: 1px solid #333;width:300px;"> <img src="url" width="300"> </div> |
发现问题了吗? 行内元素在换行显示之后回车被html解析了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <input type="button" value="按钮" ><input type="button" value="按钮" ><input type="button" value="按钮"> <button>6</button><button>6</button><button>6</button> <div style="font-size:0"> <button>6</button> <button>6</button> <button>6</button> </div> <div style="border: 1px solid #333;width:300px;font-size:0;"> <img src="url" width="300" style="display:block"> </div> |
