目次
CSSテキストスタイル
フォント
font-size：サイズ
font-family：font
font-weight：フォントの太さ
font-style：フォントスタイル
フォント：フォントスタイルを包括的に設定（強調）
フォントの概要
CSSの外観プロパティ
色：テキストの色
text-align：テキストの水平方向の配置
行の高さ：行間隔
text-indent：最初の行をインデントします
テキスト装飾テキスト装飾
CSSの外観プロパティの概要
CSSテキストテキストスタイルの概要
包括的なケース
CSSテキストスタイル
フォント
font-size：サイズ
- 機能：font-size属性を使用してフォントサイズを設定する
p {
font-size:20px;
}
- 単位：
- 相対長さ単位または絶対長さ単位を使用できます。
- 相対的な長さの単位がより一般的に使用され、ピクセル単位のpxが推奨され、絶対的な長さの単位はあまり使用されません
- 注意：
- テキストサイズの後、基本的にpxを使用し、他の単位はほとんど使用されません
- Google Chromeのデフォルトのテキストサイズは16pxです
- ただし、ブラウザによって表示されるフォントサイズはデフォルトで異なる場合があります。デフォルトのサイズではなく、明確な値のサイズを指定するようにしています。
- 通常、本文のページテキスト全体のサイズを指定します
font-family：font
- 機能：font-family属性は、どのフォントを設定するために使用されます。
p{ font-family:"微软雅黑";}
- Webページで一般的に使用されるフォントには、Times New Roman、Microsoft Yahei、HeiTiなどがあります。たとえば、Webページのすべての段落テキストのフォントをMicrosoft Yaheiに設定します
- カンマで区切って複数のフォントを同時に指定できます。つまり、ブラウザが最初のフォントをサポートしていない場合、適切なフォントが見つかるまで次のフォントを試します。フォントがない場合は、コンピュータのデフォルトのフォントが優先されます。
p{font-family: Arial,"Microsoft Yahei", "微软雅黑";}
- 1.英語では、さまざまなフォントをカンマで区切る必要があります。
- 2. 中国語フォントは英語で引用する必要があり、英語フォントは通常引用する必要はありません。英語フォントを設定する必要がある場合は、英語フォント名を中国語フォント名の前に置く必要があります。
- 3. フォント名にスペース、＃、$、およびその他の記号が含まれている場合、フォントは font-family： "Times New Roman";のように、英語の単一引用符または二重引用符で囲む必要があります。
- 4.システムのデフォルトフォントを使用して、どのユーザーのブラウザでも正しく表示できることを確認します。
- CSS Unicodeフォント：
- Unicodeフォントを使用する理由
- CSSでフォント名を設定し、中国語を直接書きます。ただし、ファイルのエンコード（GB2312、UTF-8など）が一致しない場合、文字化けエラーが発生します。
- XPシステムは、Microsoft Yaheiのような中国語をサポートしていません。
- 解決する：
- オプション1：代わりに英語を使用できます。例えば
font-family:"Microsoft Yahei"。
- 解決策2：Unicodeエンコーディングを直接使用してCSSでフォント名を記述し、これらのエラーを回避します。Unicodeを使用して中国語のフォント名を書き込むと、ブラウザはそれを正しく解析できます。
font-family: "\5FAE\8F6F\96C5\9ED1"; 表示设置字体为“微软雅黑”。
| フォント名 |
英語名 |
Unicodeエンコーディング |
| ソン・ティ |
SimSun |
\ 5B8B \ 4F53 |
| 新しい歌 |
NSimSun |
\ 65B0 \ 5B8B \ 4F53 |
| 黒体 |
SimHei |
\ 9ED1 \ 4F53 |
| マイクロソフトヤヘイ |
Microsoft YaHei |
\ 5FAE \ 8F6F \ 96C5 \ 9ED1 |
| イタリック_GB2312 |
KaiTi_GB2312 |
\ 6977 \ 4F53_GB2312 |
| 公式スクリプト |
LiSu |
\ 96B6 \ 4E66 |
| 幼稚園 |
YouYuan |
\ 5E7C \ 5706 |
| チャイニーズファインブラック |
STXihei |
\ 534E \ 6587 \ 7EC6 \ 9ED1 |
| 詳細なボディ |
MingLiU |
\ 7EC6 \ 660E \ 4F53 |
| 新しい詳細 |
PMingLiU |
\ 65B0 \ 7EC6 \ 660E \ 4F53 |
- 異なるコンピューターのフォントインストールの問題に対処するために、Song TiフォントとMicrosoft Yahei中国語フォントのみを使用するようにしています
font-weight：フォントの太さ
- htmlでフォントを太字にする方法は、タグで実現できます。
- bおよび強力なタグを使用して、テキストを太字にします。
- CSSを使用して実現できますが、CSSにはセマンティクスがありません。
| 属性値 |
解説 |
| 正常 |
デフォルト値（太字ではない） |
| 大胆な |
太字（太字）を定義する |
| 100〜900 |
400は通常に相当し、700は太字に相当します。この文を覚えましょう |
- 擁護者：私たちは通常、太字ではなく太字を示すために数字を使用することを好みます。（太字は700に相当）
font-style：フォントスタイル
- タグを使用してHTMLでフォントを傾ける方法
- CSSを使用して達成できますが、CSSにはセマンティクスがありません
- font-style属性は、イタリック、イタリック、通常のフォントなどのフォントスタイルを定義するために使用されます。使用可能な属性値は次のとおりです。
| の属性 |
効果 |
| 正常 |
デフォルトでは、ブラウザには標準のフォントスタイルfont-style：normal;が表示されます。 |
| イタリック |
ブラウザーにイタリックフォントスタイルが表示されます。 |
- 通常、テキストをイタリックにすることはめったにありませんが、イタリックタグ（em、i）を通常モードに変更することを好みます。
フォント：フォントスタイルを包括的に設定（強調）
- font属性は、フォントスタイルを包括的に設定するために使用されます。
-
基本的な構文形式は次のとおりです。
选择器 { font: font-style font-weight font-size/line-height font-family;}
- 注：
- font属性を使用する場合は、上記の文法形式の順序で記述する必要があり、順序を変更することはできません。各属性はスペースで区切ります。
- 設定する必要のない属性は省略できます（デフォルト値を使用）が、font-sizeおよびfont-family属性は保持する必要があります。保持しないと、font属性が機能しません。
フォントの概要
| の属性 |
手段 |
注意点 |
| フォントサイズ |
フォントサイズ |
私たちが通常使用する単位はpxであり、単位に遅れずについていく必要があります |
| フォントファミリー |
フォント |
実際の作業では、チームの合意に従ってフォントを作成します |
| フォントの太さ |
フォントの太さ |
太字は700または太字であることを覚えておいてください。太字でない場合は、通常または400です。数字が単位の後に続かないようにしてください |
| フォントスタイル |
フォントスタイル |
傾きは斜体であり、通常の傾きではないことを忘れないでください。 |
| フォント |
フォント連結 |
1.フォントライゲーションは適切であり、ランダムに変更することはできません2.フォントサイズとフォントが同時に表示される必要があります |
CSSの外観プロパティ
色：テキストの色
- 役割：color属性は、テキストの色を定義するために使用されます。
- 値を選択するには3つの方法があります。
| 表現 |
属性値 |
| 定義済みのカラー値 |
赤、緑、青、そして私たちの女王色のピンク |
| 16進数 |
＃FF0000、＃FF6600、＃29D794 |
| RGBコード |
rgb（255,0,0）またはrgb（100％、0％、0％） |
- 注：実際の作業では、16進表記が最も一般的です。赤の場合は＃f00などの省略形を使用します
text-align：テキストの水平方向の配置
- 機能：text-align属性を使用して、テキストコンテンツの水平方向の配置を設定します。これは、htmlのalign属性と同等です。
- 使用可能な属性値は次のとおりです。
| の属性 |
説明 |
| 左 |
左揃え（デフォルト値） |
| 正しい |
右揃え |
| センター |
中央揃え |
- 注：ボックスのコンテンツは水平方向の中央に配置され、ボックスは中央に配置されません
行の高さ：行間隔
- 機能：line-height属性は、行間隔、つまり行間の距離、つまり文字の垂直間隔を設定するために使用されます。これは、一般に行の高さと呼ばれます。
- 単位：行の高さには、ピクセルpx、相対値em、パーセント％の3つの一般的に使用される属性値の単位があります。ピクセルpxは、実際の作業で最も使用されます。
- 通常、行間隔はフォントサイズよりも約7または8ピクセル大きくする必要があります。
text-indent：最初の行をインデントします
- 機能：text-indent属性を使用して、テキストの最初の行のインデントを設定します。
- 属性値：属性値は、さまざまな単位の数値、em文字の幅の倍数、またはブラウザーウィンドウの幅に対するパーセンテージにすることができます。負の値も使用できます。
- 1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
p {
/*行间距*/
line-height: 25px;
/*首行缩进2个字 em 1个em 就是1个字的大小*/
text-indent: 2em;
}
text-decoration 文本的装饰
- text-decoration 通常我们用于给链接修改装饰效果
| 值 |
描述 |
| none |
默认。定义标准的文本。 取消下划线（最常用） |
| underline |
定义文本下的一条线。下划线 也是我们链接自带的（常用） |
| overline |
定义文本上的一条线。（不用） |
| line-through |
定义穿过文本下的一条线。（不常用） |
CSS外观属性总结
| 属性 |
表示 |
注意点 |
| color |
颜色 |
我们通常用 十六进制 比如 而且是简写形式 #fff |
| line-height |
行高 |
控制行与行之间的距离 |
| text-align |
水平对齐 |
可以设定文字水平的对齐方式 |
| text-indent |
首行缩进 |
通常我们用于段落首行缩进2个字的距离 text-indent: 2em; |
| text-decoration |
文本修饰 |
记住 添加 下划线 underline 取消下划线 none |
CSS文字文本样式总结
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合案例-体育页面</title>
<style>
body {
font-size: 16px;
}
.title {
font-size: 28px;
/*让字体不加粗*/
font-weight: 400;
/*color: #FF6700;*/
/*color: rgb(255,103,0);*/
}
em {
/*让倾斜的标签 不倾斜*/
font-style: normal;
color: skyblue;
}
.time {
color: #ccc;
/*#ff0000 #f00
#000000 #000
#ffffff #fff
#ff1234
#ff1122 #f12*/
}
.people {
/*color: #990000;*/
color: #900;
text-decoration: underline;
}
.search {
color: red;
}
.btn {
color: green;
font-weight: 700;
}
/*文本 水平居中对齐*/
.tac {
text-align: center;
}
p {
/*行高 */
line-height: 26px;
/*首行缩进2个字的距离 em 是倍数关系， 1em 就是1个字的距离 2em 就是2个字的宽度*/
text-indent: 2em;
}
a {
/*取消下划线 a 默认自带下划线的*/
text-decoration: none;
}
</style>
</head>
<body>
<h1 class="title tac">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>
<div class="tac">
<span class="time">2017年07月16日20:11</span>
<span class="people"> 新浪体育 评论中大奖 （11人参与）</span>
<a href="#">收藏本文</a>
<input type="text" value="请输入查询条件" class="search" />
<input type="button" value="搜索" class="btn" />
</div>
<hr />
<p>
新浪体育讯 7月16日是燕京啤酒<em>[微博]</em>2017中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。
</p>
<p>
在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。
</p>
<p>
据记者多方了解的情况，李虎<em>[微博]</em>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。
</p>
<p>
这样的情况并没有影响到丽江嘉云昊队<em>[微博]</em>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。<strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong>
</p>
</body>
</html>