まだ知らない CSS に関する知識ポイント_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

まだ知らない CSS に関する知識ポイント_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:35 AM

1, 特殊セレクター

1, * 任意のタグと一致するために使用されます

2, > 親子ノード関係を指定するために使用されます

3, E + F 隣接要素の選択コンテナー、すべての兄弟要素と一致します F

4、E ~ F すべての兄弟要素 F

5、name [式]

5.1 E [att] は att 属性を持つすべての E 要素と一致します ([att ] att を定義するすべてのタグを取得します。 E[att=val] は、「val」に等しい att 属性を持つすべての E 要素と一致します。 [att= val] att 属性と属性値を定義するすべてのタグを取得します。は val に等しいです。

5.3 [att^=val] att 属性が定義され、属性値が val で始まるすべてのタグを取得します。 att 属性が定義されており、属性値は val で終わります。

5.5 [att*=val] att 属性が定義され、属性値に val 文字が含まれるすべてのタグを取得します。 ~=val] att 属性が定義され、属性値に val という単語が含まれるすべてのタグを取得します。

5.7 [att|=val] att 属性が定義され、属性値が等しいすべてのタグを取得します。 val または val- で始まります)

6. 疑似クラス/疑似要素

6.1 css 疑似クラスは、特定のセレクターに特殊効果を追加するために使用されます。 CSS 擬似要素は、特定のセレクターに特殊効果を追加するために使用されます。

2 つの点を明確にできます。1 つ目は、両方ともセレクターに関連しているということ、2 つ目は、いくつかの「特別な」効果を追加するということです。ここでの特別な点は、この 2 つの CSS が他の CSS では記述できないものを記述していることです。擬似クラス型と擬似要素型の違い

ここでは比較のために擬似クラス:first-childと擬似要素:first-letterを使用します。

p>i:first-child {color: red}<p><i>first</i><i>second</i></p> //伪类 :first-child 添加样式到第一个子元素

疑似クラスを使用しないが、上記の効果を実現したい場合は、次のようにすることができます:

.first-child {color: red}<p><i class="first-child">first</i><i>second</i></p>

つまり、最初の子要素にクラスを追加し、スタイルを定義します。このクラスの。それでは、要素を見てみましょう:

:p:first-letter {color: red}<p>i am stephen lee.</p> //伪元素 :first-letter 添加样式到第一个字母

それでは、疑似要素を使用しない場合、上記の効果を達成するにはどうすればよいでしょうか?

.first-letter {color: red}<br /><p><span class='first-letter'>i</span> am stephen lee.</p>

つまり、最初の文字にスパンを追加し、そのスパンにスタイルを追加します。

両者の違いが出てきました。つまり、

疑似クラスの効果は実際のクラスを追加することで実現できますが、疑似要素の効果は実際の要素を追加することで実現する必要があるため、そのうちの 1 つは疑似クラスと呼ばれます。もう 1 つは、疑似要素の理由と呼ばれます。

まとめ:

擬似要素と擬似クラスが混同されやすいのは、効果が似ていて書き方が似ているからですが、実は両者を区別するためにCSS3では擬似と明確に規定しています。クラスはコロンで表され、擬似クラス要素は 2 つのコロンで表されます。

:pseudo-classes::pseudo-elements ただし、互換性の問題により、それらのほとんどは依然として単一のコロンで統一されています。ただし、互換性の問題に関係なく、記述するときは良い習慣を身につけて区別するように最善を尽くす必要があります。二人で。

簡単に言うと、疑似要素の重みは疑似クラスの重みよりも高くなります。たとえば、コンテナが要素と疑似クラスの両方に同じ属性を定義しているが、値が異なる場合、擬似要素が使用されます。規範的な観点から見ると、疑似要素はページ上で 1 回のみ使用されますが、疑似クラスは複数回使用できます。疑似要素は新しいオブジェクトを生成します。これは dom 内で見ることはできませんが、操作することができます。疑似クラスは dom 内の要素のさまざまな状態です。 ,a: link,a:active,a:visited,:focus,:blur /*動的擬似クラス*/

6.1.2 :disabled,:enabled,:checked,:read-only,:read- write /*UI Status pseudo-class*/

6.1.2.1

: ステータスの読み取り専用

6.1.2.2

: 読み取り/書き込み非読み取り専用ステータス

6.1.3 css3 pseudo -class

6.1.3.1 :nth-child(n) 親要素の n 番目の要素 (例: p:nth-child(2){color:red;} p 要素が親要素、フォントの色は赤)

6.1.3.2 nth-last-child(n) 親要素の下からn番目の要素

6.1.3.3 :nth-of-type(n ) (例: p:nth-of-type (2){color:red;} p 要素がその親要素の 2 番目の p 要素である場合、フォントの色は赤になります)

6.1.3.4 : first-child 親要素の最初の要素

6.1 .3.5 :last-child 親要素の最後の要素

6.1.3.6 nth-last-of-type(n) (例: p :nth-last-of-type(2){color:red ;} p 要素が親要素の最後の 2 つの p 要素である場合、フォントの色は赤になります)

6.1.3.7 :first-of -type 親要素の最初の p 要素

6.1.3.8 :last-of-type 其父元素的最后一个p元素

6.1.4 :not() /*否定伪类选择器*/ (如：p:not(.a){color:red;})

6.2 常用的伪元素

6.2.1 :before,::after

<style type="text/css">p::before{content:"台词：";}</style></head><body><p>我是唐老鸭。</p><p>我住在 Duckburg。</p><p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p></body>

6.2.2 ::first-letter

<style type="text/css">p::first-letter{color:red;}</style></head><body><p>我是唐老鸭。</p><p>我住在 Duckburg。</p><p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p></body>

6.2.3 ::first-line

<style type="text/css">p::first-line{color:red;}</style></head><body><p>我是唐老鸭。</p><p>我住在 Duckburg。</p><p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p></body>

6.2.4 ::selection

<style type="text/css">::selection{color:red;background-color:#00F;}</style></head><body><p>我是唐老鸭。</p><p>我住在 Duckburg。</p><p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p></body>

二、CSS权重

1、权重列表

<style>/*A>B>C>D>0*/.main-content{color:#666;}/*0*/h3{color:#f00;}/*D*/.h3{color:#0f0;}/*C*/.main-content h3{color:#00f;}/*CD*/.main-content .h3{color:#0ff;}/*CC*/#h3{color:#ff0;}/*B*/</style></head><body><div class="main-content">   <h3 id="你好">你好</h3></div></body>

三、CSS3新增属性

1、定义文本样式

1.1 文字阴影text-shadow

<style>p{ font-size:60px; font-weight:900; color:#999; text-shadow:5px 5px 5px #333,/*水平位移、垂直位移、模糊半径、颜色*/ -15px 15px 5px #333, -15px -15px 5px #333;}</style></head><body><p>HTML5+CSS3</p></body>

1.2 文字缩进text-indent

1.3 文本换行

<style>p{ width:100px; border:solid 1px red; word-wrap:break-word;/*断单词*/ word-break:break-all;/*断字符*/ white-space:nowrap;/*强制在一行内显示所有文本*/}</style></head><body> <p>中英混对萨排的时候English English English English English</p></body>

1.4 文本溢出

<style type="text/css">div{ width:200px; white-space:nowrap; border:solid 1px red; text-overflow:clip;/*不显示省略标记，而是简单的裁切掉*/ text-overflow:ellipsis;/*当对象内文本溢出时显示省略标记*/ overflow:hidden;}</style></head><body><div>的撒打算打算打算大神大神大神大神大神</div></body>

1.5 圆角 border-radius

1.6 阴影 box-shadow

1.7 背景图片铺满 background-size:cover

1.8 transform

<style type="text/css">#d1{ width:100px; height:100px; background-color:#00F;}#d1:hover{ transform:rotate(40deg) scale(1.2);/*顺时针旋转40度，放大1.2倍*/ transform:translate(40px,40px);/*水平偏移40px,垂直偏移40px*/ transform:skew(30deg,-10deg);/*水平倾斜30度，垂直倾斜10度*/}</style></head><body><div id="d1"></div></body>

1.9 平滑过渡 transition

<style type="text/css">#d1{ width:100px; height:100px; background-color:#00F;}#d1:hover{ background-color:#F00; transition:background-color 1s ease-in;/*过渡的属性，如果是所有的则是all，经历的时间，过渡效果*/}</style></head><body><div id="d1"></div></body>

2.0 更复杂的动画 animation

<style type="text/css">#d1{ magin:0px auto; width:959px; height:613px; background-image:url("11.jpg"); animation:x-spin 20s infinite linear;/*动画名称，经历时间，播放次数(为infinite则一直播放)，播放方式*/}@-webkit-keyframes x-spin{ 0%{ transform:rotateX(0deg);/*沿x轴开始旋转*/    } 50%{ transform:rotateX(180deg);/*沿x轴旋转180*/    } 10%{ transform:rotateX(360deg);/*沿x轴旋转360*/    }}</style></head><body><div id="d1"></div></body>

<style type="text/css">#d1{width:100px;height:100px;background:red;position:relative;animation:mymove 5s infinite;}@keyframes mymove{from {left:0px;}to {left:200px;}}</style></head><body><div id="d1"></div></body>

2.1 渐变

<style type="text/css">#d1{ height:200px; width:400px; border:solid 1px red;    /*线性渐变，开始位置，结束位置，开始的颜色，结束的颜色，色标（色标位置，色标颜色，可以有多个色标，色标即是颜色过渡点）*/ //background:-webkit-gradient(linear,left top,left bottom,from(blue),to(red),color-stop(0.4,#fff),color-stop(0.6,#fff));    /*径向渐变，内圆圆心位置，内圆半径，外圆圆心半径，外圆半径，开始颜色，结束颜色，色标*/ background:-webkit-gradient(radial, center center, 0, center center, 460, from(blue), to(red),color-stop(0.6,#fff));}</style></head><body><div id="d1"></div></body>

2.2 响应式布局

<style type="text/css">/*屏幕宽度大于900的时候*/*{    padding:0px;    margin:0px;    font-family:"微软雅黑";}#header{    height:100px;    border:solid 1px red;    margin:0px auto;}#main{    margin:10px auto;    height:400px;}#footer{    margin:0px auto;    height:100px;    border:solid 1px red;}@media screen and (min-width:900px){    #header,#footer    {        width:800px;    }    #main    {        width:800px;        height:400px;;    }    #main-left    {        width:200px;        height:400px;        border:solid 1px red;        float:left;    }    #main-center    {        width:394px;        height:400px;        border:solid 1px red;        float:left;    }    #main-right    {        width:200px;        height:400px;        border:solid 1px red;        float:left;    }}@media screen and (min-width:600px) and (max-width:900px){    #header,#footer    {        width:600px;    }    #main    {        width:600px;        height:400px;;    }    #main-left    {        width:200px;        height:400px;        border:solid 1px red;        float:left;    }    #main-center    {        width:396px;        height:400px;        border:solid 1px red;        float:left;    }    #main-right    {        display:none;    }}@media screen and (max-width:600px){    #header,#footer    {        width:300px;    }    #main    {        width:300px;        height:400px;;    }    #main-left    {        display:none;    }    #main-center    {        width:300px;        height:400px;        border:solid 1px red;    }    #main-right    {        display:none;    }}</style></head><body><div id="header">头部</div><div id="main">  <div id="main-left">主题-左边</div>  <div id="main-center">主题-中间</div>  <div id="main-right">主题-右边</div></div><div id="footer"></div></body>

声明

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

HTMLのブール属性とは何ですか？いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

DVWA

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