検索
ホームページウェブフロントエンドhtmlチュートリアル:before と :after_html/css_WEB-ITnose の CSS の賢い使い方

数日前の夜、私はいくつかの CSS ドキュメントと情報を包括的に調べました。ほとんどのスタイルは大きな問題ではありませんが、少し馴染みのないものですが、その存在と実装についても知っています。今日はこの学習ノートにはあまり書きたくありませんが、主に :before と :after に関する内容と、いくつかの小さなスタイルについて簡単に紹介したいと思います。
:before と :after とは何ですか? それらをどのように使用するか?
: before は、要素の前に特定のコンテンツを挿入するために使用できる CSS の疑似要素です。
:after は、要素の後に特定のコンテンツを挿入するために使用できる CSS の疑似要素です。
簡単なコードを実行して効果をテストしてみましょう:

  <style>    p:before{        content: "H"  /*:before和:after必带技能,重要性为满5颗星*/    }    p:after{        content: "d"  /*:before和:after必带技能,重要性为满5颗星*/    }  </style>  <p>ello Worl</p>

上記のコードはページに「Hello World」を表示します。ブラウザの「検査要素」を通して見るコンテンツは次のとおりです:

<p>  ::before  "ello Worl"  ::after</p>

p A :before 疑似要素は p タグ内のコンテンツの前に挿入され、この疑似要素に含まれるコンテンツは "H "; そして、A :after では、p タグの内容の後に疑似要素が挿入され、この要素に含まれる内容は "d" になります。資格のあるプログラム猿として、「Hello World」の完全な存在を守る必要があります。
主に:beforeと:afterに関するメモなので、上記の簡単な導入だけでは絶対に不十分です。通常の使用方法を見てみましょう。
1. 枠線と組み合わせたダイアログボックスのスタイルを記述します。
この野獣は、上記の文を 2 つの部分に分割します。ボーダーと組み合わせて、ダイアログ ボックス スタイルを作成します。
これは border と組み合わせられているため、最初に小さなトピックに移り、border を使用して三角形スタイルを描画する方法を簡単に紹介します (この三角形はダイアログ ボックス スタイルを記述するときに必要です):

  <style>    .triangle{        width: 0;        height: 0;        border-left:50px solid red;        border-bottom:50px solid blue;        border-top:50px solid black;        border-right:50px solid purple    }  </style>  <div class="triangle"></div>

上記のコードは次のようになります。ページ上に四角形が表示され、左側に赤い三角形、右側に紫色の三角形、上部に黒い三角形、下部に青い三角形が表示されます。それでは、私たちが求めているのは三角形ではないのかと疑問に思う人もいるかもしれません。野獣、私をからかうために四角形を描いてみませんか?
上記のスタイルにいくつかの変更を加えます:

  .triangle{      width: 0;      height: 0;      border:50px transparent solid; /*这里我们将元素的边框宽度设置为50px,transparent表示边框颜色是透明的,solid表示边框是实线的*/      border-top-color: black;  /*这里我们仅将上边框的颜色设置为黑色,众所周知,css后面的样式代码会覆盖之前的相同的样式代码,至于其他三边的还是透明色*/      /*border-bottom-color: black; /*这里设置底部边框色为黑色*/      border-left-color: black;  /*这里设置左边边框色为黑色*/      border-right-color:black*/ /*这里设置右边边框色为黑色*/  }

すると、上部に下向きの三角形が表示されます。 css形式のコメントに説明が詳しく書かれています。
次に追加します: 前:

  <style>    .test-div{        position: relative;  /*日常相对定位*/        width:150px;        height:36px;        border-radius:5px;        border:black 1px solid;        background: rgba(245,245,245,1)    }    .test-div:before{        content: "";  /*:before和:after必带技能,重要性为满5颗星*/        display: block;        position: absolute;  /*日常绝对定位*/        top:8px;        width: 0;        height: 0;        border:6px transparent solid;        left:-12px;        border-right-color: rgba(245,245,245,1);    }  </style>  <div class="test-div"></div>

上記のコードを通じて、WeChat/QQ に似たダイアログ ボックス スタイルが表示されますが、問題はダイアログ ボックスの周囲の境界線が完全ではないことです。ダイアログ ボックスの突き出た三角形に境界線がありません。一瞬沈黙が発生します。どうすればよいですか? Summon:after に綿のコートを着て助けに来てもらいましょう~
完全なコード:

  <style>    .test-div{        position: relative;  /*日常相对定位*/        width:150px;        height: 36px;        border:black 1px solid;        border-radius:5px;        background: rgba(245,245,245,1)    }    .test-div:before,.test-div:after{        content: "";  /*:before和:after必带技能,重要性为满5颗星*/        display: block;        position: absolute;  /*日常绝对定位*/        top:8px;        width: 0;        height: 0;        border:6px transparent solid;    }    .test-div:before{        left:-11px;        border-right-color: rgba(245,245,245,1);        z-index:1    }    .test-div:after{        left:-12px;        border-right-color: rgba(0,0,0,1);        z-index: 0    }  </style>  <div class="test-div"></div>

さて、完全なダイアログ ボックス スタイルが目の前に表示されます。ダイアログ ボックス内の小さな三角形の方向については、私は次のようにします。前の段落を読んだことを信じてください。ボーダーによって導入されたコードを実行する方法は皆さん知っています。はい、ボーダーの表示色の位置と方向を変更するだけです~(写真を投稿するのは好きではないので、申し訳ありませんが、必要に応じて、コードを直接コピーして、その効果を確認してください。ホイールを作成するだけでなく、より深い印象を与えることができます。コンテンツの半透明の背景レイヤー。
たとえば、私たちの要件は半透明のログイン ボックスを作成することです (これについてはコード内のコメントでも説明します):

  <style>      body{          background: url(img/1.jpg) no-repeat left top /*这里本兽加了个图片背景,用以区分背景的半透明及内容的完全不透明*/      }      .test-div{          position: relative;  /*日常相对定位(重要,下面内容也会介绍)*/          width:300px;          height: 120px;          padding: 20px 10px;          font-weight: bold;      }      .test-div:before{          position: absolute;  /*日常绝对定位(重要,下面内容也会略带介绍)*/          content: "";  /*:before和:after必带技能,重要性为满5颗星*/          top:0;          left: 0;          width: 100%;  /*和内容一样的宽度*/          height: 100%;  /*和内容一样的高度*/          background: rgba(255,255,255,.5); /*给定背景白色,透明度50%*/          z-index:-1 /*日常元素堆叠顺序(重要,下面内容也会略带介绍)*/      }  </style>  <!--这里容兽偷个懒,布局简单写写-->  <div class="test-div">      <table>          <tr>              <td>Name</td>              <td><input placeholder="your name" /></td>          </tr>           <tr>              <td>Password</td>              <td><input placeholder="your password" /></td>          </tr>           <tr>              <td></td>              <td><input type="button" value="login" /></td>          </tr>      </table>  </div>

上記のコードをコピーし、画像を追加して効果をテストします。

もちろん、:bofore と :after には他にもより賢い使い方がありますが、ここではすべてをリストしません。ここでは、これら 2 つの疑似要素と CSS3 アニメーションを使用して、美しく実用的な動的効果を実現する方法を紹介します。 :HoverEffectIdeas

:before と :after について話した後、他の CSS スタイルとレイアウトの注意点について少し話しましょう (おそらく人々はそれらにあまり注意を払っていないため、レイアウトとスタイルの問題が発生します)。

位置の配置の問題
position 属性は要素の配置タイプを指定し、デフォルトは静的です。
この属性には次の値も指定できます:
absolute: 静的配置以外の最初の親要素を基準にして相対的に配置される絶対配置要素を生成します。 修正: ブラウザ ウィンドウを基準にして絶対配置された要素を生成します。
relative: 通常の位置を基準にして相対的に配置された要素を生成します。
inherit:position 属性の値を親要素から継承することを指定します。
コード:

<!--position:absolute-->  <style>      body{          height: 2000px  /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/      }      .test-div{          position:absolute;          left:50px;          top:50px      }  </style>  <div class="test-div">Hello World</div><!--position:fixed-->  <style>      body{          height: 2000px  /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/      }      .test-div{          position:fixed;          left:50px;          top:50px      }  </style>  <div class="test-div">Hello World</div><!--position:relative + position:absolute-->  <style>      .out-div{          width: 300px;          height: 300px;          background: purple;  /*这里定义个背景,让我们知道这个div在哪*/          margin:50px 0px 0px 50px;          position: relative      }      .in-div{          position:absolute;          left:50px;          top:50px      }  </style>  <div class="out-div">      <div class="in-div">Hello World</div>  </div>

z-index 要素のスタックソート

z-index は、オブジェクトのスタック順序を設定または取得するために使用され、対応するスクリプト機能は zIndex です。 z-index の値が大きいほど、要素のスタッキング レベルが高くなります。
コード:

rree

这里我们将第一个div和第二个div位置放到一起,方便看z-index的效果。以上代码的样式是紫色的正方形里面有个白色的小正方形。因为小正方形的z-index大于大正方形的z-index,所以能显示出,当我们把.first-div的z-index设置为3,这时候就看不到白色的小正方形了,它被紫色的大正方形无情的挡掉了...
zoom 元素缩放比例
zoom适用于所有元素,用于设置或检索对象的缩放比例,对应的脚本特性为zoom,原比例的值是1。
代码:

  <style>      .first-div{          width: 100px;          height: 100px;          background: purple;          zoom:1.5;          float: left      }      .second-div{          width: 100px;          height: 100px;          background: black;          zoom:1;          float:left      }      .third-div{          width: 100px;          height: 100px;          background: red;          zoom:.5;          float:left      }  </style>  <div class="first-div"></div>  <div class="second-div"></div>  <div class="third-div"></div>

以上代码将会展示的依次是紫色-黑色-红色的div,大小分别是100px的1.5倍,1倍,0.5倍。
em 和 rem 是什么
1em等于当前的字体尺寸,数值的改变意味着字体大小的调整。em 有继承这个特性,也就是说,外部父元素定义了字体的em大小,内部子元素会继承这一属性的样式。
rem = root em 。顾名思义,root即根部的,顶部的。也就是根部的em,这个根部指的是HTML根元素。所以rem的大小是针对HTML根元素的大小做字体的相对大小的调整。
代码:

  <style>      body{        font-size: 12px;        }      /*html{          font-size: 12px;      }*/      .first-div{          width: 200px;          height: 100px;          font-size: 1em;          float: left      }      .second-div{          width: 200px;          height: 100px;          font-size: 2em;          float:left      }      .third-div{          width: 200px;          height: 100px;          font-size: 1rem;          float:left      }      .fourth-div{          width: 200px;          height: 100px;          font-size: 2rem;          float:left      }  </style>  <div class="first-div">Hello World</div>  <div class="second-div">Hello World</div>  <div class="third-div">Hello World</div>  <div class="fourth-div">Hello World</div>

以上代码分别展示了不同大小的字体,em和rem的区别可以通过仅仅注释body字体样式和html字体样式来看看他们之间的差别。
今天暂时写到这里,明天就元旦了,可以好好休息三天了~ 元旦快乐~

这里做个小广告哦! 推荐一本好友破狼和雪狼大叔写的关于Angular的学习书籍《AngularJS深度剖析与最佳实践》已可预定,是一本技术含量想当不错的书籍哦,有兴趣的小伙伴可以上各大商场预定,也可点击以下预售链接:http://item.jd.com/11845736.html#none

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTML:それはプログラミング言語か何か他のものですか?HTML:それはプログラミング言語か何か他のものですか?Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1)htmlStructuresandformatswebcontentusingtags.2)ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML:Webページの構造の構築HTML:Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ:HTMLの力テキストからウェブサイトへ:HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1)htmlは、などのタグを介してドキュメント構造を整理します。 2)ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3)マルチメディア関数を強化するなど、HTML5の新機能。 4)一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5)最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解:初心者向けガイドHTML、CSS、およびJavaScriptの理解:初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

HTMLの役割:Webコンテンツの構造HTMLの役割:Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード:用語を詳しく見るHTMLとコード:用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript:Web開発者に不可欠なツールHTML、CSS、およびJavaScript:Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割:コアの責任HTML、CSS、およびJavaScriptの役割:コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

See all articles

ホット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ヘンタイを無料で生成します。

ホットツール

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、