ホームページ >ウェブフロントエンド >htmlチュートリアル >Web フロントエンド初心者向けメモ text 属性_html/css_WEB-ITnose
前一段时间因工作时间减缓了更新笔记的时间。我也不知道有没有会观看并且能不能帮到一些初学者,这只是我的一些小随笔而已。<br />当然我也希望的的每一篇随笔都可以帮到更多的想要学习前端开发的初学者们,更希望你们也可以从中体会到、领悟到一些新的知识作为积累并加以巩固。<br />像我一样写下自己每时每刻的成长记录。
<strong>文本缩进<br /></strong> 将Web页面上的一个段落第一行缩进,这是一种最常用的文本格式化效果。有的网站在段落的第一个字母前放一个很小的透明图像,这些图像将文本推到后面来制造一种缩进文本的感觉。另外一些网站则使用完全标准的空格(spacer)标记。而在CSS中有一种更好地方法实现文本缩进。那就是text-indent属性。<br /><br />通过使用text-indent属性,所有元素的第一行都可以缩进一个给定长度,甚至该长度可以是负值。<br />
/** text-indent的单位是em*/p{ text-indent:3em; }<br /><br />p{<br /> text-indent:-3em; }<br />/*<br />* 用百分比实现文本缩进<br />*/<br />p{<br /> text-indent:3%;<br />}
<strong> 水平对齐<br /></strong> 与text-indent相比,text-align是一个更基本的属性,它会影响一个元素中的文本行相互之间的对齐方式。。<br /><br /><strong>注意</strong>:将块级元素或表元素居中,这要通过在这些元素上适当地设置左、右外边距来实现。<br /><strong>行高<br /></strong> line-height属性是指文本行基线之间的距离,而不是字体的大小。它确定了将各个元素框的高度增加或者减少。<br />
垂直方向に配置されたテキスト
CSS では、vertical-algin 属性は inline 要素と置き換えられた要素にのみ適用されます。フォーム入力要素および画像については、verticl-align 属性を継承できません。
テキスト変換
デフォルト値 none ではテキストは変更されず、ソース文書内の元の大文字が使用されます。名前が示すように、大文字と小文字はテキストをすべて大文字またはすべて小文字に変換します。
capitalize は各単語の最初の文字のみを大文字にします。
テキスト装飾
Underline は要素に下線を引きます
Overline は要素の上部に下線を追加します
Line-through はテキストの中央に通し線を引きます。 HTML の S と Strike に相当します。
Blink はテキストを点滅させます。
/** 要定义一个相对于文本向右移5像素向下偏移0.5的绿色阴影,而且不模糊可以写作 */p{ text-shadow: green 50x 0.5em; }
空白文字を扱います
テキストディレクション
方向属性は、ブロックレベル要素のテキストの書き込み方向、表の列レイアウトの方向、要素ボックスを水平方向に埋めるコンテンツの方向、および両端揃え要素の最後の行の位置に影響します。
インライン要素の場合、direction 属性は、短い unicode-bidi 属性が embed または bidi-override に設定されている場合にのみ適用されます。
通常: 要素は、双方向アルゴリズムの追加のネスト層を開きません。インライン要素の場合、要素の境界を越えて暗黙的な順序の再配置が発生します。
Embed: インライン要素の場合、この値は双方向アルゴリズムの追加のネスト層を開きます。このネスト層の方向は、direction 属性によって指定されます。
要素内の順序の並べ替えを暗黙的に完了します。
bidi-override: これはインライン要素のオーバーライドを作成し、ブロックレベル要素の場合は別のブロックにないインライン子孫のオーバーライドを作成します。
これは、要素内の単語の順序の並べ替えが、双方向アルゴリズムの暗黙的な部分を無視して、厳密に方向属性に基づいていることを示しています。 ❤️