***
52874 ワード
1.CSS 3セレクタの詳細
1.1属性セレクタ:
説明:[attr*=val]:valにidにあるフィールドが含まれている限り、[attr^=val]:attr属性値を満たしてvalで始まると、[attr$=val]:attr属性値の末尾文字がvalで終わると選択されます
1.2構造的擬似クラスセレクタ
擬似クラスセレクタと擬似要素セレクタが含まれています.
1.3セレクタroot,not,emptyおよびtarget
1.4セレクタ:first-child,last-child,nth-childおよびnth-last-child
特殊な場合は、スタイルの設定を繰り返します.
1.5セレクタ:nth-of-typeとnth-last-of-type
1.6セレクタ:only-child nth-child nth-last-childの代わりにonly-childを使用できます.
1.7 UI要素状態疑似クラス選択器概念:指定されたスタイルは要素がある状態にある場合のみ機能し、デフォルト状態では機能しない:css 3種類全部で17種類のUI要素状態疑似クラス選択器:E:hover,E:active,E:focus,E:disable,E:read-only,E:checked,E:default,E:indeterminate…などの例:
1.8 disabledとenabled
1.9汎用兄弟要素セレクタ
2.CSS 3文字とフォントスタイル
2.1テキストに影を付ける:
2.2サーバ側フォントの使用
font-size-adjustでフォントの種類を変更してフォントの大きさを維持font-size-adjustプロパティを利用してフォントの大きさを微調整し、最終的には所望の効果を得ることができます
3.CSS 3ボックス関連スタイル
3.1ケースのタイプ:display属性は一般的にinline、block、inline-block、inline-table、list-item inlineでは幅を設定できませんが、blockでは幅を設定できますが、inlineの改行しない効果もあれば、blockで幅を設定できる効果もあれば、inline-blockを使用します.inline-tableはtableラベルに使用され、tableもインライン要素になる.List-itemは、一般的な要素をリスト形式で表示することができます.
3.2箱は内容の展示を収容できません:overflow属性hidden:超える文字は隠されて、scrollが見えません:見えない文字はスクロールしてautoを見ることができます:内容によって自動的に水平あるいは垂直なスクロールバーvisibleを増加することができます:この属性の効果を設定するのと同じで、レイアウトに影響することができますその他にあります:overflow-x、overflow-y
3.3ボックスシャドウ:box-shandomプロパティこのプロパティを使用すると、ボックスなしで目的のシャドウ効果を設定できます.
3.4箱の大きさの設定:box-sizingは全部で2つあります:border-box;content-boxは、要素全体の幅と高さが箱全体に含まれていることを最初に示します.2つ目の表現は、内容の部分だけが箱全体に含まれていることを示しています.
4.CSS 3ケース背景様式
箱の背景スタイル:backgroud-clip: border-box:内側の余白、枠線、内容に効果があります padding-box:内マージンとコンテンツのみバックグラウンド効果 content-box:コンテンツのみバックグラウンド効果 フィレットボーダー:border-radiusプロパティ設定イメージボーダー:border-image
5.CSS 3変形処理
transformアトリビュートtransformあとりびゅーと:rotate(角度):回転scale(スケールスケール)かいてんscale:skew(水平方向傾斜角度、垂直方向傾斜角度):傾斜translate(x軸移動距離、y軸移動距離):移動いどう
1つの要素の複数の変形方法を追加します.transformプロパティの後に複数の変形効果を追加すればいいです.複数の変形方法が追加される順序が異なると、最後の要素の位置が異なるため、これらの詳細に注意してください.
スケールのデータム点を変更:transform-originプロパティデータム点を変更することで、変形に異なる効果を与えることができます.
6.CSS 3アニメーション効果
6.1 Transitionアニメーション効果
6.2 Animationsより複雑なアニメーション効果
6.3アニメーションを実現する方法linear:均一な変化ease-in:遅いから速いease-out:速いから遅いeaseとease-in-out:遅いから速い、遅い効果
1.1属性セレクタ:
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
[id*="div"]{
color: aqua;
}
[id^="div"]{
color:blue;
}
[id$="div"]{
color:blueviolet;
}
style>
head>
<body>
<div id="div1">this is div 1div>
<div id="div2">this is div 2div>
<div id="div3">this is div 3div>
<div id="div4">this is div 4div>
<div id="mydiv">this is div 5div>
body>
html>説明:[attr*=val]:valにidにあるフィールドが含まれている限り、[attr^=val]:attr属性値を満たしてvalで始まると、[attr$=val]:attr属性値の末尾文字がvalで終わると選択されます
1.2構造的擬似クラスセレクタ
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
p:first-line{
color:blueviolet;
}
p:first-letter{
color:antiquewhite;
}
li:before{
content: "--";
color: blue;
}
li::after{
content: "description";
color: gray;
font-size: 10px;
}
style>
head>
<body>
<p>this is the first line <br/> this is the second line.p>
<ul>
<li>item1li>
<li>item2li>
<li>item3li>
ul>
body>
html>擬似クラスセレクタと擬似要素セレクタが含まれています.
1.3セレクタroot,not,emptyおよびtarget
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
/*root*/
:root{
background-color: gray;
}
body{
background-color: antiquewhite;
}
/*not*/
.div1 *:not(h1){
color: red;
}
/*empty*/
:empty{
background-color: aqua;
}
/*target*/
:target{
background-color: chartreuse;
}
style>
head>
<body>
<div class="div1">
This is div1.
<p>this is p.p>
<h1>this is h1h1>
div>
<table border="1">
<tr>
<td>item1td>
<td>item2td>
tr>
<tr>
<td>item1td>
<td>td>
tr>
<tr>
<td>td>
<td>item2td>
tr>
table>
<a href="#div1">menu1a>|
<a href="#div2">menu2a>|
<a href="#div3">menu3a>
<div id="div1">
<h1>DIV1h1>
<p>div1 contentp>
div>
<div id="div2">
<h1>DIV1h1>
<p>div1 contentp>
div>
<div id="div3">
<h1>DIV1h1>
<p>div1 contentp>
div>
body>
html>1.4セレクタ:first-child,last-child,nth-childおよびnth-last-child
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
/* */
li:first-child{
background-color: chartreuse;
}
/* */
li:last-child{
background-color: aqua;
}
/* */
li:nth-child(2){
background-color: brown;
}
/* */
li:nth-last-child(2){
background-color: deeppink;
}
style>
head>
<body>
<ul>
<li>item1li>
<li>item2li>
<li>item3li>
<li>item4li>
<li>item5li>
<li>item6li>
ul>
body>
html>特殊な場合は、スタイルの設定を繰り返します.
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
li:nth-child(4n+1){
background-color: aqua;
}
li:nth-child(4n+2){
background-color: aliceblue;
}
li:nth-child(4n+3){
background-color: brown;
}
li:nth-child(4n){
background-color: deeppink;
}
style>
head>
<body>
<ul>
<li>item1li>
<li>item2li>
<li>item3li>
<li>item4li>
<li>item1li>
<li>item2li>
<li>item3li>
<li>item4li>
<li>item1li>
<li>item2li>
<li>item3li>
<li>item4li>
<li>item1li>
<li>item2li>
<li>item3li>
<li>item4li>
<li>item1li>
<li>item2li>
<li>item3li>
<li>item4li>
ul>
body>
html>1.5セレクタ:nth-of-typeとnth-last-of-type
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
/*h2:nth-child(odd){
background-color: deeppink;
}*/
h2:nth-of-type(odd){
background-color: deeppink;
}
h2:nth-last-of-type(odd){
background-color: aqua;
}
style>
head>
<body>
<h2>Titleh2>
<p>detail contentp>
<h2>Titleh2>
<p>detail contentp>
<h2>Titleh2>
<p>detail contentp>
<h2>Titleh2>
<p>detail contentp>
body>
html>1.6セレクタ:only-child nth-child nth-last-childの代わりにonly-childを使用できます.
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
li:only-child{
background-color: deeppink;
}
style>
head>
<body>
<ul>
<li>item1li>
ul>
<ul>
<li>item1li>
ul>
<ul>
<li>item1li>
<li>item1li>
<li>item1li>
<li>item1li>
<li>item1li>
ul>
body>
html>1.7 UI要素状態疑似クラス選択器概念:指定されたスタイルは要素がある状態にある場合のみ機能し、デフォルト状態では機能しない:css 3種類全部で17種類のUI要素状態疑似クラス選択器:E:hover,E:active,E:focus,E:disable,E:read-only,E:checked,E:default,E:indeterminate…などの例:
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
/*hover focus active*/
input[type="text"]:hover{
background-color: deeppink;
}
input[type="text"]:focus{
background-color: aqua;
}
input[type="text"]:active{
background-color: blue;
}
input[type="checkbox"]:checked{
outline: 2px solid deeppink;
}
style>
head>
<body>
<input type="text" name="name">
<input type="text" name="age">
<br/>
<input type="checkbox">read
<input type="checkbox">move
<input type="checkbox">study
body>
html>1.8 disabledとenabled
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
input[type="text"]:disabled{
background-color: grey;
}
input[type="text"]:enabled{
background-color: aqua;
}
style>
<script>
function changeText(){
var radio1=document.getElementById("radio1");
var radio2=document.getElementById("radio2");
var text=document.getElementById("text");
if(radio1.checked){
text.disabled="";
}
if(radio2.checked){
text.value="";
text.disabled="disabled";
}
}
script>
head>
<body>
<input type="radio" id="radio1" name="radio" onchange="changeText()">
<input type="radio" id="radio2" name="radio" onchange="changeText()" checked >
<input type="text" id="text" disabled>
body>
html>1.9汎用兄弟要素セレクタ
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
/* */
.sdiv ~ p{
background-color: aqua;
}
/* */
.maindiv ~ p{
background-color: aqua;
}
style>
head>
<body>
<div class="maindiv">
<div class="sdiv">
<p>sssssssssssp>
<p>sssssssssssp>
div>
<p>sssssssssssp>
<p>sssssssssssp>
<p>sssssssssssp>
<p>sssssssssssp>
div>
body>
html>2.CSS 3文字とフォントスタイル
2.1テキストに影を付ける:
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
div{
/* */
text-shadow: 5px 5px 5px #ff00ff,10px 10px 5px #ff00ff,15px 15px 5px #ff00ff;
font-size: 50px;
font-weight: bold;
font-family: fantasy;
}
style>
head>
<body>
<div>
Text
div>
body>
html>2.2サーバ側フォントの使用
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
@font-face {
font-family: MyWebFont;
/* ， */
src:local("MyWebFont"),
url("impact.ttf");
}
div{
font-family: MyWebFont;
}
style>
head>
<body>
<div>This is my pagediv>
body>
html>font-size-adjustでフォントの種類を変更してフォントの大きさを維持font-size-adjustプロパティを利用してフォントの大きさを微調整し、最終的には所望の効果を得ることができます
3.CSS 3ボックス関連スタイル
3.1ケースのタイプ:display属性は一般的にinline、block、inline-block、inline-table、list-item inlineでは幅を設定できませんが、blockでは幅を設定できますが、inlineの改行しない効果もあれば、blockで幅を設定できる効果もあれば、inline-blockを使用します.inline-tableはtableラベルに使用され、tableもインライン要素になる.List-itemは、一般的な要素をリスト形式で表示することができます.
3.2箱は内容の展示を収容できません:overflow属性hidden:超える文字は隠されて、scrollが見えません:見えない文字はスクロールしてautoを見ることができます:内容によって自動的に水平あるいは垂直なスクロールバーvisibleを増加することができます:この属性の効果を設定するのと同じで、レイアウトに影響することができますその他にあります:overflow-x、overflow-y
3.3ボックスシャドウ:box-shandomプロパティこのプロパティを使用すると、ボックスなしで目的のシャドウ効果を設定できます.
3.4箱の大きさの設定:box-sizingは全部で2つあります:border-box;content-boxは、要素全体の幅と高さが箱全体に含まれていることを最初に示します.2つ目の表現は、内容の部分だけが箱全体に含まれていることを示しています.
4.CSS 3ケース背景様式
箱の背景スタイル:backgroud-clip:
5.CSS 3変形処理
transformアトリビュートtransformあとりびゅーと:rotate(角度):回転scale(スケールスケール)かいてんscale:skew(水平方向傾斜角度、垂直方向傾斜角度):傾斜translate(x軸移動距離、y軸移動距離):移動いどう
1つの要素の複数の変形方法を追加します.transformプロパティの後に複数の変形効果を追加すればいいです.複数の変形方法が追加される順序が異なると、最後の要素の位置が異なるため、これらの詳細に注意してください.
スケールのデータム点を変更:transform-originプロパティデータム点を変更することで、変形に異なる効果を与えることができます.
6.CSS 3アニメーション効果
6.1 Transitionアニメーション効果
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
div{
background-color: magenta;
/*transition: background-color 1s linear;*/
width: 100px;
color: black;
transition: transform 1s linear,width 1s linear,color 1s linear;
}
div:hover{
width: 200px;
color: blanchedalmond;
background-color: aqua;
transform:rotate(180deg);
}
style>
head>
<body>
<div> transtiondiv>
body>
html>6.2 Animationsより複雑なアニメーション効果
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
div{
background-color: red;
}
@-webkit-keyframes mycolor {
/* */
0%{
background-color: red;
}
40%{
background-color: yellow;
}
70%{
background-color: aqua;
}
100%{
background-color: red;
}
}
div:hover{
-webkit-animation: mycolor 5s linear;
}
style>
head>
<body>
<div> div>
body>
html>6.3アニメーションを実現する方法linear:均一な変化ease-in:遅いから速いease-out:速いから遅いeaseとease-in-out:遅いから速い、遅い効果