Webページの要素を美化する
なぜ美化するのか
- ページ情報を効果的に伝える
- ページを美しくする、ページはユーザーを引き付けるために美しい
- ページのテーマを強調表示
- ユーザーエクスペリエンスを向上させる
スパンタグ
スパンタグを使用してキーワードをカバーする
<style>
#demo1{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习 <span id="demo1"class="span1">java</span>
</body>
フォントスタイル
フォント
フォントファミリー
font-family:楷体；
フォントサイズ
フォントサイズ
フォントの太さ
フォントの太さ
フォントの色
色
テキストスタイル
色
色、RGB 0〜F、RGBA透明度0〜1
color:rgba(0,255,255,0.5);
テキストの配置、植字
text-align：中央右左;
text-align: center;/*水平居中*/
最初の行のインデント
text-indent: 2em;
emは単語のサイズを表し、
行の高さ、1行のテキストは上下の中央に配置されます
行の高さ
高さブロックの高さ
行の高さがブロックの高さと同じである場合は、中央に配置できます。1行のテキストが適用されます
.p2{
background: #b4a53b;
height: 100px;
line-height: 100px;
}
上、中、下線
.l1{
/*下划线*/
text-decoration: underline;
}
.l2{
/*中划线*/
text-decoration: line-through;
}
.l3{
/*上划线*/
text-decoration: overline;
}
アンダースコアを削除する場合は、ハイパーリンクのタグに下線が引かれます
a{
text-decoration:none;
}
テキストと画像の水平方向の配置
img画像タグ
スパンテキストラベル
<style>
img,span{
vertical-align:middle;
}
</style>
テキストシャドウとハイパーリンク疑似クラス
ハイパーリンク疑似クラス
/*鼠标悬浮的状态*/
a:hover{
color: chocolate;
font-size: 30px;
}
/*鼠标按下之后不弹开的状态，变色*/
a:active{
color: blueviolet;
}
a：ホバー{}
選択したリンク
a：active {}
リンクにカーソルを合わせると
a：link {}はアクセスするためのリンクです
a：visited {} visitedリンク
テキストシャドウ
#price{
/*阴影颜色，水平偏移，垂直偏移，阴影半径*/
text-shadow: chartreuse 10px 10px 2px;
}
リスト
リストスタイル：円の中空の円、正方形の正方形、小数、数字
ul li{
height:30px;
list-style:none;/*去掉无序列表前的圆点*/
}
divタグ
ナビゲーションナビゲーションバーは通常、divで記述されます
<div id="nav">
#nav{
width: 300px;/*调整宽度*/
background: bisque;
}
ハイパーリンク疑似クラスは通常、ペアaとaで表示されます：ホバー
元の状態とマウスを上に動かした後の状態
a{
text-decoration: none;
font-family: 楷体;
font-size: 18px;
color: black;
}
a:hover{
/*鼠标移上去之后变色*/
color: orange;
}