CSS 知識体系の入門レベルの理解-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS 知識体系の入門レベルの理解

奋力向前

Jul 09, 2021 pm 01:50 PM

css

CSS システム図を共有します。非常に便利です。保存してください。次の記事では CSS の入門知識を紹介します。

CSS 知識体系の入門レベルの理解

#CSS システム

css 以下について大まかに理解できます。

CSS 知識体系の入門レベルの理解

CSS3##カスケードスタイルシートカスケードカスケードスタイルシート

フォント、色、マージン、高さ、幅、背景画像、Web ページの位置、Web ページのフローティング...

CSS セレクター (強調)

Web ページの美化 (テキスト、シャドウ、ハイパーリンク) 、リスト、グラデーション)

ボックスモデル

フローティング、配置

Webページアニメーション

cssの利点;

1. 分離コンテンツとパフォーマンスのバランス

2. Web ページの構造は統一されており、再利用できます

#3. スタイルは非常に豊富です4. CSS ファイルの使用をお勧めしますhtml5 とは独立して、SEO を使用して検索エンジンに簡単に含めてください!

1. セレクター

1. ページ上の特定の項目を選択します 1 つまたは特定のタイプの要素

基本セレクター

##id セレクター
##レベルセレクター
##子孫セレクター: 要素の後 #
```
body p{
 background: #c56b22;
 }
```
2.サブセレクター

/*子选择器，只选择向下一代*/
body>p{
      background: deepskyblue;
  }

3. 隣接する兄弟セレクター

/*相邻兄弟选择器，只有一个，向下*/
  .active + p{
      background: orange;
  }

#4.ユニバーサルセレクター

/*通用兄弟选择器，当前选中元素的向下的所有元素*/
  .active~p{
      background: aquamarine;
  }

2. 疑似クラスセレクター##

/*ul的第一个子元素*/
ul li:first-child{
    background: #c56b22;
}
/*ul的最后一个子元素*/
ul li:last-child{
    background: aqua;
}

/*选中p1,定位到父元素，选择当前的第一个元素
选择当前p元素的符集元素，选择符父级素的第一个，并且是当前元素才生效
*/
p:nth-child(1){
    background: antiquewhite;
}
/*选中父元素，下的p元素的第二个，按类型*/
p:nth-of-type(2) {
    background: #b04a6f;
        }

#3. Web ページを美しくする

##1. フォントスタイル

<!--
font-family:字体
font-size:字体大小  px代表像素，em代表一个字的缩进大小
font-weight:字体粗细 最大800，相当于bolder
color:字体颜色
-->
<style>
    body{
        font-family: Arial;
    }
    h1{
        font-size: 40px;
    }
    p[class=p1]{
        font-weight: bold;
        color: #b04a6f;
    }
</style>


<style>
    /*字体风格*/
    /*斜体 加粗 大小 字体*/
    p{
        font:oblique bold 20px Arial;
    }
</style>

#2. テキストスタイル

#色color rgb rgba

テキストの配置 text-align=center最初の行のインデント

text-indent:2em

行高line-height:
Decorationtext-decoration:
テキスト画像の水平方向の配置: /middle
/vertical-align: middle;
3. Shadow
<pre class='brush:php;toolbar:false;'><style> #price{ /*阴影颜色，水平偏移，垂直偏移，垂直半径*/ text-shadow: #c5527d 5px -5px 1px; } </style> <body> ¥30 </body></pre>4. ハイパーリンク疑似クラス

<style>
    /*默认的颜色*/
    a{
        text-decoration: none;
        color: #000000;
    }
    /*鼠标悬浮的颜色*/
    a:hover{
        color: #c56b22;
        font-size: 20px;
    }
    /*鼠标按住的颜色*/
    a:active{
        color: #c5527d;
    }
    /*鼠标未点击链接的颜色*/
    /*a:link{*/
    /*    color: gray;*/
    /*}*/
    /*!*链接已访问状态*!*/
    /*a:visited{*/
    /*    color: #66ccff;*/
    /*}*/
</style>

<body>
<a href="#">
    <img src="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy"   alt="图片加载失败">
</a>
<p>
    <a href="#">《从0到1开启商业与未来的秘密》</a>
</p>
<p>
    作者：[美]<a href="#"> 彼得·蒂尔，布莱克·马斯特斯（Blake Masters）</a>著，
    <a href="#">高玉芳</a> 译
</p>
</body>

5、リスト

1) 背景

背景色

背景画像

<style>
    div{
        width: 800px;
        height: 500px;
        border: 1px solid #fcb4dc;
        /*默认全部平铺*/
        background-image: url("image/1.jpg");
    }
    .div1{
        background-repeat: repeat-x;
    }
    .div2{
        background-repeat: repeat-y;
    }
    .div3{
        background-repeat: no-repeat;
    }
</style>

.title{
    font-size: 18px;
    /*font: oblique bold 20px/30px Arial;*/
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /*background: #fcb4dc;*/
    /*颜色、图片、位置、平铺方式*/
    background: #fcb4dc url("../image/d.jpeg") 250px 4px no-repeat;
}

ul li{
    /*行高*/
    height: 30px;
    list-style: none;
    text-indent: 1em;
    /*background: url("../image/r.jpeg") 200px 1px no-repeat;*/
    background-image: url("../image/r.jpeg");
    background-repeat: no-repeat;
    background-position: 200px 1px;
}

background-color: #A9C9FF;
background-image: linear-gradient(60deg, #A9C9FF 0%, #FFBBEC 100%);

3) ボックスモデル

境界線

内側と外側の余白

丸い境界線

# シャドウ
#Floating
4) 親境界線の崩壊の問題

/*
clear:right;    右侧不允许又浮动元素
clear:lerf;     左侧不允许有浮动元素
clear:both;     两侧不允许有浮动元素
clear:none;
*/

解決策:

親要素の高さを増やします

#father{
 border:1px #000 solid;
 height:800px}

空の p タグを追加し、フローティング

<p></p>

.clear{
    clear:both;
    margin:0;
    padding:0;}

overflow

#在父级元素中添加一个 overflow:hodden;

疑似クラス

#father:after{
 content:'';
 display:block;
 clear:both;}

を親クラスに追加します

6. 位置決め

相対位置決め

元の位置、相対位置その場合、標準ドキュメントフロー内に残ります! 元の位置は保持されます

position:relative

top:-20px;
left:20px;
bottom:-10px;
right:20px;

絶対位置

定位:基于xxx定位，.上下左右~
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位,我们通常会相对于父级元素进行偏移~
3、在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移,绝对定位的话，它不在标准文档流中，原来的位置不会被保留

#固定位置

#position:fixed

z-index

/*背景透明度,或者使用rgba，早期版本filter:alpha(opacity=50)*/
opacity:0.5
/*filter:alpha(opacity=50)*/

推奨学習:
CSS ビデオチュートリアル

以上がCSS 知識体系の入門レベルの理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事はLearnKuで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

コンポーネントレベルのCMSApr 12, 2025 am 11:09 AM

コンポーネントがデータが近くに住んでいる環境に住んでいる場合、視覚コンポーネントと

円にタイプを設定します...オフセットパス付きApr 12, 2025 am 11:00 AM

ここでは、Yuanchuanからの合法的なCSSの策略があります。このCSSプロパティオフセットパスがあります。むかしむかし、それはモーションパスと呼ばれ、その後改名されました。私

CSSで「戻る」ことは何をしますか？Apr 12, 2025 am 10:59 AM

Miriam Suzanneは、このテーマに関するMozilla開発者のビデオで説明しています。

現代の恋人Apr 12, 2025 am 10:58 AM

私はこのようなものが大好きです。

マルチサムスライダー：一般的なケースApr 12, 2025 am 10:52 AM

この2部構成のシリーズの最初の部分では、2つの親指スライダーを取得する方法を詳しく説明しました。今、私たちは＆＃039; llが一般的なマルチサンプスのケースを見ていますが、別のものと

CSSのみのカルーセルApr 12, 2025 am 10:48 AM

Carousel/Slideshowを構築する際にHTMLとCSSがあなたをどれだけ遠くに連れて行くかは驚くべきことです。

2020年のWeb：拡張性と相互運用性Apr 12, 2025 am 10:46 AM

過去数年間で、Webテクノロジーに関して多くの変化と転換が見られました。 2020年、私は私たちをWebコミュニティとして予定しています

デスクトップとモバイル用の異なるHTMLを持つWebコンポーネントApr 12, 2025 am 10:43 AM

クリスチャン・シェーファーは、Web広告を扱うことについて大きな大きな記事を持っています。全体が興味深いもので、最初にすべての課題を文書化します

See all articles

ホットAIツール

ホットツール

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

DVWA

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