百万年俸のpythonの道 - CSSスタイルシート

その他 2019-09-13 02:10:45 訪問数: null

CSSスタイル

高さと幅を制御します

width宽度
height高度
    块级标签能设置高度和宽度,而内联标签不能设置高度和宽度,内联标签的高度宽度由标签内部的内容来决定.
示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>诗</title>
    <style>
        #d1 {
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
        }

        #d2 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>

<div id="d1">div标签</div>
<span id="d2">span标签</span>
</body>
</html>

フォントプロパティ

字体
font-family: '楷体','黑体';  /* 字体,从左往右找浏览器能够支持的字体 */
字体大小
font-size: 10px;           /* 设置字体大小,默认字体大小是16px */
字重
font-weight:bold;       /*加粗*/

字体颜色
/*color:red;*/
/*color: #668B8B;  */
/*color: rgb(255, 170, 205);*/

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

値 説明
ノーマル デフォルト値は、標準厚さ
大胆な 太字
大胆な より厚いです
ライター より細かいです
100〜900 特定の厚さを設定し、400は正常に相当し、太字及び700と等価です
受け継ぎます 親要素のフォントの太さの値を継承
上例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>诗</title>
    <style>
        #d1 {
            font-family: 楷体;    /*字体*/
            font-size: 30px;    /*字体大小*/
            font-weight: bold;  /*字重*/
            color: red;     /*颜色*/
            /*color: #ff0000;     !*十六进制表示*!*/
            /*color: rgb(255,0,0);    !*范围0~255*!*/
        }

        #d2 {
            font-family: 仿宋;    /*字体*/
            font-size: 20px;    /*字体大小*/
            font-weight: lighter;   /*字重*/
            color: grey;    /*颜色*/
        }
    </style>
</head>
<body>

<div id="d1">少壮不努力</div>
<span id="d2">老大徒伤悲</span>
</body>
</html>

テキストのプロパティ

テキストの配置（水平配向：テキストアライン）

テキスト要素のレベル合わせを所定のテキスト-alignプロパティ。（文字間隔）

値 説明
左 デフォルト値は左揃えです
右 右揃え
センター 揃え 
text-align: center;
text-align: right;
text-align: left;

テキストの垂直方向の配置

line-height:和css的height相同则会居中
上記の例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>诗</title>
    <style>
        div p {
            text-align: center;
            line-height: 200px;
            background-color: antiquewhite;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div>
    <p>
        努力
    </p>
</div>

</body>
</html>

テキストの装飾

テキストの装飾のプロパティは、テキストに特殊効果を追加します。

値 説明
無し デフォルト。テキスト定義された基準。
アンダーライン 次の行のテキストが定義されています。
上線 テキスト行の定義。
ラインスルー テキストを通る線を定義します。
受け継ぎます テキストの装飾のプロパティは、親要素の値を継承しています。 
<a href="">百度</a>
示例
a{
    text-decoration: none;
}
最初の行のインデント

テキストインデントテキストのインデント

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>诗</title>
    <style>
        p {
            text-indent: 32px;
        }
    </style>
</head>
<body>

<p>
    黄色的树林里分出两条路，
    可惜我不能同时去涉足，
    我在那路口久久伫立，
    我向着一条路极目望去，
    直到它消失在丛林深处。
    但我选了另外一条路，
    它荒草萋萋，十分幽寂，
    显得更诱人，更美丽；
    虽然在这条小路上，
    很少留下旅人的足迹。
    那天清晨落叶满地，
    两条路都未经脚印污染。
    啊，留下一条路等改日再见！
    但我知道路径延绵无尽头，
    恐怕我难以再回返。
    也许多少年后在某个地方，
    我将轻声叹息将往事回顾：
    一片树林里分出两条路——
    而我选择了人迹更少的一条，
    从此决定了我一生的道路。
</p>
</body>
</html>

背景のプロパティ

/*background-color: antiquewhite;*/     /* 设置背景颜色 */
/*background-image: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2735289349,1811425433&fm=26&gp=0.jpg);*/       /* 背景图片,url属性值为图片路径 */
/*background-repeat: no-repeat;*/       /* 图片是否平铺,默认是平铺的,占满整个标签 */
/*background-position: 500px 310px;*/       /*图片位置*/


background: antiquewhite url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2735289349,1811425433&fm=26&gp=0.jpg) no-repeat 500px 310px;         这一句是上面四行的缩写
省略形
background: yellow url("meinv.jpg") no-repeat 100px 50px;
背景颜色 背景图片路径 是否平铺 图片位置

ボーダーのプロパティ

/*border-style: dotted;*/  样式
/*border-color: red;*/   颜色
/*border-width: 10px;*/  宽度
简写形式:
    /*border: 10px solid yellow;*/

四个边框可以单独设置:
    border-left:10px solid yellow ;
    border-right:10px dashed red ;
设置圆角
    border-radius: 5%;  /* 设置圆角 *
境界線のスタイルの値
値 説明
無し 枠なし。
点在 ドットは、境界線を破線。
破線 長方形点線の境界線。
固体 ソリッドボーダー。
例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>诗</title>
    <style>
        div{
            /*border-style: solid;*/
            /*border-color: red;*/
            /*border-width: 10px;*/
            /*border: 10px solid yellow;*/  /*是上面三行的缩写*/
            border-left: 10px solid blue;
            border-right: 20px dotted grey;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div>

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

表示

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

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>诗</title>
    <style>
        div{
            border: 1px solid red;
            width: 200px;
            height: 200px;
            /*display: inline;*/
            /*display: inline-block;*/
            display: none;  /*隐藏标签*/
        }
        span{
            border: 1px solid green;
            width: 200px;
            height: 200px;
            display: block;
            /*display: inline-block;*/
        }
    </style>
</head>
<body>
<div>少壮不努力</div>
<span>老大徒伤悲</span>
</body>
</html>
隠されたタグ：
/*display: none;*/   /* 隐藏标签,不占原来的位置 */
visibility: hidden;  /* 原来的位置还占着 */

ボックスモデル

content:内容  width和height 是内容的高度宽度
padding:内边距(内填充) 内容和边框之间的距离
border:边框
margin:外边距 标签之间的距离,如果两个标签都设置了margin,选最大的值,作为双方之间的距离
占用空间大小:content+padding+border
例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>诗</title>
    <style>
        .c1{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /*padding: 20px 20px;*/
            padding: 8px 6px 9px 2px;   /* 上右下左,内填充,内容和边框之间的距离 */
            margin: 20px 10px;
        }
        .c2{
            width: 100px;
            height: 100px;
            border: 10px solid green;
            margin: 20px 10px;  /* 外边距,与其他标签的距离,如果旁边没有标签,按照父级标签的位置进行移动 */
        }
        .c3{
            width: 100px;
            height: 100px;
            border: 10px solid blue;
        }
    </style>
</head>
<body>
<div class="c1">少壮不努力</div>
<div class="c2">老大徒伤悲</div>
<div class="c3">努力</div>
</body>
</html>
4つの方向に分けて配置されたパディング
padding-left: 10px;
padding-top: 8px;
padding-right: 5px;
padding-bottom: 5px;
四方は個別にマージンを設定します
margin-top: 10px;
margin-left: 100px;
margin-bottom: 50px;
margin-right: 200px;

フロートフロート

一般ページレイアウトのために使用さ
浮动会脱离正常文档流
会造成父级标签塌陷问题
この問題を解決するフローティング

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

値 説明
左 左側にフロートさせません。
右 右側には、フローティング要素が許可されていません。
両方 左右はフロートすることはできません。
無し デフォルト値。浮動要素を許可すると、両側に表示されます。
受け継ぎます クリア規定は親要素からプロパティ値を継承する必要があります。 
clear: both;    /* clear清除浮动*/  left/right
方式:
    1. 父级标签设置高度
    2. 通过伪元素选择器来进行清除浮动
        .clearfix:after{
            content:'';
            display: block;
            clear: both;
        }
例を解決します：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>诗</title>
    <style>
        .c1 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }

        .c2 {
            width: 100px;
            height: 100px;
            background-color: green;
            float: right;
        }

        .c3 {
            /*width: 100px;*/
            height: 100px;
            background-color: blue;
            /*clear: both;    !* clear清除浮动 *!*/
        }
        .clearfix::after{
            content: '';
            display: block;
            clear: both;;
        }
        
           /* 浮动,会造成父级标签塌陷问题 */
            /* 解决父级标签塌陷问题方式1 */
        /*.c{*/
        /*    height: 100px;*/
        /*}*/
    </style>
</head>
<body>
<div class="c clearfix">
    <div class="c1">少壮不努力</div>
    <div class="c2">老大徒伤悲</div>
</div>
<div class="c3">努力</div>
</body>
</html>

オーバーフローオーバーフロー

値 説明
目に見えます デフォルト値。コンテンツはボックスの外側の要素があるだろう、剪定されることはありません。
隠されました コンテンツは削除されます、そして残りのコンテンツは表示されません。
スクロール コンテンツは削除されますが、ブラウザは、コンテンツの残りの部分を表示するには、スクロールバーが表示されます。
オート コンテンツが剪定された場合、ブラウザは、コンテンツの残りの部分を表示するには、スクロールバーが表示されます。
受け継ぎます 提供は親要素からoverflowプロパティの値を継承する必要があります。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>诗</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /*overflow: hidden;*/
            /*overflow: scroll;*/
            overflow: auto;
        }
    </style>
</head>
<body>
<div>
    <P>黄色的树林里分出两条路，
        可惜我不能同时去涉足，
        我在那路口久久伫立，
        我向着一条路极目望去，
        直到它消失在丛林深处。
        但我选了另外一条路，
        它荒草萋萋，十分幽寂，
        显得更诱人，更美丽；
        虽然在这条小路上，
        很少留下旅人的足迹。
        那天清晨落叶满地，
        两条路都未经脚印污染。
        啊，留下一条路等改日再见！
        但我知道路径延绵无尽头，
        恐怕我难以再回返。
        也许多少年后在某个地方，
        我将轻声叹息将往事回顾：
        一片树林里分出两条路——
        而我选择了人迹更少的一条，
        从此决定了我一生的道路。
    </P>
</div>
</body>
</html>
ボーダー半径オーバーフローアプリケーション：円形のアバター
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>小诗</title>
    <style>
        .c1{
            width: 110px;
            height: 110px;
            border-radius: 50%;
            border: 1px solid antiquewhite;
            overflow: hidden;
        }
        div img{
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="css1.css">
</head>
<body>

<div class="c1">
    <img src="1.png" alt="">
</div>

</body>
</html>

見つけます

static定位(默认,无定位)

相对定位
    position: relative;     /* 相对于自己原来的位置进行移动,原来的空间还占着*/

绝对定位
    position:absolute;      /* 不占用自己原来的位置,移动的时候如果父级标签或祖先标签设置了相对定位,会以父级标签或祖先标签为参照物移动,如果父级标签或祖先标签没有设置相对定位,则按照整个文档进行移动*/

固定定位
    position:fixed;
    按照浏览器窗口的位置进行移动
トップの例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>小诗</title>
    <style>
        .c1,.c3{
            background-color: red;
            height: 500px;
            width: 600px;
        }
        .c2{
            background-color: grey;
            height: 500px;
            width: 600px;
        }
        #back_top{
            height: 40px;
            width: 80px;
            position: fixed;
            right: 40px;
            bottom: 40px;
            background-color: antiquewhite;
        }
        #back_top{
            text-align: center;
            line-height: 40px;
        }
        #back_top a{
            color: grey;
            text-decoration: none;
        }
    </style>
    <link rel="stylesheet" href="css1.css">
</head>
<body>
<a id="top">这是顶部位置</a>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div id="back_top">
    <a href="#top">回到顶部</a>
</div>
</body>
</html>

z屈折率セットレベル

モーダルダイアログを導入するためには

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>小诗</title>
    <style>
        .shadow{
            background-color: rgba(0,0,0,0.3);
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 90;
        }
        .mode{
            width: 400px;
            height: 400px;
            background-color: #fff;
            z-index: 100;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -200px;
        }
        .c1{
            width: 200px;
            height: 200px;
            margin: 150px auto;
        }
    </style>
</head>
<body>
<h1>努力</h1>
<div>少壮不努力,老大徒伤悲</div>
<div class="mode">
    <div class="c1">
        <div>
            <label>
                用户名: <input type="text">
            </label>
        </div>
        <div>
            <label>
                密码: <input type="password">
            </label>
        </div>
        <input type="submit" style="margin-top: 10px">
    </div>
</div>
<div class="shadow"></div>
</body>
</html>

Zインデックスの注意事項

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

不透明度と透明性のRGBA透明性の違い

opactiy是整个标签的透明度
rgba是单独给某个属性设置透明度

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>小诗</title>
    <style>
        .c1{
            background-color: rgba(255,0,0,0.5);    /* 只有颜色变了 */
        }
        .c2{
            opacity: 0.3;       /* 字体和背景都变了 */
            background-color: red;
        }
    </style>
</head>
<body>
<div class="c1">div1</div>
<div class="c2">div2</div>
</body>
</html>

おすすめ

転載: www.cnblogs.com/zhangchaoyin/p/11514637.html
おすすめ
ランキング
Web側のオンラインクラウド編集ソリューション
2つのシナリオでのJVMチューニングケース（基本テンプレートの概要-G1）-ピット概要ハイライト21を踏む（週に1回更新）
Node Sass は現在の環境のバインディングを見つけることができませんでした
RabbitMQのコマンドラインの使用方法は、手動でキューrabbitmqadminを作成します
币圈韭菜十大致命操作（八）热爱幻想，无视现实
Wide Face+YOLOV7 顔検出
shrioの研究ノート
Eclipseは「：不明なMavenの設定の問題」を示します
6512. [3.18] GDOI2020シミュレーションツリーとパス
不像总结的总结
アーカイブ
もっと
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)

コードワールド

© 2018 codetd.com