ホームページ >ウェブフロントエンド >CSSチュートリアル >Webページを美しくするCSSの要素とは何でしょうか？ Webページを美しくできるCSSの要素まとめ
Webページを美しくするCSSの要素とは何でしょうか？ Webページを美しくできるCSSの要素まとめ
- 不言オリジナル
- 2018-08-24 09:56:102621ブラウズ
この記事の内容は、Webページを美しくするCSSの要素とは何か？ Web ページを美しくするための CSS の要素をまとめました。必要な方は参考にしていただければ幸いです。
1.この章の目標
CSSを使用してフォントスタイルとテキストスタイルを設定できる
CSSを使用してハイパーリンクスタイルを設定できる
CSSを使用してリストスタイルを設定できる
できるCSS を使用して背景を設定します。スタイル
は CSS を使用してグラデーション効果を設定します
2.45a2772a6b6107b401db3c9b82c049c2 タグ
45a2772a6b6107b401db3c9b82c049c2タグの役割
は、特定のテキストや単語を立たせることができますout
例:
<p>享受<span class="show">“北大式”</span>教育服务</p>
<p>在php中文网，有一群人默默支持你成就
<span id="dream">梦想</span></p>
<p class="bird">选择<span>php中文网</span>，成就你的梦想</p>3. フォントスタイル
4. フォントタイプ
font-family属性
p{font-family:Verdana,"楷体";}
body{font-family: Times,"Times New Roman", "楷体";} 5. フォントサイズ
フォントサイズ属性
単位: px (ピクセル)、em、rem、cm、mm、pt、pc
6. フォントスタイル
フォントスタイル属性
通常、斜体(ライブラリに組み込まれています) ) と oblique (フォントを斜体に自動的に変更します)
例:
7. フォントの太さ
フォント-weight 属性
8. フォントプロパティ
フォントプロパティ ファミリー 体重 サイズスタイル
フォント属性の順序:フォントスタイル→フォントウェイト→フォントサイズ→フォントタイプ
pスパン { font:oblique 太字 12px "楷体";}
9. テキストスタイル
テキスト属性
10. 色属性
RGB
色を表す 16 進法: 最初の 2 ビットは赤の成分を表し、中央の 2 ビットは緑の成分を表し、最後の 2 ビットは青の成分を表します
rgb(r,g,b): の値正の整数は 0~255 です
RGBA
は、アルファ透明度を制御する RGB パラメータに基づいて追加されます。この透明チャネルの値は 0~1 です
例: color:#A983D8;
color:#EEFF66;
color:rgb(0,255,255);--------------最深的颜色
color:rgba(0,0,255,0.5);-----------透明度
11テキストの段落を植字する 12.文本修饰和垂直对齐 文本装饰 text-decoration属性 垂直对齐方式 vertical-align属性：middle、top、bottom 13.文本阴影 浏览器兼容性 14.超链接伪类 15.使用CSS设置超链接 16.列表样式2-1 list-style-type list-style-image 17.列表样式2-2 1、网页背景 R红--G绿--B蓝 背景颜色 background-color 背景图像 background-image 19.设置背景图像2-1 背景图像 background-image属性 background-image:url(图片路径); 背景重复方式 background-repeat属性 repeat：沿水平和垂直两个方向平铺 no-repeat：不平铺，即只显示一次 repeat-x：只沿水平方向平铺 repeat-y：只沿垂直方向平铺 20.设置背景图像2-2 背景定位 background-position属性 21.设置背景 背景属性 background属性 23.背景尺寸 背景尺寸 background-size 24.CSS3渐变 线性渐变 颜色沿着一条直线过渡：从左到右、从右到左、从上到下等 径向渐变 圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向 混合 浏览器兼容性 25.CSS3渐变兼容 IE浏览器是Trident内核，加前缀：-ms- Chrome浏览器是Webkit内核，加前缀：-webkit- Safari浏览器是Webkit内核，加前缀：-webkit- Opera浏览器是Blink内核，加前缀：-o- Firefox浏览器是Mozilla内核，加前缀：-moz- 26.线性渐变 左上向右下方向渐变：linear-gradient( left top ,red, blue) 总结 相关推荐： list-style:
li {
list-style:none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6 to 15 */
background: linear-gradient(red,yellow,blue); /* 标准语法 (必须在最后) */
}
</style>
</head>
<body>
<h3>线性渐变 - 头部到底部</h3>
<p>从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。</p>
</body>
</html>
以上がWebページを美しくするCSSの要素とは何でしょうか？ Webページを美しくできるCSSの要素まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。