css-強力な効果_html/css_WEB-ITnose

 1 <div id="d1">你好 2    <span>aaaaaaaaa</span> 3     <div> 4     <span id="s1">bbbbbbbb</span> 5     <div>ttttttttttttt</div> 6     <div>zzzzzzzzzzz</div> 7     <span>ccccccc</span> 8     <div title="f">eeeeeeeeee</div> 9     <span>ddddddd</span>10     <div>ffffffffffffff</div>11     </div>12     <div title="fc">gggggggggg</div>13 </div>

1.--- (上記はHTMLコードです)

1 #d1>span//d1下面的子标签span2 {3     color:#f00;4 }5 6 #d1 span//d1下面的所有标签span7 {8     color:#f00;9 }

2---- '+'と'~'

'+' : 以下のタグも同様ですcss を設定するには隣り合っていなければなりません

'~': 同じレベルの css セットを持つ後続のタグすべて

もしクラスに対応する効果を実現させたい場合は、

#s1~div //与s1同级别的所有的div{    color:#F00;}

4--------疑似クラスと疑似要素

疑似クラス: div は、clss によって設定された CSS 効果を使用します。 -- -クラスは疑似クラス効果で置き換えることもできます-----これが疑似クラスと呼ばれる理由です

疑似要素: div 内の要素の CSS 効果---------- --疑似要素で置き換え可能- ----------これが疑似要素と呼ばれる理由です

4.1----- :last-child および :first-letter

/*#s1+div//后面紧挨着的div----也许是紧挨着的----同时表明只能设置一个div的css{    color:#F00;}*/

対応する効果を取得するには、最初にクラスを設定します。次に CSS で

div[title]//所有的设置了title属性的div{    color:#F00;}

を設定します。フォーカスを取得するときにスタイルを設定できます

<div title="f">eeeeeeeeee</div>//现在它里面添加一个class<div title="f" class="hh">eeeeeeeeee</div>//然后早css里设置.hh{     相应的样式   }

拡張----------ぼかしフィルター: -webkit-filter: Blur(5px)

5-------------ステータス擬似クラス

:disabled ,:enabled,:checked,:read-only,:read-write /*UI ステータス擬似- class*/

Disabled Activated Selected Read-only Non-read-only

html:

html：<p><i>first</i><i>second</i></p> <p>i am stephen lee.</p>css:p>i:last-child {color: red;}//p标签下的i第一个孩子---第一个 i 的样式设置p:first-letter {color: red;}//p标签下的第一个字母的样式设置

html:<p><i class="one">first</i><i>second</i></p> <p><span class="two">i</span> am stephen lee.</p>css:.one{    color: red;}p span{    color: red;}或者.two{        color:red;}

6 ---------------上記はcss2の擬似クラス、以下は

css3の擬似クラスです

----------------------------- --- ---

#txt:focus//鼠标放到id==txt对应的div上时的样式{    color:#F00;}

<input type="text" disabled="disabled" />//被禁用的text<input type="text" readonly="readonly"  value="www"/> //只能读取不能更改的text

type は型を表します

css:input:disabled//所有被禁用的input标签{}:read-only//给所有只读的标签设置标签{    color:#F00;}

html:<div>  <p>aaaaaaaaaaaaa</p>  <p>bbbbbbbbbbbbb</p>  <div>      <span>ccccccccccccc</span>      <p>ddddddddddddd</p>      <p>eeeeeeeeeeeee</p>  </div>  <p>fffffffffffffff</p>  <p>ggggggggg</p></div>

css:p:nth-child(2)//如果p元素是其父元素的第二个元素，那么久设置它的css样式{    color:red;}

:not() /*否定的な疑似クラスセレクター*/ (例: p:not(.a){color:red;})

7--------疑似要素

html:

p:nth-of-type(2)//如果p标签是其父元素的第二个p标签，那么就设置它的css样式{    color:red;}

css:

p:nth-last-child(1) //如果p标签是它的父标签的倒数第二个标签，那么就设置它的css样式{    color:red;}

8-----------css 重み

(インライン)A > (クラス) C > (タブ) ）d＆gt;継承0 ---フォントの色は設定されています。 ----- ---------------テキストのインデント

:first-child 其父元素的第一个元素:last-child 其父元素的最后一个元素p:nth-last-of-type(2){color:red;}// p元素是其父元素的倒数2个p元素的话字体颜色就是红色p :first-of-type 其父元素的第一个p元素p:last-of-type 其父元素的最后一个p元素

11-------------

1 <p>我是唐老鸭。我是唐老鸭。我是唐老鸭。我是唐老鸭。我是唐老鸭。我是唐老鸭。我是唐老鸭。我是唐老鸭。我是唐老鸭。我是唐老鸭。我是唐老鸭。我是唐老鸭。我是唐老鸭。我是唐老鸭。我是唐老鸭。我是唐老鸭。我是唐老鸭。我是唐老鸭。我是唐老鸭。我是唐老鸭。</p>//文字会超出一行2 <p>我住在 Duckburg。</p>3 <p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p>

元の状態

p::before//在p标签的前面加上一段文字{content:"台词：";}p::after//在p标签的后面加上一段文字{content:"台词：";}p::first-letter//p标签的第一个元素{color:red;}p::first-line//将p标签的第一行设置颜色-----------如果文字不是一行的话{color:red;}::selection//设置 选择网页的文字后  的背景颜色和文字颜色{color:red;background-color:#0f0;}*/

1 <div class="main-content">2    <h3 id="你好">你好</h3>3 </div><br />

.main-content #d1----------------BC------------先看后面再看前面

.main-content h3-------------是从后面到前面-------即先DC, 但是要按照书顺序来，则是CD

文字が一行埋まったら次の行へ

12-------------- border-radius 角丸折り

border -radius:20px 5px 10px 40px;//時計回りの角丸折り度

border-radius:20px 5px;//最初は対角線上の角丸折り度、後は //角丸折り度

border- radius:50%;//円形

.main-content { -------------------字体继承了它的颜色---所以是0    color:#F00;//红色}h3 ----------------D{    color:#00F;//}.c1----------------C{    color:#0F0;}.main-content h3----------------CD{    color:#FF0;}.main-content .c1--------------CC{    color:#939;}#d1---------------------B{    color:#0FF;}.main-content #d1----------------BC{    color:#690;}

#690显示的颜色<br /><br /><br />9-----------------------text-shadow文字阴影<br /><br />

14-----------------------背景画像背景サイズで埋められています:cover

15--------------------------transform

可以设置多个 text-shadow:5px 5px 5px #333,/*水平位移、垂直位移、模糊半径、颜色     -15px 15px 5px #333,    -15px -15px 5px #333;

html:<p>我是唐老鸭。我是唐老鸭。我是唐老鸭。我是唐老鸭。我是唐老鸭。我是唐老鸭。我是唐老鸭</p>css:p{    text-indent:20px;}//文字向右缩进了20px

16--- ----- アニメーション

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