CSS スタイルの共通属性 (概要)
この章では、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;}
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样式*/
テキスト ボックス ボタン チェック ボックス 選択ボタン 複数行テキスト ボックス ドロップダウン メニュー オプション 1 オプション 2
8. CSS ボーダー スタイルmargin-top:10px; /*上边界*/
margin-right:10px; /*右边界值*/
margin-bottom:10px; /*下边界值*/
margin-left:10px; /*左边界值*/
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=?)
14.Shadow: 別のシャドウ効果を作成します。
Shadow(Color=?, Direction=?)
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 サイトの他の関連記事を参照してください。

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック











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

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

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

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

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

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

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

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