CSS

 Computer >> コンピューター >  >> プログラミング >> CSS
  1. スケールは、CSS3でx軸を使用して要素を変換します

    scaleX（x）メソッドは、x軸を使用して要素をスケール変換するために使用されます。 構文を見てみましょう- scaleX(x) ここで、xは、要素の各ポイントの横軸に適用する倍率を表す数値です。 例を見てみましょう- div {    width: 60px;    height: 60px;    background-color: yellow; } .scaled {    transform: scaleX(0.5);    background-color: black; }

  2. スケールは、CSS3でz軸を使用して要素を変換します

    scaleZ（z）メソッドは、Z軸を使用して要素をスケール変換するために使用されます。 構文を見てみましょう- scaleZ(z) ここで、zは、要素の各ポイントのz座標に適用する倍率を表す数値です。 例を見てみましょう- div {    width: 60px;    height: 60px;    background-color: black; } .perspective {    transform: perspective(200px) translateZ(-150px);   &

  3. CSSボーダー-画像-幅

    border-image-widthプロパティは、境界線の画像の幅を設定するために使用されます。次のコードを実行して、 border-image-widthを実装してみてください。 プロパティ- 例 <html>    <head>       <style>          #borderimg1 {             border: 15px solid transparent; &nbs

  4. CSS3サイズ変更プロパティ

    CSS3のresizeプロパティには、以下に示す3つの一般的な値があります- 水平 垂直 両方 例 CSS3ユーザーインターフェイスのresizeプロパティの両方の値を使用する： <html>    <head>       <style>          div {             border: 2px solid;         &nbs

  5. CSS3アウトラインオフセットプロパティ

    アウトラインとは、境界線の外側の要素の周りに線を引くことを意味します。 例 次のコードを実行して、 CSS3を実装してみてください。 アウトラインオフセット プロパティ- <html>    <head>       <style>          div {             margin: 20px;             p

  6. CSS2サイジングプロパティとCSS3ボックスサイジングプロパティ

    CSS2サイジングプロパティとCSS3ボックスサイジングプロパティの違いを理解しましょう。 CSS2サイジングプロパティ <html>    <head>       <style>          .div1 {             width: 200px;             height: 100px;   &nb

  7. CSSボックスのサイズ設定プロパティ

    Box-sizingプロパティは、要素の高さと幅を変更するために使用されます。 CSS2以降、boxプロパティは次のように機能します- width + padding + border = actual visible/rendered width of an element's box height + padding + border = actual visible/rendered height of an element's box 例 ボックスサイズのプロパティを理解するために、例を見てみましょう： <html>    <he

  8. CSS3を使用したメディアクエリ

    メディアクエリは、モバイル、デスクトップなどのさまざまなサイズのデバイスのさまざまなスタイルルールに対するものです。 次のコードを実行して、CSS3でメディアクエリを実装してみてください- 例 <html> <head> <style> body { background-color: lightpink; } @media screen and (max-width: 420px) { body {

  9. CSS3レスポンシブWebデザイン

    レスポンシブウェブデザインは、デスクトップ、モバイル、タブなどのさまざまなデバイスでのサイズ変更を最小限に抑えながら、最適なエクスペリエンス、読みやすさ、ナビゲーションを提供します。 レスポンシブウェブデザインとは何かを見てみましょう：

  10. さまざまなサイズのデバイスのさまざまなCSSスタイルルールのメディアクエリを設定する

    さまざまなCSSスタイルルールのメディアクエリを設定するには、次のコードを実行してみてください- 例 <html>    <head>       <style>          body {             background-color: lightpink;          }       &nbs

  11. CSS3フォントの組み合わせ

    CSS3はフォントの組み合わせ技術を採用しています。ここでは、ブラウザが最初のフォントをサポートしていない場合、次のフォントを試します。 サンセリフフォントの例を見てみましょう-

  12. CSSユニットの操作

    CSSには、幅、マージン、パディング、フォントサイズ、境界線幅などのさまざまな単位に対応するいくつかの単位があります。長さは、数値の後にpxなどの長さの単位を使用して示されます。 、dp、emなど。数値と長さの単位の間に空白を入れることはできません。 長さの単位は次のように分割されます： 相対単位 絶対 絶対単位 単位 略語 ピクセル ピクセル ポイント Pt インチ センチメートル Cm ピカ PC 相対単位 相対的な単位では、長さの値は固定されており、要素の正確なサイズが表示されます 単位

  13. CSS相対単位

    相対単位では、長さの値は固定されており、要素の正確なサイズが表示されます。単位を見てみましょう： 単位 省略形 パーセント ％ Em Em 例 例 ルートem レム ビューポートの幅 Vw ビューポートの幅 Vh ビューポートの幅 Vm 文字 Ch グリッド Gd

  14. CSSを使用したスイングアニメーション効果

    スイングアニメーション効果は、吊り下げられている間、または要素の軸上で前後または左右に移動または移動させます。 例 <html>    <head>       <style>          .animated {             background-image: url(/css/images/logo.png);          

  15. CSS：最初の文字の疑似要素

    この要素を使用して、セレクターのテキストの最初の文字に特別なスタイルを追加します。次の例は、：first-letter要素を使用して、ドキュメント内の要素の最初の文字に特殊効果を追加する方法を示しています。 例 <html>    <head>       <style>          p:first-letter {             font-size: 5em;   &nbs

  16. CSSを使用した多田アニメーション効果

    CSSを使用してTadaアニメーション効果を作成するには、次のコードを実行してみてください。 例 <html>    <head>       <style>          .animated {             background-image: url(/css/images/logo.png);             ba

  17. CSSボーダー画像プロパティ

    CSS border-imageプロパティは、一部の要素に画像の境界線を追加するために使用されます。次のコードを実行して、border-imageプロパティを実装してみてください- 例 <html>    <head>       <style>          #borderimg1 {             border: 15px solid transparent;   &nbs

  18. CSSを使用して要素の境界として画像を設定します

    CSS border-imageプロパティは、一部の要素に画像の境界線を追加するために使用されます。次のコードを実行して、画像を要素の境界線として設定してみてください。 例 <html>    <head>       <style>          #borderimg1 {             border: 10px solid transparent;     &nb

  19. CSSで画像パスを設定する

    border-image-sourceプロパティは、CSSで画像パスを設定するために使用されます。次のコードを実行して、画像パスを設定してみてください- 例 <html> <head> <style> #borderimg1 { border: 15px solid transparent; padding: 15px; border-image-source: url(https://tutorialspoint.com/css/images/

  20. CSSで境界線の画像をスライスします

    border-image-sliceプロパティは、CSSで境界線画像をスライスするために使用されます。次のコードを実行して、 border-image-sliceを実装してみてください。 プロパティ： 例 <html>    <head>       <style>          #borderimg1 {             border: 15px solid transparent; &

Total 1566 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:61/79  20-コンピューター/Page Goto:1 55 56 57 58 59 60 61 62 63 64 65 66 67