CSS 3実践の道(四):テキスト特効
11308 ワード
.tshadow{
text-shadow:5px 5px 5px #0066ff;
color:#660066;
}
.txtjust
{ width:70px; text-align:justify;
text-justify:distribute;
text-align-last: distribute;
}
p.test1
{
width:11em;
border:1px solid #000000;
word-break:hyphenate;
}
p.test2
{
width:11em;
border:1px solid #000000;
word-break:break-all;
}
div.wrap1
{
width:100px;word-wrap:normal; border:1px gray solid; float:left;margin-right:80px;
}
div.wrap2{
width:100px;word-wrap:break-word; border:1px maroon solid; float:left;
}
この前仕事が忙しくて、このブログはちょっと遅くなって、みんなに申し訳ありませんと言いました.
1テキスト特効
CSS 3は文字に多くの特効を加え、http://www.w3schools.com/css3/css3_text_effects.asp
ここではtext-shadow、word-wrap、word-break、text-overflowについて説明します.
1.1 text-shadow
テキストシャドウは現在IEではサポートされていませんが、他のブラウザではサポートされています.
構文:text-shadow:h-shadow v-shadow blur color;
これはbox-shadowと少し似ています.
説明:
Value
Description
h-shadow
必要なのは、水平方向の影の位置を指定し、正負の値にすることができる.
v-shadow
必要なのは、垂直方向の影の位置を指定し、正負の値にすることができる.
blur
オプションぼかしきょり
color
オプション影の色Look at CSS Color Values for a complete list of possible color values
例:
text-shadow:5px 5px 5px #0066FF;
color:#660066;
テキストシャドウ
1.2 word-wrap
英語の長い単語を切り捨てて2行に分けて表示できるようにします.すべてのブラウザはすでにサポートされており、中国語ではこのような問題は存在しません.漢字ごとに単語として扱われているからです.
構文:word-wrap:normal|break-word;
Value
Description
normal
正常に単語を表示(長い英語の単語は切断できません)、デフォルト値
break-word
長い単語を強制的に切り捨てる(強制改行も言う)
例:
<div class="wrap1" >
The word-wrap propertyallowslong words to be able to be broken and wrap onto the next line
</div>
<div class="wrap2">
The word-wrap propertyallowslong words to be able to be broken and wrap onto the next line
</div>
div.wrap1
{
width:100px;word-wrap:normal; border:1px gray solid; float:left;margin-right:80px;
}
div.wrap2{
width:100px;word-wrap:break-word; border:1px maroon solid; float:left;
}
1.3 word-break
non-CJK(CJK:中日韓文字)改行規則に特化しており、FirefoxとOperaはそれをサポートしていない.
構文:word-break:normal|break-all|hyphenate;
説明:
Value
Description
normal
通常のルールで改行
break-all
どんな文字でも強制的に改行(非中日韓文字で)
hyphenate
単語は適当な時に改行されます
例:
p.test1
{
width:11em;
border:1px solid #000000;
word-break:hyphenate;
}
p.test2
{
width:11em;
border:1px solid #000000;
word-break:break-all;
}
<p class="test1"> This paragraph contains some text. This line will-break-at-hyphenates.</p>
<p class="test2"> This paragraph contains some text: The lines will break at any character.</p>
This paragraph contains some text. This line will-break-at-hyphenates.
This paragraph contains some text: The lines will break at any character.
1.4 text-overflow
コンテナ内のテキストの長さがコンテナの幅を超える場合は、テキストの表示方法(切断、...および表示文字)を指定します.ニュースリストの表示でよく使われると信じています.
構文:text-overflow:clip|ellipsis|string;
Value
Description
clip
テキストの切断
ellipsis
省略記号(「...」)切断するテキストの代わりにFirefoxではサポートされていません.
string
切断するテキストの代わりに、ある文字列を用いる.ブラウザはまだサポートされていません.
例:
<span title="The text-overflow property specifies what should happen when text overflows the containing element"
style="display:inline-block; width:500px;text-overflow:clip; white-space:nowrap; overflow:hidden;">
The text-overflow property specifies what should happen when text overflows the containing element
</span>
<span title="The text-overflow property specifies what should happen when text overflows the containing element"
style="display:inline-block; width:500px;text-overflow:ellipsis;white-space:nowrap; overflow:hidden;">
The text-overflow property specifies what should happen when text overflows the containing element
</span>
The text-overflow property specifies what should happen when text overflows the containing element
The text-overflow property specifies what should happen when text overflows the containing element
1.5 text-justify
これはIE特有の文字効果で、オブジェクト内でテキストを整列させるための整列タイプです.
参考URL:http://msdn.microsoft.com/en-us/library/ms531172(v=vs.85).aspx
構文:text-justify:auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|newspaper;
注意:このCSSを使用する前提はtext-align:justifyである.説明:
auto
既定値.ブラウザが適用する位置合わせアルゴリズムを決定できるようにします.
distribute
処理間隔は、newspaper値によく似ています.この形式の位置合わせは、タイ語などのアジア言語のドキュメントに最適化されています.
inter-cluster
文字間隔を含まないテキスト行を揃えます.この形式の位置合わせは、アジア言語のドキュメントに最適化されています.
inter-ideograph
象形テキスト行を揃え、インタラクティブな象形文字間隔と文字間隔を増減します.
inter-word
文字間のスペースを増やしてテキストを整列させます.この値の間隔調整動作は、すべてのテキスト行の長さを等しくする最も速い方法です.位置合わせの動作は、段落の最後の行には影響しません.
kashida
選択した点で文字を長くすることで、テキスト行を整列させます.この形式の位置合わせはアラビア語のスクリプト言語に適用されます.
newspaper
文字間隔と文字間隔を増減します.ラテン文字に適した最も複雑な位置合わせです.
例:皆さんは以下のページhttp://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/text-justify.htmを参考にして、个人的にこのCSSは英语のアルファベットに対して比较的に明らかな効果を果たすことができて、汉字に対して基本的にあまり効果がありません(1つの汉字は1つの英语の単语に相当するため).
これでCSS 3に新たに追加されたText属性については既に説明済みであり,CSS以前のバージョンを加えると運用可能なテキストCSSが多くなっている.
2. Content
contentは実はCSS 2の内容で、個人的には良いスタイルだと思います.CSSダミーセレクタ(:before and:after)を使用するオブジェクトに指定したテキストを挿入するために使用されます.
構文:content:""
説明:
Value
Description
Example
none
contentを指定しない
Try it »
normal
オブジェクトのテキストを使用するのは正常です.つまり、テキストを追加しません.
Try it »
counter
Sets the content as a counter
Try it »
attr(attribute)
Sets the content as one of the selector's attribute
Try it »
string
添付された本コンテンツを文字列形式で設定
Try it »
open-quote
内容を引用符で囲むように設定
Try it »
close-quote
閉じた引用符を設定
Try it »
no-open-quote
移動前に指定した引用符が存在する場合
Try it »
no-close-quote
移動前に指定したクローズ番号が存在する場合
Try it »
url(url)
ファイルを使用してコンテンツを設定
Try it »
inherit
親要素のcontentプロパティを継承
例:「Try it」をクリックして、W 3 schoolの例を見てみましょう.
3. font-face
@font-faceは、クライアントのフォントライブラリに対応するワードオフがないことを心配することなく、ブラウザが使用するために対応するフォントのパスを指定することができ、多くのブラウザは@font-faceルールをサポートしているが、IEはサポートされている.eotタイプのフォント、その他のブラウザでサポートされています.ttf和otfタイプのフォント
例:
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE */
}構文の説明:
Font descriptor
Values
Description
font-family
name
必須参照するフォントの名前付け
src
URL
必須フォントのパスの定義
font-stretch
normalcondensedultra-condensedextra-condensedsemi-condensedexpandedsemi-expandedextra-expandedultra-expanded
オプション
font-style
normalitalicoblique
オプション
font-weight
normalbold100200300400500600700800900
オプション
unicode-range
unicode-range
オプションフォントがサポートするエンコーディング範囲を定義します.デフォルトは「U+0-10 FFFF」です.