CSS

 Computer >> コンピューター >  >> プログラミング >> CSS
  1. CSSを使用したWordの間隔

    単語間の間隔を設定するには、word-spacingプロパティを使用します。プロパティ値は次のとおりです- word-spacing: normal|length|initial|inherit; 例 例を見てみましょう- <!DOCTYPE html> <html> <head> <style> p.demo1 {    word-spacing: normal; } p.demo2 {    word-spacing: 10px; } </style> </head> <

  2. CSSのmix-blend-modeプロパティ

    mix-blend-modeプロパティは、要素のコンテンツをその直接の親の背景とブレンドする方法を設定するために使用されます。プロパティ値は次のとおりです- mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity; 例 例を見てみましょう- <!DOCTYPE html> <html> <head> <meta name="

  3. CSSを使用してテキストの配置を設定する

    CSSを使用してテキストの配置を設定するには、text-alignプロパティを使用します。可能なプロパティ値は次のとおりです- text-align: left|right|center|justify|initial|inherit; 例 テキストの配置を設定する例を見てみましょう- <!DOCTYPE html> <html> <head> <style> .demo {    -webkit-columns: auto auto; /* Chrome, Safari, Opera */    -mo

  4. CSSのテキスト装飾

    CSSでのテキスト装飾の場合、text-decorationプロパティを次のプロパティの省略形プロパティとして使用します- text-decoration-line text-decoration-color text-decoration-style 例 CSSでのテキスト装飾の例を見てみましょう- <!DOCTYPE html> <html> <head> <style> .demo {    text-decoration: overline underline; } </style> </head&

  5. CSSを使用した順序なしリストと順序付きリストのフォーマット

    順序付けされていないリストと順序付けられたリストの両方をフォーマットするには、list-style-type、list-style-image、およびlist-style-positionプロパティを使用します。 例 順序付けされていないリストをフォーマットしている例を見てみましょう（ul）- <!DOCTYPE html> <html> <head> <style> ul {    list-style-type: square; } </style> </head> <body> &l

  6. CSSを使用したリストのスタイリング

    リストも順序付けされていません。 CSSを使用すると、セットリストアイテムのマーカーまたはマーカーの画像を設定できます。これにより、CSSを使用して、リストアイテムマーカーの位置を設定することもできます。 いくつかの例を見てみましょう- list-style-type list-style-typeは、リストアイテムマーカーのタイプを設定するために使用されます。 例 順序付きリストをフォーマットする例を見てみましょう（ol）- <!DOCTYPE html> <html> <head> <style> ul {    

  7. CSSを使用したテーブルのスタイリング

    CSSを使用してテーブルのスタイルを設定するために、境界線の設定、折りたたみ、幅と高さの設定を行うことができます。パディングやテキストの配置などを設定することもできます。いくつかの例を見てみましょう- 例 CSSのテーブルに境界線を追加するには、bordersプロパティを使用します。例を見てみましょう- <!DOCTYPE html> <html> <head> <style> table, th, td {    border: 2px dashed orange; } </style> </head&g

  8. CSS3を使用した列ギャップの設定

    CSS3を使用して列ギャップを設定するには、column-gapプロパティを使用します。値は-として設定できます column-gap: length|normal|initial|inherit; 例 <!DOCTYPE html> <html> <head> <style> .demo {    column-count: 4;    -webkit-column-count: 4; /* Chrome, Safari, Opera */    -moz-column-count:

  9. CSSの絶対長の単位

    絶対長の単位は相互に固定されています。これらの単位は、出力形式がすでにわかっている場合に使用されます。以下は、絶対長の単位の一部です- Sr.No 単位と説明 1 cm センチメートル 2 mm ミリメートル 3 in インチ（1インチ=96px =2.54cm） 4 px * ピクセル（1px =1inの1/96） 5 pt ポイント（1pt =1inの1/72） 6 pc パイカ（1個=12ポイント） 例 <!DOCTYPE html>

  10. CSS3を使用した列数または列幅の設定

    CSS3のcolumnsプロパティを使用して、列の数と幅を設定します。これは、column-widthプロパティとcolumn-countプロパティの省略形のプロパティです。 −として設定されます columns: auto|column-width column-count|initial|inherit; 例 列数を設定する例を見てみましょう- <!DOCTYPE html> <html> <head> <style> .demo {    -webkit-columns: auto auto; /* Chrome, S

  11. CSS3を使用した画像の明るさの設定

    CSSで画像の明るさを設定するには、フィルターの明るさ（％）を使用します。値0は画像を黒くし、100％は元の画像とデフォルトを意味することを忘れないでください。残りは、任意の値を設定できますが、100％を超える値を設定すると、画像が明るくなります。 例 例を見てみましょう- <!DOCTYPE html> <html> <head> <style> img.demo {    filter: brightness(120%); } </style> </head> <body> <h

  12. CSS3のRGBAカラー値

    RGBAカラー値は、赤、緑、青、およびアルファ用です。アルファは色の不透明度、つまり0.0から1.0の間の数値です。ここで、1.0は完全に不透明になります。ここでは、RGBAのAlphaパラメータで作成された不透明度の違いを確認できます- 例 ここで、RGBAカラー値の例を見てみましょう- <!DOCTYPE html> <html> <head> <style> #demo1 {background-color:rgba(108,111,35,0.6);} #demo2 {background-color:rgba(108,111,35

  13. CSS3を使用した画像のグレースケールへの変換

    CSS3で画像をグレースケールに変換するには、フィルタープロパティのグレースケール値を使用します。 例 例を見てみましょう- <!DOCTYPE html> <html> <head> <style> img.demo {    filter: brightness(120%);    filter: contrast(120%);    filter: grayscale(130%); } </style> </head> <body> <h

  14. CSS3を使用して画像に色相回転を適用する

    CSS3を使用して画像に色相回転を適用するには、フィルタープロパティに色相回転値を使用します。 例 例を見てみましょう- <!DOCTYPE html> <html> <head> <style> img.demo {    filter: hue-rotate(45deg); } </style> </head> <body> <h1>Learn Spring Framework</h1> <img src="https://www.tutoria

  15. CSS3を使用して画像に不透明度を適用する

    CSS3を使用して画像に不透明度を適用するには、フィルタープロパティの不透明度の値を使用します。 例 例を見てみましょう- <!DOCTYPE html> <html> <head> <style> img.demo {    filter: opacity(60%); } </style> </head> <body> <h1>Learn Spring Framework</h1> <img src="https://www.tutorialspo

  16. CSSのmatrix（）関数

    CSSのmatrix（）関数は、同種の2D変換行列を定義するために使用されます。線形変換をパラメータとして設定します。 例 例を見てみましょう- <!DOCTYPE html> <html> <head> <style> .demo {    transform: matrix(2, 1, -1, 1, 190, 100); } .skew_img {    transform-origin: top right;    transform: skew(-0.10turn, 30deg

  17. CSSの権利プロパティ

    rightプロパティは、要素の水平位置を設定するために使用されます。 −として設定されます right: auto|length|initial|inherit; 例 CSSで適切なプロパティを実装する例を見てみましょう- <!DOCTYPE html> <html> <head> <style> div {    text-align: justify;    text-justify: inter-word;    color: white;    backgr

  18. CSS linear-gradient（）関数

    linear-gradient（）は、線形グラデーションを背景画像として定義するために使用されます- background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 上で、開始点と方向を設定します。その色は、スムーズな遷移をレンダリングするために停止します。 例 ここで、linear-gradient（）-を実装する例を見てみましょう。 <!DOCTYPE html> <html> <head> <style> div {    te

  19. CSS3 RGBA、HSL、HSLAカラー値

    CSS3 RGBAカラー値は、赤、緑、青、およびアルファ用です。アルファは色の不透明度、つまり0.0から1.0の間の数値です。ここで、1.0は完全に不透明になります。ここでは、RGBAのAlphaパラメータで作成された不透明度の違いを確認できます- 例 ここで、RGBAカラー値の例を見てみましょう- <!DOCTYPE html> <html> <head> <style> #demo1 {background-color:rgba(108,111,35,0.6);} #demo2 {background-color:rgba(108,1

  20. CSSフォントバリアントプロパティ

    CSSのfont-variantプロパティは、font-variant-caps、font-variant-numeric、font-variant-alternates、font-variant-ligatures、およびfont-variant-east-asianのプロパティの省略形です。次の値があります- font-variant: normal|small-caps|initial|inherit; 例 font-variantプロパティを実装する例を見てみましょう- <!DOCTYPE html> <html> <head> <style

Total 1566 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:26/79  20-コンピューター/Page Goto:1 20 21 22 23 24 25 26 27 28 29 30 31 32