Webページを美しくするCSSの要素とは何でしょうか？ Webページを美しくできるCSSの要素まとめ-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

Webページを美しくするCSSの要素とは何でしょうか？ Webページを美しくできるCSSの要素まとめ

不言

Aug 24, 2018 am 09:56 AM

この記事の内容は、Webページを美しくするCSSの要素とは何か？ Web ページを美しくするための CSS の要素をまとめました。必要な方は参考にしていただければ幸いです。

1.この章の目標

CSSを使用してフォントスタイルとテキストスタイルを設定できる

CSSを使用してハイパーリンクスタイルを設定できる

CSSを使用してリストスタイルを設定できる

できるCSS を使用して背景を設定します。スタイル

は CSS を使用してグラデーション効果を設定します

2. タグ

タグの役割

は、特定のテキストや単語を立たせることができます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

list-style: li { list-style:none; }

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)
<!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 id="线性渐变-nbsp-nbsp-头部到底部">线性渐变 - 头部到底部</h3> <p>从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:</p> <div id="grad1"></div> <p><strong>注意：</strong> Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。</p> </body> </html>
总结

相关推荐：

CSS3如何实现全景图的动画效果（附代码）

如何使用纯CSS3实现图片轮播的效果

以上がWebページを美しくするCSSの要素とは何でしょうか？ Webページを美しくできるCSSの要素まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。