CSS スタイルの共通属性 (概要)

Sep 14, 2018 pm 04:33 PM
background font text

この章では、CSS スタイルの一般的な属性 (概要) を紹介し、通常のフロントエンド開発プロセスで CSS スタイルを定義するためによく使用されるいくつかの属性をまとめます。困っている友人は参考にしていただければ幸いです。

1. CSS テキスト属性:

color : #999999; /*文字颜色*/
font-family : 宋体,sans-serif; /*文字字体*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜体*/
font-variant:small-caps; /*小字体*/
letter-spacing : 1pt; /*字间距离*/
line-height : 200%; /*设置行高*/
font-weight:bold; /*文字粗体*/
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
text-decoration:line-through; /*加删除线*/
text-decoration: overline; /*加顶线*/
text-decoration:underline; /*加下划线*/
text-decoration:none; /*删除链接下划线*/
text-indent:30px;/*段落首行缩进*/
text-transform : capitalize; /*首字大写*/
text-transform : uppercase; /*英文大写*/
text-transform : lowercase; /*英文小写*/
text-align:right; /*文字右对齐*/ 
text-align:left; /*文字左对齐*/
text-align:center; /*文字居中对齐*/
text-align:justify; /*文字分散对齐*/
vertical-align属性    vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/
ログイン後にコピー

2. CSS 境界線属性 - 境界線を空白のままにします

padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白
ログイン後にコピー

3. CSS シンボル属性

list-style-type:none; /*不编号*/
list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*小写罗马数字*/
list-style-type:upper-roman; /*大写罗马数字*/
list-style-type:lower-alpha; /*小写英文字母*/
list-style-type:upper-alpha; /*大写英文字母*/
list-style-type:disc; /*实心圆形符号*/
list-style-type:circle; /*空心圆形符号*/
list-style-type:square; /*实心方形符号*/
list-style-image:url(/dot.gif); /*图片式符号*/
list-style-position: outside; /*凸排*/
list-style-position:inside; /*缩进*/
ログイン後にコピー

4. CSS 背景スタイル

background-color:#F5E2EC; /*背景颜色*/ 
background:transparent; /*透视背景*/
background-image : url(/image/bg.gif); /*背景图片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/ 指定背景位置
background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/
ログイン後にコピー

#5. CSS 接続プロパティ##

a /*所有超链接*/ a:link /*超链接文字格式*/ 
a:visited /*浏览过的链接文字格式*/ a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/ 鼠标光标样式:
链接手指 cursor: hand;(十字体) cursor:crosshair;(箭头朝下) cursor:s-resize;(十字箭头) cursor:move;(箭头朝右) cursor:move;(加一问号) cursor:help;(箭头朝左) cursor:w-resize;(箭头朝上) cursor:n-resize;(箭头朝右上) cursor:ne-resize;(箭头朝左上) cursor:nw-resize;(文字I型) cursor:text;(箭头斜右下) cursor:se-resize;(箭头斜左下) cursor:sw-resize;(漏斗) cursor:wait;(光标图案(IE6))  
p {cursor:url(“光标文件名.cur”),text;}
ログイン後にコピー

##6. CSS フレーム リスト

border-top : 1px solid #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/ 
border-right : 1px solid #6699cc; /*右框线*/
ログイン後にコピー
上記は推奨の書き方ですが、次のような従来の書き方も可能です。
border-top-color : #369 /*设置上框线top颜色*/
border-top-width :1px /*设置上框线top宽度*/
border-top-style : solid/*设置上框线top样式*/
ログイン後にコピー

その他の枠スタイル:実線 /*実線*/、点線 /*破線フレーム* /、ダブル /*二重線フレーム*/、溝 /*立体内凸フレーム*/、リッジ /*立体レリーフフレーム*/、インセット /*凹フレーム*/、アウトセット /*凸フレーム* /。

7. CSS フォーム アプリケーション

テキスト ボックス ボタン チェック ボックス 選択ボタン 複数行テキスト ボックス ドロップダウン メニュー オプション 1 オプション 2

8. CSS ボーダー スタイル

margin-top:10px; /*上边界*/ 
margin-right:10px; /*右边界值*/ 
margin-bottom:10px; /*下边界值*/ 
margin-left:10px; /*左边界值*/
ログイン後にコピー
##9. CSS フィルター属性 Filter: スタイルにフィルター効果を追加します。この属性には多くの内容が含まれるため、次の章でフィルタについて個別に紹介します。

1. 透明度

アルファ: 透明度アルファを設定します(Opacity=?、FinishOpacity=?、Style=?、StartX=?、StartY) =?、終了X=?、終了Y=?) 不透明度: 透明度レベル。範囲は 0 ~ 100 です。0 は完全に透明を表し、100 は完全に不透明を表します。 FinishOpacity: グラデーションの透明度効果を設定する際に、最後の透明度を指定するために使用され、範囲も 0 ~ 100 です。

スタイル: グラデーションの透明スタイルを設定します。値 0 は均一な形状を表し、1 は直線状の形状を表し、2 は放射状の形状を表し、3 は長方形を表します。

StartX と StartY: グラデーション透明効果の開始 X 座標と Y 座標を表します。 FinishX および FinishY: グラデーション透明効果の終了の X 座標と Y 座標を表します。


2.BlendTrans: 画像間のフェードインおよびフェードアウト効果

BlendTrans(Duration=?) Duration: フェード-インまたはフェードアウト時間。

注: 画像間にエフェクトを作成するには、このフィルターを JS で使用して画像シーケンスを作成する必要があります。

3. ぼかし効果を設定します

Blru: ぼかし効果を作成します Blur(Add=?, Direction=?, Strength=?) Add: ぼかしを入れるかどうか一方向、このパラメータはブール値、true (0 ではない) または false (0) です。 方向: ブラーの方向を設定します。0 度は垂直上向きを表し、45 度ごとが単位となります。強度: ぼやけたピクセル値を表します。

4.Chroma: 指定した色を透明に設定します

Chroma(Color=?) Color: 設定する色を参照します透明な色。

5. 影効果を作成します

DropShadow(Color=?, OffX=?, OffY=?, Positive=?)
ログイン後にコピー

カラー: 影の色を指定します。 OffX: 要素に対する影の水平オフセットを整数で指定します。 OffY: 要素に対する影の垂直オフセットを整数で指定します。

正: これはブール値です。値が true (0 ではない) の場合は外側のシャドウが確立されることを意味し、false (0) の場合は内側のシャドウが確立されることを意味します。



6.FlipH: 要素を水平方向に反転します。

7.FlipV: 要素を垂直方向に反転します。#8外側のグロー効果を作成します。

Glow(Color=?, Strength=?)
ログイン後にコピー

Color: ライトの色を指定します。 強度: 光の強度。1 ~ 255 の整数を指定できます。数値が大きいほど、光の範囲が広くなります。

9.Gray: 画像の色を削除し、白黒画像として表示します

##10.Invert: 画像の色を反転します。フィルムのようなイメージを生成します。 エフェクト


#11.Light: 光源を配置するエフェクトです。。オブジェクトへの光源の投影効果をシミュレートするために使用できます。注: この効果では、JS を使用してライトの位置と強度を設定する必要があります。

12.Mask: 透明なマスクを作成します。

Mask(Color=?)

Color: オブジェクトが背景を覆うように背景色を設定します。背景色 部分的に透明

13.RevealTrans: 切り替え効果を作成します

RevealTrans(Duration=?, Transition=?)
ログイン後にコピー

Duration: 切り替え時間 (秒単位) です。トランジション:切り替え方法で、0~23まで設定できます。

注: ページ間を切り替えたい場合は、 領域にコード行を追加できます: 。要素がページ内で使用される場合は、JS で使用する必要があります。

14.Shadow: 別のシャドウ効果を作成します。

Shadow(Color=?, Direction=?)
ログイン後にコピー

Color: シャドウの色を指します。

方向: 投影の方向を設定します。0 度は垂直上向きを意味し、45 度ごとを単位とします。

15.Wave:波纹效果

Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)
ログイン後にコピー

Add:表示是否显示原对象,0表示不显示,非0表示要显示原对象。

Freq:设置波动的个数。LightStrength:设置波浪效果的光照强度,从0到100。0表示最弱,100表示最强。 

Phase:波浪的起始相角。从0到100的百分数值。(例如:25相当于90度,而50相当于180度。) 

Strength:设置波浪摇摆的幅度。

16.Xray:显现图片的轮廓,X光片效果 注意:在使用CSS滤镜时,必须使用在有区域的元素,比如表格,图片等。而文本,段落这样没有区域的元素不能使用CSS滤镜,对这样的元素我们可以设置元素的Height和Width样式或坐标来实现。"


以上がCSS スタイルの共通属性 (概要)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

スクリーンリーダーの分解:アクセス可能なフォームとベストプラクティス スクリーンリーダーの分解:アクセス可能なフォームとベストプラクティス Mar 08, 2025 am 09:45 AM

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理:Focus-Visible」をご覧ください。で

WordPressブロックと要素にボックスシャドウを追加します WordPressブロックと要素にボックスシャドウを追加します Mar 09, 2025 pm 12:53 PM

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Mar 07, 2025 am 11:33 AM

このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています(注:使用できなくなりました)。 フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する 5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する Mar 04, 2025 am 10:22 AM

この記事では、Envato Marketで入手可能なPHPフォームのビルダースクリプトを説明し、機能、柔軟性、デザインを比較します。 特定のオプションに飛び込む前に、PHPフォームのビルダーが何であるか、そしてそれを使用する理由を理解しましょう。 PHPフォーム

GraphQLキャッシングの使用 GraphQLキャッシングの使用 Mar 19, 2025 am 09:36 AM

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

最初のカスタムSvelteトランジションを作成します 最初のカスタムSvelteトランジションを作成します Mar 15, 2025 am 11:08 AM

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

ショー、Don' t Tell ショー、Don' t Tell Mar 16, 2025 am 11:49 AM

あなたのウェブサイトのコンテンツプレゼンテーションの設計にどれくらいの時間に費やしますか?新しいブログ投稿を書いたり、新しいページを作成したりするとき、あなたは考えていますか

上品でクールなカスタムCSSスクロールバー:ショーケース 上品でクールなカスタムCSSスクロールバー:ショーケース Mar 10, 2025 am 11:37 AM

この記事では、Scrollbarsの世界に飛び込みます。私は知っています、それはあまりにも魅力的ではありませんが、私を信じてください、よく設計されたページは手をつないで行きます

See all articles