ホームページ >ウェブフロントエンド >htmlチュートリアル >まだ知らない CSS に関する知識ポイント_html/css_WEB-ITnose
まだ知らない CSS に関する知識ポイント_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:35:44976ブラウズ
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 class="h3" id="h3">你好</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>