【ベース】CSSベースセレクタと属性

6574 ワード

選択
〹IDセレクタ
理論的には、同一のID名は重複して出現することができますが、JavaScriptのために、IDによっては一つの要素しか入手できません.同じid名は同じhtmlドキュメントに一回しか現れません.一つのhtml元素は一つのid名しか持っていません.
.クラスセレクタ
クラス選択器、クラス選択器は、クラス名の同じ要素または要素のセットを選択できます.一つの要素は複数のクラス名があります.同じ要素は、tが同時にidとクラスを持つことができます.
ヽoo.classグループセレクタ
コンマで区切って、複数の時計のラベルを選択します.
ヽoo.class后代セレクタ
次の世代が指定できるオブジェクトを選択します.要素の下の要素であれば、いくつかのレベルに関係なく、選択できます.
ヽ.classセレクタ
サブセレクタは自分のサブクラス、第二レベルの要素しか選択できません.第二レベル以下の要素は選択できません.
ヽoo.ツ........................................................
隣接選択器は、基準要素の後に続く兄弟要素を選択します.兄弟要素とは、同じ親要素を持つ2つ以上の要素を指します.
.クラス[type=text]属性選択
属性値からHTMLオブジェクトを取得します.
セレクタを追加

:first-off-type、:last-off-type、:only-off-type、:only-child

:first-child、last-child、

:nth-child(odd)奇数行:nth-child(even)偶数行:nth-child(2);

重み値
!impotantの属性重み付け>行内スタイル重み付け>idセレクタ重み付け>クラスセレクタ(クラスセレクタ)重み付け>ラベル名セレクタ重み付け>ワイルドカードセレクタ重み付け>ブラウザのデフォルトスタイル
a:link疑似類
:リンクはhrefが存在するタブのスタイルを選択します.
:hoverマウスが止まった時にスタイルを追加します.
:visitedアクセス後のスタイル
:activeマウスポイントでのスタイル
:フォーカス要素を選択したときのスタイル
:before:beforeの一つのコロンはCSS 2、2つのコロンはCSS 3で、大きな違いがなく、互換性があるコロンがいいです.HTML 5はCSS 3を使うことを提案します.
:afterは元素の内容の前後に指定内容を加えます.
浮動小数点

.clearfix::afrer{
    content:"";
    display:block;
    width:0;
    height:0;
    clear: both;
    visibility: hidden;
}

レイアウトによく使う
水平中央に配置

        :
text-align:center;
    :
margin: 0 auto;
  :float         ;
    :
position:absolute +left:50%;
transform:translateX(-50%);
  
display:flex;
justify-content: center

縦中央に配置

        :
  line-height   height
    :
position：absolute +top:50%;
transform:translateY(-50%)
 
display:flex;
align-items: center

隠しテキストを超えます

overflow:hidden;
text-overflow:ellipsis; *****  
/*ellipsis;          */
/*clip;      .*/
white-space: nowrap;/*       */

箱の模型
標準ケースモデル
標準モードでは、一つのブロックの総幅＝width＋margin(左右)＋padding(左右)＋border(左右)
怪奇箱の模型
一つのブロックの総幅=width+margin(左右)(widthはすでにpaddingとborder値を含んでいます)
弾性箱モデル

.box{
    display:flex;
    display:-webkit-flex;
    flex-direction: row;
     /*           flex-direction    row  →,row-reverse  ←,column  ↓,column-reverse  ↑*/
    flex-wrap:column;
    /*flex-wrap            ;  nowrap/warp  /wrap-reverse    */
    justify-content: center;
    /*justify-content.             ,  flex-start   /flex-end   /center  /space-between               /space-around       ,     ,     */
    align-items: center;
    /*         (  ,Y )     ,  shretch  /center  /flex-start    /flex-end    /baseline     */
    flex-grow:0;
    /*         ,   0*/
    flex-shrink:1;/*lex-shrink     1，           ，         1                    。*/
    flex-basis:50px;
    /*          ,        */
    order: 2;
    /*      ,      */
}

.box{
    flex: 0 1 auto; /*==flex-grow: 0;flex-shrink: 1;flex-basis: auto;*/
}

positionとdisplay
positionの値:staticrelative absoute fixed|sticky𞓜inherit|initial unset;
sticky(粘性位置決めは相対的な位置決めと固定的な位置決めの混合です.元素は特定の閾値を超える前に相対的に位置決めされ、その後は固定的に位置決めされます.)

stickyの応用

displayの値:
none
この要素は表示されません.
block
この要素はブロックレベルの要素として表示されます.この要素は前後に改行があります.
オンライン
デフォルト.この要素はインライン要素として表示されます.要素の前後に改行がありません.
inline-block
行の内側のブロック要素.(CSS 2.1追加の値)
list-tem
この要素はリストとして表示されます.
ルンイン
この要素は、コンテキストに応じてブロックレベルの要素またはインライン要素として表示されます.
compect
CSSには値compectがありますが、幅広いサポートがないため、すでにCSS 2.1から削除されました.
マーカー
CSSには値マーカーがありますが、幅広いサポートがないため、CSS 2.1から削除されました.
テーブル
この要素はブロックレベルの表として表示されます.
)表の前後に改行があります.
inline-table
この要素はインライン表として表示されます.
)表の前後に改行がありません.
を選択します
を選択します
を選択します
を選択します
を選択します
)
テーブル-row-group
この要素は1つ以上の行のグループとして表示されます.
テーブル-header-group
この要素は1つ以上の行のグループとして表示されます.
テーブル-footer-group
この要素は1つ以上の行のグループとして表示されます.
テーブル-row
この要素は表の行として表示されます.
テーブル-column-group
この要素は1つまたは複数の列のグループとして表示されます.
テーブル-column
この要素はセルの列として表示されます.
テーブル・セル
この要素は表のセルとして表示されます.
和
)
テーブル-caption
この要素は表のタイトルとして表示されます.
)
inheit
親要素からdisplay属性を継承すべき値を規定します.
2 D、3 D変換

#box{
	width:100px;
	height:100px;
	background:#cccccc;
	transform:rotate(45deg);
	/*   rotate3d(x,y,z,angle) rotateX(45deg) rotateY(45deg) rotateZ(45deg)*/
	transform: scale(0.5);
	/*   scale(w,h) scale3d(x,y,z)  scale(n) scaleX(w) scaleY(h)*/
	transform: translate(10px,10px);
	/*     ，        translate(x,y) translate3d(x,y,z) translateX(length) translateY(length) translateZ(z)*/
	transform: skew(45deg);
	/*    skew(45deg,45deg) skewX(45deg) skewY(45deg) scaleZ(45deg) */
	transform-origin:50% 50%;
	/*      transform-origin:x y; 
		1.(left,right,center,top,bottom)
		2.50% 50%;
		3.length length;
		( ：         )
	*/
}

アニメーション

#box{
    animation-name: myAnimation;
    animation-duration: 3s;
    /*         */
    animation-timing-function: easy-out;
    /*    */
    animation-delay: 0.5s;
    /*    */
    animation-iteration-count: infinite;
    /*      ， n/infinite     */
    animation-direction: normal;
    /*         normal/alternation */
    animation-paly-state: running;
    /*       paused/running*/
    animation-fill-mode: none;
    /*          none/forward/backward/both(forward+backward)*/
}
@keyframes myAnimate{
    0%{}
    50%{}
    100%{}
}

JS関数式プログラミング