Webフロントエンド学習ノート——Day 3(css)
46869 ワード
css:積層スタイルシートで、Webページのデータの表現を制御し、Webページの表現とデータの内容を分離することができます.
一、cssの4種類の導入方式
一、cssの4種類の導入方式
1、行内式
行内式は、タグのstyleプロパティにcssスタイルを設定します."background-color:rebeccapurple">hello
2、埋め込み式
埋め込み式は、cssスタイルセットをWebページのheadラベルペアのstyleラベルペアに書き込むものです.フォーマットは次のとおりです.
Title
hello world
"">
3、接続式常用
1つのcssファイルをHTMLファイルに導入し、個数制限フォーマットはありません.<link href="css " rel="stylesheet" type="text/css"/>
4、導入式
HTMLファイルに独立したcssファイルを導入し、インポート式ではcssルールを使用して外部cssファイルを導入し、styleタグもheadラベルに書かれ、数に制限があります.フォーマットは次のとおりです.<style>
@import"css ";// css
style>
二、cssのセレクタ
「セレクタ」は、{}の「スタイル」の役割オブジェクト、すなわち「スタイル」がWebページの要素に作用することを示します.
1、ベースセレクタ
*： ， *{margin:0;padding:0}
E( ): ， E p{color:green;}
#id
.class
.info E.info:class ， class info .info{background:#ffo;} p.info{background:blue;}
eg: ：
<html>
<head>
<title>css title>
<style type="text/css">
*{
background-color: red;
}
div{
color: yellow;
}
#a{
background-color: green;
}
.c{
color: blue;
}
style>
head>
<body>
hello world
<div>hello divdiv>
<p id="a">wwwwp>
<p id="b">zzzzp>
<p class="c">qqqqp>
<p class="c">ddddp>
body>
html>
2、コンビネーションセレクタ
E,F ， E F ，F E eg：div，p{color：#f00;}
E F ， E F ，E F eg：li a{font-weigh:bold;}
E>F ， E F eg: div > p {color:#f00;}
E+F ， E eg：div + p {color:#f00;}
注意ネスト規則:
1.ブロック・レベル要素には、インライン要素または一部のブロック・レベル要素を含めることができますが、インライン要素にはブロック・レベル要素を含めることはできません.他のインライン要素のみを含めることができます.
2、いくつかの特殊なブロックレベル要素には、インライン要素のみが含まれ、ブロックレベル要素は含まれません.例えばh 1,h 2,h 3,h 4,h 5,h 6,p,dt
3、li内にdivを含めることができる
4、ブロックレベル要素はブロックレベル要素と並んで、インライン要素はインライン要素と並んでいる. ：
<html>
<head>
<title>css title>
<style type="text/css">
#b,div.c{color: red;}
.div1 div{background-color: yellow;}
.div1 .div2{background-color: red;}
.div1 .d{color: green;}
div>a{background-color: blue;}
.div1>div+.div2{color: green;}
/*// */
style>
head>
<body>
hello world
<div>hello divdiv>
<p id="a">wwwwp>
<p id="b">zzzzp>
<p class="c">qqqqp>
<p class="c">ddddp>
<div class="c">eeeediv>
<div class="div1">
<div>
<a href="">gggga>
<p class="d">hhhhp>
<div>div3div>
div>
<div class="div2">div2div>
div>
body>
html>
3、属性選択器
E[ ] E ， 。（ ：E 。 "[cheacked]"。）
E[att="value"] att value E 。
div[class="a"]{color:red;}
E[att~="value"] att 、 "value" E 。 td[class="name"]{color:red;}
E[att^="value"]
div[class^="test"]{background:red;}
E[att$="value"]
div[class$="test"]{color:red;}
E[att*="value"]
div[class*="test"]{color:blue;}
<html>
<head>
<title> title>
<style type="text/css">
[name]{color: red;}
[alex="aa"]{font-size: 30px;}
p[alex="aa"]{background-color: green;}
[alex~=qq]{background-color: pink;}
[name^=w]{color: green;}
[name$=d]{background-color: blue;}
[name*=q]{background-color: red;}
style>
head>
<body>
<div name="q">hellodiv>
<div name="ased">hello 1div>
<div alex="sb qq">hello 2div>
<div alex="aa">hello 3div>
<p alex="aa">hello 4p>
<p name="ww qq">helow 4p>
body>
html>
三、cssの偽類
cssの擬似クラスは、セレクタに特殊な効果を追加するために使用されます.
anchor擬似クラスa:link( )， 。
a:hover( )， 。
a:visited( )， ， 。
a:active( )， 。
： ：
a==>
a:link{color:#FF0000} /* */
a:visited{color:#00FF00} /* */
a:hover{color:#FF00FF}/* */
a:active{color:#0000FF} /* */ ： ： {css ；}
eg：
<html>
<head>
<title>css title>
<style type="text/css">
a:link{color: red;}
a:visited{color: green;}
a:hover{color: blue;}
a:active{color: yellow;}
style>
head>
<body>
<a href="1.html">hello-woelda>
body>
html>
hover擬似クラス(懸濁)eg： ：
<html>
<head>
<title>css title>
<style type="text/css">
.top{width: 100px;height: 100px;background-color: red;}
.wzq{width: 100px;height: 100px;background-color: yellow;}
.top:hover{background-color: yellow;}
.wzq:hover{background-color: green;}
style>
head>
<body>
<div class="box">
<div class="top">div>
<div class="wzq">div>
div>
body>
html>
before after擬似クラス:before p:before
eg：p:before{content:"hello";color:red;}
:after p:after
eg：p:after{content:'blue';color:blue;}
eg：
<html>
<head>
<title>css title>
<style type="text/css">
.add:before{
content: " ";
}
.add:after{
content: " ";
}
style>
head>
<body>
<div class="add">hello div>
body>
html>
四、セレクタの優先度と継承
css優先度:css優先度とは、ブラウザでcssスタイルが解析される前後の順序を指す。
スタイルシートの特殊性は、異なるルールの相対的な重みを記述します.基本的なルールは次のとおりです.1、
2、 ID
3、 class
4、 HTML
これらの規則に従って数文字列をビット単位で加算すると、最終的な重みが得られ、比較の切り捨て時に左から右の順にビット単位で比較されます.
注意:優先度が誰が高いか分からない場合は、追加できます.importantは、追加されたタイプを強制的に表示します.
あります!importantが宣言したルールはすべてより高い.もし!importantは衝突を宣言し、優先度を比較する.優先度が同じであれば、ソースコードに現れる順に決定され、後者が上位にランクされる.継承されたスタイルにはspecificityの計算はありません.グローバルセレクタ定義のルールなど、他のすべてのルールよりも低いです.*eg： ：
<html>
<head>
<title>css title>
<style type="text/css">
#id1{color: green;}*/
/*2、id*/
div{color: blue;}
/*4、 */
.div1{color: red;}
/*3、class*/
style>
head>
<body>
<div class="div1" id="id1" style="color: yellow;"> div>
body>
html>
eg2： ：
<html>
<head>
<title>css 2title>
<style type="text/css">
.div3{color: red!important;}
/* 3*/
#div1 .div3{color: green;}
/* 2*/
#div1 .div2 div{color: yellow;}
/* 1*/
style>
head>
<body>
<div id="div1">
<div class="div2">
<div class="div3">
div>
div>
div>
body>
html>
cssの継承性:
継承はcssの主な特徴であり,祖先−子孫の関係に依存する.継承は、スタイルが特定の要素だけでなく、子孫にも適用できるようにするメカニズムです.カラムはbodyのように色値を定義して段落のテキストにも適用されます.body{color：red} hello yuan
このテキストはbody{color:red}スタイル定義の色を継承します.しかしcssの継承性の重みは非常に低く、通常の要素の重みよりも低い0である.p{color：green；}
カラー値を付けるだけで継承されたスタイルカラーを上書きできることがわかりました.このように、明示的なルールを表示しても、継承スタイルを上書きすることができます.
また、継承はcssの重要な一部であり、なぜそうできるのかを考える必要もありませんが、css継承にも制限があります.一部の属性は継承できません.例えばborder、margin、padding、backgroundなどです.
"background-color:rebeccapurple">hello
Title
hello world
"">
<link href="css " rel="stylesheet" type="text/css"/>
<style>
@import"css ";// css
style>
「セレクタ」は、{}の「スタイル」の役割オブジェクト、すなわち「スタイル」がWebページの要素に作用することを示します.
1、ベースセレクタ
*： ， *{margin:0;padding:0}
E( ): ， E p{color:green;}
#id
.class
.info E.info:class ， class info .info{background:#ffo;} p.info{background:blue;}
eg: ：
<html>
<head>
<title>css title>
<style type="text/css">
*{
background-color: red;
}
div{
color: yellow;
}
#a{
background-color: green;
}
.c{
color: blue;
}
style>
head>
<body>
hello world
<div>hello divdiv>
<p id="a">wwwwp>
<p id="b">zzzzp>
<p class="c">qqqqp>
<p class="c">ddddp>
body>
html>
2、コンビネーションセレクタ
E,F ， E F ，F E eg：div，p{color：#f00;}
E F ， E F ，E F eg：li a{font-weigh:bold;}
E>F ， E F eg: div > p {color:#f00;}
E+F ， E eg：div + p {color:#f00;}
注意ネスト規則:
1.ブロック・レベル要素には、インライン要素または一部のブロック・レベル要素を含めることができますが、インライン要素にはブロック・レベル要素を含めることはできません.他のインライン要素のみを含めることができます.
2、いくつかの特殊なブロックレベル要素には、インライン要素のみが含まれ、ブロックレベル要素は含まれません.例えばh 1,h 2,h 3,h 4,h 5,h 6,p,dt
3、li内にdivを含めることができる
4、ブロックレベル要素はブロックレベル要素と並んで、インライン要素はインライン要素と並んでいる.
：
<html>
<head>
<title>css title>
<style type="text/css">
#b,div.c{color: red;}
.div1 div{background-color: yellow;}
.div1 .div2{background-color: red;}
.div1 .d{color: green;}
div>a{background-color: blue;}
.div1>div+.div2{color: green;}
/*// */
style>
head>
<body>
hello world
<div>hello divdiv>
<p id="a">wwwwp>
<p id="b">zzzzp>
<p class="c">qqqqp>
<p class="c">ddddp>
<div class="c">eeeediv>
<div class="div1">
<div>
<a href="">gggga>
<p class="d">hhhhp>
<div>div3div>
div>
<div class="div2">div2div>
div>
body>
html>
3、属性選択器
E[ ] E ， 。（ ：E 。 "[cheacked]"。）
E[att="value"] att value E 。
div[class="a"]{color:red;}
E[att~="value"] att 、 "value" E 。 td[class="name"]{color:red;}
E[att^="value"]
div[class^="test"]{background:red;}
E[att$="value"]
div[class$="test"]{color:red;}
E[att*="value"]
div[class*="test"]{color:blue;}
<html>
<head>
<title> title>
<style type="text/css">
[name]{color: red;}
[alex="aa"]{font-size: 30px;}
p[alex="aa"]{background-color: green;}
[alex~=qq]{background-color: pink;}
[name^=w]{color: green;}
[name$=d]{background-color: blue;}
[name*=q]{background-color: red;}
style>
head>
<body>
<div name="q">hellodiv>
<div name="ased">hello 1div>
<div alex="sb qq">hello 2div>
<div alex="aa">hello 3div>
<p alex="aa">hello 4p>
<p name="ww qq">helow 4p>
body>
html>
三、cssの偽類
cssの擬似クラスは、セレクタに特殊な効果を追加するために使用されます.
anchor擬似クラスa:link( )， 。
a:hover( )， 。
a:visited( )， ， 。
a:active( )， 。
： ：
a==>
a:link{color:#FF0000} /* */
a:visited{color:#00FF00} /* */
a:hover{color:#FF00FF}/* */
a:active{color:#0000FF} /* */ ： ： {css ；}
eg：
<html>
<head>
<title>css title>
<style type="text/css">
a:link{color: red;}
a:visited{color: green;}
a:hover{color: blue;}
a:active{color: yellow;}
style>
head>
<body>
<a href="1.html">hello-woelda>
body>
html>
hover擬似クラス(懸濁)eg： ：
<html>
<head>
<title>css title>
<style type="text/css">
.top{width: 100px;height: 100px;background-color: red;}
.wzq{width: 100px;height: 100px;background-color: yellow;}
.top:hover{background-color: yellow;}
.wzq:hover{background-color: green;}
style>
head>
<body>
<div class="box">
<div class="top">div>
<div class="wzq">div>
div>
body>
html>
before after擬似クラス:before p:before
eg：p:before{content:"hello";color:red;}
:after p:after
eg：p:after{content:'blue';color:blue;}
eg：
<html>
<head>
<title>css title>
<style type="text/css">
.add:before{
content: " ";
}
.add:after{
content: " ";
}
style>
head>
<body>
<div class="add">hello div>
body>
html>
四、セレクタの優先度と継承
css優先度:css優先度とは、ブラウザでcssスタイルが解析される前後の順序を指す。
スタイルシートの特殊性は、異なるルールの相対的な重みを記述します.基本的なルールは次のとおりです.1、
2、 ID
3、 class
4、 HTML
これらの規則に従って数文字列をビット単位で加算すると、最終的な重みが得られ、比較の切り捨て時に左から右の順にビット単位で比較されます.
注意:優先度が誰が高いか分からない場合は、追加できます.importantは、追加されたタイプを強制的に表示します.
あります!importantが宣言したルールはすべてより高い.もし!importantは衝突を宣言し、優先度を比較する.優先度が同じであれば、ソースコードに現れる順に決定され、後者が上位にランクされる.継承されたスタイルにはspecificityの計算はありません.グローバルセレクタ定義のルールなど、他のすべてのルールよりも低いです.*eg： ：
<html>
<head>
<title>css title>
<style type="text/css">
#id1{color: green;}*/
/*2、id*/
div{color: blue;}
/*4、 */
.div1{color: red;}
/*3、class*/
style>
head>
<body>
<div class="div1" id="id1" style="color: yellow;"> div>
body>
html>
eg2： ：
<html>
<head>
<title>css 2title>
<style type="text/css">
.div3{color: red!important;}
/* 3*/
#div1 .div3{color: green;}
/* 2*/
#div1 .div2 div{color: yellow;}
/* 1*/
style>
head>
<body>
<div id="div1">
<div class="div2">
<div class="div3">
div>
div>
div>
body>
html>
cssの継承性:
継承はcssの主な特徴であり,祖先−子孫の関係に依存する.継承は、スタイルが特定の要素だけでなく、子孫にも適用できるようにするメカニズムです.カラムはbodyのように色値を定義して段落のテキストにも適用されます.body{color：red} hello yuan
このテキストはbody{color:red}スタイル定義の色を継承します.しかしcssの継承性の重みは非常に低く、通常の要素の重みよりも低い0である.p{color：green；}
カラー値を付けるだけで継承されたスタイルカラーを上書きできることがわかりました.このように、明示的なルールを表示しても、継承スタイルを上書きすることができます.
また、継承はcssの重要な一部であり、なぜそうできるのかを考える必要もありませんが、css継承にも制限があります.一部の属性は継承できません.例えばborder、margin、padding、backgroundなどです.
a:link( )， 。
a:hover( )， 。
a:visited( )， ， 。
a:active( )， 。
： ：
a==>
a:link{color:#FF0000} /* */
a:visited{color:#00FF00} /* */
a:hover{color:#FF00FF}/* */
a:active{color:#0000FF} /* */ ： ： {css ；}
eg：
<html>
<head>
<title>css title>
<style type="text/css">
a:link{color: red;}
a:visited{color: green;}
a:hover{color: blue;}
a:active{color: yellow;}
style>
head>
<body>
<a href="1.html">hello-woelda>
body>
html>
eg： ：
<html>
<head>
<title>css title>
<style type="text/css">
.top{width: 100px;height: 100px;background-color: red;}
.wzq{width: 100px;height: 100px;background-color: yellow;}
.top:hover{background-color: yellow;}
.wzq:hover{background-color: green;}
style>
head>
<body>
<div class="box">
<div class="top">div>
<div class="wzq">div>
div>
body>
html>
:before p:before
eg：p:before{content:"hello";color:red;}
:after p:after
eg：p:after{content:'blue';color:blue;}
eg：
<html>
<head>
<title>css title>
<style type="text/css">
.add:before{
content: " ";
}
.add:after{
content: " ";
}
style>
head>
<body>
<div class="add">hello div>
body>
html>
css優先度:css優先度とは、ブラウザでcssスタイルが解析される前後の順序を指す。
スタイルシートの特殊性は、異なるルールの相対的な重みを記述します.基本的なルールは次のとおりです.
1、
2、 ID
3、 class
4、 HTML
これらの規則に従って数文字列をビット単位で加算すると、最終的な重みが得られ、比較の切り捨て時に左から右の順にビット単位で比較されます.
注意:優先度が誰が高いか分からない場合は、追加できます.importantは、追加されたタイプを強制的に表示します.
あります!importantが宣言したルールはすべてより高い.もし!importantは衝突を宣言し、優先度を比較する.優先度が同じであれば、ソースコードに現れる順に決定され、後者が上位にランクされる.継承されたスタイルにはspecificityの計算はありません.グローバルセレクタ定義のルールなど、他のすべてのルールよりも低いです.*
eg： ：
<html>
<head>
<title>css title>
<style type="text/css">
#id1{color: green;}*/
/*2、id*/
div{color: blue;}
/*4、 */
.div1{color: red;}
/*3、class*/
style>
head>
<body>
<div class="div1" id="id1" style="color: yellow;"> div>
body>
html>
eg2： ：
<html>
<head>
<title>css 2title>
<style type="text/css">
.div3{color: red!important;}
/* 3*/
#div1 .div3{color: green;}
/* 2*/
#div1 .div2 div{color: yellow;}
/* 1*/
style>
head>
<body>
<div id="div1">
<div class="div2">
<div class="div3">
div>
div>
div>
body>
html>
cssの継承性:
継承はcssの主な特徴であり,祖先−子孫の関係に依存する.継承は、スタイルが特定の要素だけでなく、子孫にも適用できるようにするメカニズムです.カラムはbodyのように色値を定義して段落のテキストにも適用されます.
body{color：red} hello yuan このテキストはbody{color:red}スタイル定義の色を継承します.しかしcssの継承性の重みは非常に低く、通常の要素の重みよりも低い0である.
p{color：green；} カラー値を付けるだけで継承されたスタイルカラーを上書きできることがわかりました.このように、明示的なルールを表示しても、継承スタイルを上書きすることができます.
また、継承はcssの重要な一部であり、なぜそうできるのかを考える必要もありませんが、css継承にも制限があります.一部の属性は継承できません.例えばborder、margin、padding、backgroundなどです.