ディレクトリ

CSSスタイル

CSSスタイル

1.高さ幅

width:200px;    # 宽度。50% 按父级标签的宽度百分比来算
height:200px;   # 高度

块级标签才能设置宽度，内联标签的宽度由内容来决定。

2.フォントのプロパティ

フォントファミリーテキストフォント

フォントファミリは、システムを保存するために「フォールバック」として複数のフォント名を置くことができます。お使いのブラウザが最初のフォントをサポートしていない場合、それは次のものをしようとします。ブラウザは、それが認識する最初の値を使用しています。

p {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

フォントサイズの文字サイズ

デフォルト16pxに。

p {
  font-size: 14px;
}

テキストワード重量（厚み）フォント重量

フォント重量はワード量（厚さ）のフォントを設定するために使用されています。

値	説明
ノーマル	デフォルト値は、標準厚さ
大胆な	太字
大胆な	より厚いです
ライター	より細かいです
100〜900	特定の厚さを設定し、400は正常に相当し、太字及び700と等価です
受け継ぎます	親要素のフォントの太さの値を継承

フォントの色

https://htmlcolorcodes.com/zh/yanse-ming/

rgb表示法：
    rgb:red green blue
    color:rgb(255,255,255); 白色
    color:rgb(0,0,0);       黑色

16进制：F最高，0最低
    color:#000000-#FFFFFF;
    
单词表示：
    color:red green;

rgba()表示：
    # a表示透明度  0-1，0是完全透明

3.テキスト

テキスト整列テキストの配置

text-align: center;
text-align: right;
text-align: left;

値	説明
左	デフォルト値は左揃えです
右	右揃え
センター	揃え
正当化	両端揃え

行の高さ：200pxの＃垂直中心線高いPX = 200pxの（PX高さが設定されている、すなわち、容器の高さ）

テキスト装飾テキストの装飾

値	説明
無し	デフォルト。テキスト定義された基準。
アンダーライン	次の行のテキストが定義されています。
上線	テキスト行の定義。
ラインスルー	テキストを通る線を定義します。
受け継ぎます	テキストの装飾のプロパティは、親要素の値を継承しています。

一般的に、デフォルトのスクライブからラベルを削除するために使用：

a {
  text-decoration: none;
}

最初の行のインデントテキストのインデント

段落インデント32個の画素の最初の行：

p {
  text-indent: 32px; #首行缩进两个字符，一个字在页面上的默认大小为16px
}

text-indent: 2em;   # em是一个相对单位，相对当前字体大小

演習：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文字</title>
    <style>
        p{
            background-color: yellow;
            height: 200px;
            width: 200px;
            font-family: '楷体','仿宋';
            font-size:24px;
            font-weight: 600;
            /*color: red;*/
            color:RGB(255,0,0);

            text-align: center;
            /*text-align: right;*/
            text-decoration: line-through;
            line-height: 200px;
        }

        a{
            text-decoration: none;
        }

        div{
            text-indent: 2em;
        }

        div:first-letter{
            font-size: 32px;
            color: red;

        }

        span{
            background-color: pink;
            height: 200px;
            width: 200px;
            font-family: '微軟正黑體';
        }
    </style>
</head>
<body>
<p>
    唧唧复唧唧
</p>

<a href="http://baidu.com">百度</a>

<div>
    做人，无需去羡慕别人，也无需去花时间去羡慕别人是如何成功的，想的只要是自己如何能战胜自己，如何变得比昨天的自己强大就行。自己的磨练和坚持，加上自己的智慧和勤劳，会成功的。终将变成石佛那样受到大家的尊敬。做人，无需去羡慕别人，也无需去花时间去羡慕别人是如何成功的，想的只要是自己如何能战胜自己，如何变得比昨天的自己强大就行。自己的磨练和坚持，加上自己的智慧和勤劳，会成功的。终将变成石佛那样受到大家的尊敬。
</div>

<span>
    木兰
</span>
</body>
</html>

4.図の背景の背景

*背景颜色*/background-color: red;
/*背景图片*/
background-image: url('1.jpg');  #url里面是图片路径，如果和你的html文件在一个目录下，使用这种相对路径就行了
background-repeat: no-repeat; 
/* 背景重复 repeat(默认):背景图片沿着x轴和y轴重复平铺，铺满整个包裹它的标签 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺*/

/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/ #200px 200px 是距离父级标签的左边和上边的距离，以前大家都用雪碧图，就是将很多的网页上需要的小图片组合成一个大图，用这个图中哪个位置的小图片。

background-attachment:fixed;    # 设置固定

ブラウザの場所の位置座標：

左上	センタートップ	右上
左中央	中央センター	右センター
左下	中央下	右下の

# 简写：
background:yellow url('1.jpg') no-repeat center center;
background:背景 图片 方式 位置;

演習：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 600px;
            height: 600px;

            background-color: pink;
            background-image: url("https://cn.bing.com/th?id=OIP.TJf26WLC_G6tlx7f3jl3UAAAAA&pid=Api&rs=1");
            background-repeat: no-repeat;   /*不铺满*/
            /*background-repeat: repeat-x;    !*x铺满*!*/
            /*background-repeat: repeat-y;    !*y铺满*!*/
            background-position:center center;
            /*background-position: 100px 100px;*/

        }
        .c3{
            width: 600px;
            height: 600px;

            background: #b2fffd
                url("https://tse1-mm.cn.bing.net/th?id=OIP.7O5T9faA_Ywbd7EIKzQtdQHaHa&w=209&h=209&c=8&rs=1&qlt=90&dpr=1.25&pid=3.1&rm=2")
                no-repeat 100px 100px;

            background-attachment:fixed ;


        }

        .c2{
            width: 600px;
            height:600px;

            background: yellow url("https://www.bing.com/th?id=OGC.3543af710332ffad155374652914b951&pid=1.7&rurl=https%3a%2f%2fws1.sinaimg.cn%2flarge%2f9150e4e5gw1faey3cbk9gg204x04xmx8.gif&ehk=36QSjWAOIuPGuWFVzq9JgA")
                no-repeat center center;

        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c3"></div>
<div class="c2"></div>

</body>
</html>

5.ボーダーボーダー

属性：

border-style:       # 样式
border-color:       # 颜色
border-width:       # 宽度

ボーダースタイルのスタイル：

値	説明
無し	枠なし。
点在	ドットは、境界線を破線。
破線	長方形点線の境界線。
固体	ソリッドボーダー。

# 简写
border: 10px dotted red;
宽度  样式  颜色

# 左边框：
border-left:10px dotted red;
# 右边框：
border-right:10px solid red;

設定しフィレット：

border-radius: 5%;      # 设置圆角，50%是圆
width:200px;
hegith:200px;   #可修改高、宽度，变椭圆。

デバッグプレイ：document.body.contentEditable =真

演習：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            /*border-width: 1px;*/
            /*border-style: solid;*/
            /*border-color: red;*/
            /*border-radius: 5%;*/
            text-align: center;

            /*border:10px dotted red ;    !*简写*!*/

            border-left:10px dotted red;

        }
    </style>

</head>
<body>
<div class="c1">
    唧唧复唧唧

</div>
</body>
</html>

6.画面のプロパティ

設定コントロールはHTML要素を表示します。

インラインにブロックレベルのインライン、ブロックレベル・ブロックにインライン。

値	意味
表示：なし	HTML文書の要素が存在するが、（隠された）ブラウザに表示されません。一般的な組み合わせのJavaScriptコードを使用しています。
表示ブロック	あなたが一部を、残りのマージンが満たされると、セットの幅を指定した場合、デフォルトでは、ページの幅全体を占めています。
表示：インライン	押して表示インライン要素は、その要素の幅、高さ、マージントップ、余白下を再設定し、フロート特性が影響されることはありません。
表示：インラインブロック	要素はインライン要素とブロックレベル要素の特性を有すると同時に。行ブロック。

ディスプレイ：なしと可視性：隠された違い：

可視性：隠された：要素を非表示にしますが、隠し要素がまだ隠されていない以前に同じ空間を占めます。言い換えれば、要素が隠されているが、それでもレイアウトに影響を与えるものの。

表示：なし：あなたは要素を非表示にすることができ、そして隠された要素は任意のスペースを取りません。言い換えれば、この要素は隠されていない、と元の要素が占めるスペースは、ページレイアウトから消えます。

演習：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            height:200px;
            width:200px;
            border:1px solid red;
            /*display: inline;*/
            /*display: inline-block;*/
            display: none;      /*隐藏*/

            /*visibility:hidden;*/

        }

        span{
            height:200px;
            width:200px;
            border: 1px solid green;
            display: block;
        }
        p{
            height:200px;
            width:200px;
            border: 1px solid blue;
            display: inline;
        }
    </style>
</head>
<body>
<div>div1</div>
<span>span1</span>
<p>p1</p>
</body>
</html>

7.ボックスモデル

CSSでは、各タグは、ボックスモデルと呼ばれることができます。

1.margin:    外边距：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
2.padding:       内边距：用于控制内容与边框之间的距离；   
3.Border(边框):   围绕在内边距和内容外的边框。
4.Content(内容):  盒子的内容，显示文本和图像。

1568193305264

スペース：コンテンツ+パディング+ボーダー

マージンマージン

chormeデバッグブラウザのウィンドウでは、chorme bodyタグブラウザに自動的に追加8pxがあります。

.test{
    margin-top:5px;
    margin-right:10px;
    margin-bottom:15px;
    margin-left:20px;
    }
    
简写：顺序 上右下左
.test{margin:5px 10px 15px 20px} 

body{margin:0;}     # body的上下左右的margin都设置为0.

.test{margin:0 auto;}   #上下0像素，左右自适应，居中的效果
如果你写的是三个：margin: 10px 20px 10px;意思是上为10，左右为20，下为10


如果将上下标签都设置了margin，会按照最大的来间隔两者，并不是相加。

パディングパディング

.test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

简写：顺序 上右下左
.test {
  padding: 5px 10px 15px 20px;
}


补充padding的常用简写方式：
提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边。

演習：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test{
            width: 200px;
            height: 200px;
            border:2px solid red;
            padding: 20px 15px 10px 5px;
            margin: 5px 10px 15px 20px;
        }
    </style>
</head>
<body>
<div class="test"></div>
</body>
</html>

1568193038126

フローティング8フロート

一般ページレイアウトのために使用。これは、通常のドキュメントフローの外にフロートします。

フロートを設定した後、ラベルは専用線ではなく、幅を高く設定することができます。

float:rigth;
float:left;

フローティングタグは、親の崩壊を引き起こします

解决方式1：父级标签设置高度。

解决方式2：在下面的其他标签加：  clear:both/left/rigth ; # 清除浮动

回避策3：擬似要素モードで、自分自身にフロートを削除

.clearfix:after{
    content:'';
    display:block;
    clear:both;
}

<div class='c1 clearfix'></div>

明確な属性は反対側フローティング要素を防止する要素を指定します。

値	説明
左	左側にフロートさせません。
右	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

练习：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            text-align: center;
            background-color: red;
            float:right
        }

        .c2{
            width: 200px;
            height: 200px;
            text-align: center;
            background-color: pink;
            float:left
        }
        .c3{
            height: 200px;
            text-align: center;
            background-color: green;
        }
        .clearfix:after {
            content: '';
            display: block;
            clear: both
        }
    </style>
</head>
<body>
<div class="clearfix">
    <div class="c1">111</div>
    <div class="c2">222</div>
</div>

<div class="c3">333</div>
</body>
</html>

9. overflow 溢出属性

overflow :scroll;

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容·修剪，但是浏览器会显示滚动条以便查看其余的内容。
··	··
11qDFUJKP	规定应该从父元素继承 overflow 属性的值。

练习：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height:200px;
            text-indent: 2em;
            border:1px solid red;
            /*overflow: visible;*/
            /*overflow: hidden;*/
            /*overflow: scroll;*/
            overflow: auto;
        }
    </style>
</head>
<body>
<div>
    做人，无需去羡慕别人，也无需去花时间去羡慕别人是如何成功的，想的只要是自己如何能战胜自己，如何变得比昨天的自己强大就行。自己的磨练和坚持，加上自己的智慧和勤劳，会成功的。终将变成石佛那样受到大家的尊敬。做人，无需去羡慕别人，也无需去花时间去羡慕别人是如何成功的，想的只要是自己如何能战胜自己，如何变得比昨天的自己强大就行。自己的磨练和坚持，加上自己的智慧和勤劳，会成功的。终将变成石佛那样受到大家的尊敬。

</div>
</body>
</html>

10. 定位 position

position: relative/absolute/fixed;
top/right/bottom/left:100px;    # 0的时候不用加px


static默认没有定位。
relative相对定位：相对自己原来的位置移动，移动后原来的空间还占着
absolute绝对定位：不占空间
    如果没有父级盒子或者有父级，但父级没有设置position定位，那么绝对定位是相对于整个html页面的边界定位；优先级提高；
    如果有父级盒子且设置了position，那么绝对定位是相对于父级盒子的的边界定位。（父相子绝）
    
    不占用自己原来的位置，移动时如果父级标签以及祖先辈都没有设置相对定位，就会按照整个html文档进行移动。优先级会提高。
    如果父级标签以及祖先辈设置了相对定位，会按照父级标签移动。
        
fixed固定定位：相对于整个窗口。

z-index 层级

z-index:正整数；

1.z-index 值表示谁压着谁，数值大的压盖住数值小的，
2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素float不能使用z-index
3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4.从父现象：父亲怂了，儿子再牛逼也没用

opacity 标签透明度

　用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

opacity:给整个标签设置透明度.

rgba() :是给属性（如背景）设置透明度.

圆形头像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .c1{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border:1px solid red;
            overflow: hidden;
        }

        div img{
            width: 100%;
        }

    </style>
</head>
<body>

<div class="c1">
    <img src="2.jpg" alt="">
</div>

</body>
</html>

48/49フロントエンド--cssスタイル

CSSスタイル

1.高さ幅

2.フォントのプロパティ

フォントファミリーテキストフォント

フォントサイズの文字サイズ

テキストワード重量（厚み）フォント重量

フォントの色

3.テキスト

テキスト整列テキストの配置

テキスト装飾テキストの装飾

最初の行のインデントテキストのインデント

演習：

4.図の背景の背景

演習：

5.ボーダーボーダー

属性：

演習：

6.画面のプロパティ

演習：

7.ボックスモデル

マージンマージン

パディングパディング

演習：

フローティング8フロート

练习：

9. overflow 溢出属性

练习：

10. 定位 position

z-index 层级

opacity 标签透明度

圆形头像

おすすめ

48/49フロントエンド--cssスタイル

CSSスタイル

1.高さ幅

2.フォントのプロパティ

フォントファミリーテキストフォント

フォントサイズの文字サイズ

テキストワード重量（厚み）フォント重量

フォントの色

3.テキスト

テキスト整列テキ​​ストの配置

テキスト装飾テキストの装飾

最初の行のインデントテキストのインデント

演習：

4.図の背景の背景

演習：

5.ボーダーボーダー

属性：

演習：

6.画面のプロパティ

演習：

7.ボックスモデル

マージンマージン

パディングパディング

演習：

フローティング8フロート

练习：

9. overflow 溢出属性

练习：

10. 定位 position

z-index 层级

opacity 标签透明度

圆形头像

おすすめ

テキスト整列テキストの配置