ディレクトリ
CSS：カスケーディング・スタイル・シート
導入の1. CSSの道
インラインスタイル
<div style='color:red;'>mjj</div>内嵌式
頭の中にスタイルタグを書きます
<style> /*css代码*/ #box{ background-color: greenyellow; } </style>外部の
<link href='css/index.css' rel='stylesheet'>
優先順位を導入する方法は三種類：
- 1.インラインスタイル>組み込み、外部、
- 2.組み込み、バックに高い優先度の背後にある誰が見て外部
2. CSSセレクタ
2.1基本セレクタ
1.idセレクタ
ユニークな特定の属性（タグ）の要素、
構文：#XXX
2.クラスセレクタ
分類は、繰り返すことができる複数のクラスを提供することができます
構文：.XXX
<style>
.box{
width:200px;
height:200px;
background-color:yellow;
}
<!--单独设置 类1 中某个样式与 类2 不一样-->
.active{
border-radius: 200px; <!--设置盒子边框-->
}
</style>
<div class='box active'></div> <!--类1-->
<div class='box'></div> <!--类2-->
<div class='box'></div> <!--类2-->3.タグセレクタ
タグセレクタ有する：DIV {}、P {}、UL、オール...
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
/*设置文本修饰*/
text-decoration: none;
}
input{
border:none;
outline:none;
}
#user{
border: 1px solid #555;
height: 60px;
font-size: 20px;
padding: 0 10px;
}
.box {
width: 200px;
height: 200px;
background-color: yellow;
}
.active {
border-radius: 4px;
}
#box{
color: red;
}
div{
border:1px solid #000;
}
</style>
</head>
<body>
<div class='box active' id="box">wusir</div>
<hr>
<div class='box'></div>
<hr>
<div class='box'></div>
<a href="">百度一下</a>
<input type="text" id="user">
</body>2.2シニアセレクタ
1.子孫セレクタ
構文：
/*用空格连接*/
div p{
color: red;
}2.子孫セレクタ
構文：
/*用>连接*/
div>p{
color: red;
}3.セレクタの組み合わせ
一般的なスタイルをリセットするために使用
構文：
/*用,连接*/
div,p,body,html,ul,ol....{
padding: 0;
margin: 0;
}
input,textarea{
border:none;
outline: 0;
}ページスタイルをリセットする方法？
html,body,p,ul,ol{
margin: 0;
padding: 0;
}
/*通配符选择器 */
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
/*清除input和textarea标签的默认边框和外线*/
input,textarea{
border: none;
outline: none;
}4.交差セレクタ
span.active
構文：
div.active{
}2.3擬似クラスセレクタ
あなたがラベルに基づいて行動し、ラベルのスタイルにしたい場合はラベルのために、それは継承のためにある、ラベルが動作しません。
"愛とガイドライン" - 愛HATE：L - リンク、Vは - 、Hを訪問した - ホバー、A - アクティブ
/*LoVe HAte*/
/*a标签没有被访问时候设置的属性*/
a:link{
/*color: red;*/
}
/*a标签被访问过后设置的属性*/
a:visited{
color:yellow;
}
/*a标签被鼠标悬浮时设置的属性*/
a:hover{
color: deeppink;
}
/*a标签被摁住的时候设置的属性*/
a:active{
color: deepskyblue;
}2.4属性セレクタ
<style>
input[type='text']{
background-color: red;
}
input[type='checkbox']{
}
input[type='submit']{
}
</style>2.5擬似要素セレクタ
<style>
/*设置内容中的第一个文字*/
p::first-letter{
color: red;
font-size: 20px;
font-weight: bold;
}
/*在内容前加一个@*/
p::before{
content:'@';
}
/*::after是解决浮动布局常用的一种方法*/
/*在内容后面加一个$*/
p::after{
/*通过伪元素添加的内容为行内元素*/
content:'$';
}
</style>注意：
- ダミー素子にインライン要素を追加することにより、1コンテンツ
- 2.::after溶液は、一般にフローティングレイアウトを使用する方法であります
- 3.1「」「：」擬似要素はセレクタであり、それは擬似クラスセレクタ、2であります
3. CSSボックスモデル
1. [プロパティ]ボックスのモデルとの意味：
幅内容：幅
高さ：の内容の高さ
パディングから（も充填と呼ばれる）、ボックスの境界線の内容：パディング
1.異なる方向の個々の特性が提供されるパディング
padding-top 顶部填充的距离 padding-right 右侧填充的距离 padding-bottom 底部填充的距离 padding-left 左侧填充的距离2.統合されたプロパティは、複数のプロパティは、スペースで区切られています。
/*综合设置：四个方向的内边距为：*/ padding: 20px; /*盒子的上下内边距设置为第一个数值，左右内边距设置第二个数值*/ /*上 左右 下*/ padding: 0 20px 30px; /*上 右 下 左*/ padding: 10px 20px 30px 40px;
ボーダー：ボックスの境界線
体重、線形のスタイル、色：3つの要素boderボーダー
- 国境を書く上での3つの要素に基づき1。
border-width:3px; /*边框四边线的粗细*/ border-style:solid; /*边框线样式*/ border-color:red; /*边框线颜色*/ /*上面三句代码相当于一句代码：*/ border:3px solid red; /*同样,也可以分别设置边框四个方向的粗细 线性样式 颜色,跟padding的四个方向一样。*/ /*上下5px 左右10px*/ border-width:5px 10px; /*上：实线 右：点状线 下：双线 左：虚线*/ border-style: solid dotted double dashed; /*上：红色 左右：绿色 下：黄色*/ border-color: red green yellow;- 2.分裂の方向に従ってください
/*boder的顶部边框*/ border-top-width: 10px; border-top-color: red; border-top-style: solid; /*可以简写成*/ border-top: 10px solid red; /*boder的右侧边框*/ border-right-width: 10px; border-right-color: red; border-right-style: solid; /*可以简写成*/ border-right: 10px solid red; /*boder的底部边框*/ border-bottom-width: 10px; border-bottom-color: red; border-bottom-style: solid; /*可以简写成*/ border-bottom: 10px solid red; /*boder的左侧边框*/ border-left-width: 10px; border-left-color: red; border-left-style:solid; /*可以简写成*/ border-left: 10px solid red;3. [デフォルトのボーダー
クリア特定のデフォルト境界線のラベル：国境：なし;または境界：0;
クリアラベル特定のデフォルト外側の境界線：概要：なし;または境界：0;
4.ボーダープロパティ
1.セットラウンドまたはフィレット
構文：国境半径：20ピクセル;
<style> #box{ width: 300px; height: 300px; background-color: red; /*border-radius: 50%;*/ border-radius: 4px; border: 3px solid blue; } #box:hover{ background-color: #000; } </style>また、4つの丸い角を設定し、それはまた、各コーナーに対して別々に提供することができます。四隅に対応する、CSS3は、4つの別々の特性を提供します。
- ボーダー-左上半径
- border-top-右半径
- border-bottom-右半径
- border-bottom-左半径
これらの4つの属性は、同時に2つの値に1を提供しています。水平方向の半径と等しい垂直方向の半径を表す値であれば。二つの値は、最初の値は水平方向の半径を表す場合、2番目の値は垂直方向の半径を表します。
2.影の効果を設定します
语法：ボックスシャドウ：H-シャドウVシャドウぼかし色はめ込み。
H-影の影の水平位置、から
V-影の影の垂直位置、から
ぼやけた距離、学位をぼかします
色影の色
内部の影にはめ込み、外側の影（当初、デフォルト）。
<style> .box{ width: 200px; height: 200px; background-color: #000; margin: 100px auto; position: relative; transition: all .2s linear; } .box:hover{ top: -2px; box-shadow: 0 0 20px red; } </style>
マージン：ボックス、他のボックスにボックスの外側から。
水平距離外
/*左外边距*/ margin-left: 30px; /*右外边距*/ margin-right: 20px;垂直方向の余白
水平方向のマージンが問題になるが、垂直方向に表示されないであろうマージンマージ（または重複）と呼ばれる現象、沈下問題を基準として最大距離magrinを設定します。
この問題を回避するには？
- 問題の崩壊を避けるために、あなただけが可能マージンの箱の向きを設定する必要があります。
/*顶部外边距*/ margin-top:50px; /*底部外边距*/ margin-bottom:30px;これは、統合された水平方向および垂直方向の距離の外側に設けられていてもよいです
/*水平居中*/ margin:0 auto;
図2.ボックスモデル
