python css基本操作

22310 ワード

1.概要
cssは英語のCascading Style Sheetsの略で、ページを美化するための積層スタイルシートと呼ばれています.
存在方式は3種類ある:要素のインライン、ページの埋め込みと外部の導入、3つの方式の長所と短所を比較する.
構文:style='key 1:value 1;key2:value2;'

行内式:

ラベルにstyle='xx:xxx;'を使用するラベルに単独で追加するには、styleが他の属性を追加するには、セミコロンで区切る必要があります.

div

埋め込み:

ページに
　　

リンク:

将cssファイルはHTMLファイルに導入する、1つ作成する.cssファイル、linkラベルにcssファイルを入れる



Title

インポート:

独立したcssファイルはHTMLファイルに導入され、インポート式はCSSルールを使用して外部CSSファイルに導入され、タグも<に書かれています.head>タグ中</strong></span></p>
<div class="cnblogs_Highlighter">
<pre class="brush:python;gutter:true;"><span style="color: #000000;"><head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
@import"mystyle.css"; #ここで注意してください.cssファイルのパス
注意:importはまずページのすべての情報を解析し、まずページをレンダリングしません.すべての情報がロードされてからページをレンダリングします.ロードが遅いとレンダリングされていないページが表示され、ユーザーの体験が悪いので、埋め込み式とリンク式をお勧めします.
2.CSSセレクタ
2.1ベースセレクタ
2.1.1汎用要素選択器
汎用エレメントセレクタ、任意のエレメントに一致する

*{
color: darkgrey;
}

　　
2.1.2ラベルセレクタ
XXラベルを使用しているすべての要素に一致します.
たとえば、divというラベルのすべての要素設定スタイルを選択する必要があります.

div{
color: grey;
background-color: antiquewhite;
}

　　
2.1.3 classセレクタ
.infoまたはE.info:class属性セレクタは、すべてのclass属性にinfoを含む要素に一致し、class属性は繰り返し、すなわち複数のclass属性が同じ要素である.

.cs1{
color: grey;
background-color: antiquewhite;
}
  div1  
  div2  
  p

　
2.1.4 idセレクタ
#infoまたはE#info:idプロパティセレクタは、すべてのidプロパティがinfoに等しい要素に一致します.
　

#cs1{
color: grey;
background-color: antiquewhite;
}
  div1  
  div2

　
2.2コンビネーションセレクタ
2.2.1多元素選択器
E,F:マルチエレメントセレクタ、すべてのEタグエレメントまたはFタグエレメントを一致させ、EとFの間をカンマで区切る

div,p{
color: grey;
background-color: antiquewhite;
}
  div1  
  p  
  span

　　
2.2.2子孫要素選択器
E F:子孫要素セレクタ、Eラベル要素の子孫に属するすべてのFラベル要素、すなわちすべての類似形式のすべての子孫、子孫、EとFの間をスペースで区切る.
　

div p{
color: grey;
background-color: antiquewhite;
}

　　  p1  
　　
　　　　  p2  
　　　　
　　　　　　  p3

　　
2.2.3サブエレメントセレクタ
E>F:サブエレメントセレクタ、すべてのEエレメントのサブエレメントFに一致し、サブエレメントにのみ一致し、サブエレメントのサブエレメントは一致しません.



    p1.....
    
        p2....

　　
2.2.4隣接要素選択器
E+F:隣接する要素セレクタで、E要素に続くすべての同級要素Fをマッチングします.すなわち、隣接しない場合も機能しない次のF要素のみをマッチングします.


p1....


p2.....
div1...

　
2.3属性セレクタ
プロパティに基づいてフィルタマッチングを行い、最初のinputラベルのみが対応するスタイルに一致します.


    
    Title

　　
3.共通属性
3.1色属性
color:
①英語の単語形式、例えば:red,yellow
②符号化形式、例えば、＃cc 3399、例えば、二重略記可能＃c 39
③基調色の透明度設定、例えばrgb(255,255,255,0.5)、red、green、blueの3色の透明度設定、最後の値の透明度設定
3.2フォント属性
font-size:20 px/50%/largerフォントサイズを設定します.
font-family:'Lucida Bright'テキストのフォントシリーズ;
font-weight:lighter/bold/border/フォントの太さ;
font-style:normal/oblique/italicテキストのフォントスタイル;
3.3背景属性
font-family: Verdana, Arial, Helvetica, sans-serif; background-color: rgb(238, 238, 238);">background-image:背景画像;
background-repeat:平らにする方式、no-repeatは平らにしないで、repeatは平らにします;
background-size:ピクチャサイズ設定、auto;
background-position:center上下左右中央;left center左側上下中央;top,bottom,right類似;
　




    
    Title

3.4 文本属性

text-align：center 文本居中

line-height：xxpx；行高，针对文本处理

width：xxpx；宽 %50

height：xxpx；高 %50

text-indent：xxpx 首行缩进，基于父元素

letter-spacing：xxpx；字母与字母之间距离

word-spacing：xxpx ；单词之间距离

direction：rt1

text-transform：capitalize；将单词首字母大写

text-decoration:none;　　去掉a标签的下划线

min-height:设置默认最小高度

height：auto！important 以此样式为准

vertical-align：xxpx;垂直居中

opacity：0.3 透明度

3.5 CSS样式边框

border-style：solid；边框样式

border-color：red；边框颜色

border-width：1px；边框宽度

border-radius：20%；边框变成圆角

border	在一个声明中设置所有的边框属性。
border-bottom	在一个声明中设置所有的下边框属性。
border-bottom-color	设置下边框的颜色。
border-bottom-style	设置下边框的样式。
border-bottom-width	设置下边框的宽度。
border-color	设置四条边框的颜色。
border-left	在一个声明中设置所有的左边框属性。
border-left-color	设置左边框的颜色。
border-left-style	设置左边框的样式。
border-left-width	设置左边框的宽度。
border-right	在一个声明中设置所有的右边框属性。
border-right-color	设置右边框的颜色。
border-right-style	设置右边框的样式。
border-right-width	设置右边框的宽度。
border-style	设置四条边框的样式。
border-top	在一个声明中设置所有的上边框属性。
border-top-color	设置上边框的颜色。
border-top-style	设置上边框的样式。
border-top-width	设置上边框的宽度。
border-width	设置四条边框的宽度。
outline	在一个声明中设置所有的轮廓属性。
outline-color	设置轮廓的颜色。
outline-style	设置轮廓的样式。
outline-width	设置轮廓的宽度。
border-bottom-left-radius	定义边框左下角的形状。
border-bottom-right-radius	定义边框右下角的形状。
border-image	简写属性，设置所有 border-image-* 属性。
border-image-outset	规定边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
border-image-slice	规定图像边框的向内偏移。
border-image-source	规定用作边框的图片。
border-image-width	规定图片边框的宽度。
border-radius	简写属性，设置所有四个 border-*-radius属性。
border-top-left-radius	定义边框左上角的形状。
border-top-right-radius	定义边框右下角的形状。
box-decoration-break
box-shadow	向方框添加一个或多个阴影。

3.6 CSS样式浮动

正常文档流：将元素（标签）在进行排版布局时按照从上到下、从左到右的顺序分布排版的流；

脱离文档流：将元素从文档流中取出，进行覆盖，其他元素会按文档流中不存在该元素重新布局；

float 浮动标签属性（非完全脱离）：

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

注意：当初float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，这是float的特性，即float是一种不彻底的脱离文档流方式。

float：left，right，both

清除浮动： clear : none | left | right | both

none : 默认值。允许两边都可以有浮动对象

left : 不允许左边有浮动对象

right : 不允许右边有浮动对象

both : 不允许有浮动对象

注：div2和div3使用float浮动起来，如想将div4的样式显示出来，需增加一个clear标签将架子撑起来，清除浮动

清除浮动第二种方法，overflow：hidden 将溢出的信息隐藏

overflow：auto;不光隐藏并出现滚动条

3.7 CSS样式display

块级标签和行内标签相互转换

注意:display:inlineを行内ラベルに変換します.display:blockをブロックレベルラベルに変換する;他にもdisplay:noneは表示されません
行内ラベル:高さ、幅を設定できません.padding marginブロックレベルラベル:高さ、幅を設定します.padding margin

　　
注意:display:inline-block inlineのプロパティ(デフォルトは自分がどれだけ占めているか)とblockのプロパティ(高さ、幅、padding、marginを設定できます)
3.8 CSSスタイルの余白
がいぶきょりmargin

内側マージンpadding

4その他
4.1 position
4.1.1紹介
Positionプロパティ:要素の配置タイプを指定します.すなわち、要素はドキュメントフローのレイアウトから離れ、ページの任意の場所に表示されます.
1、主な値:
1 absolute:絶対位置決め;ドキュメントフローのレイアウトから離れ、残されたスペースは後ろの要素で埋め込まれます.位置付けの開始位置は最も近い親要素(postionはstaticではありません)、そうでない場合はBodyドキュメント自体です.
②relative:相対位置決め;ドキュメント・フローのレイアウトから離れず、自分の位置だけを変更し、ドキュメント・フローの元の位置に空白の領域を残します.位置決めの開始位置この要素の元のドキュメントフローの位置.
③fixed:固定位置決め;absoluteと同様ですが、スクロールバーの移動に伴って位置は変わりません.
④static:デフォルト値;既定のレイアウト.
2、補助属性:
positionプロパティは、ドキュメントフローから要素を分離するだけです.この要素を所望の位置に表示するには、次のプロパティ(position:staticではサポートされていません):
①left:エレメントの左にどれだけのピクセルを挿入し、エレメントを右にどれだけのピクセル移動させるかを示します.
②right:要素の右側にどれだけの画素を挿入し、左にどれだけの画素を移動させるかを示します.
③top:要素の上にどれだけの画素を挿入し、どれだけの画素を下に移動させるかを示します.
④bottom:要素の下にどれだけの画素を挿入し、どれだけの画素を上に移動させるかを示します.
上のプロパティの値は負で、単位:pxです.
4.1.2位置決め方式

position:absolute

絶対位置の要素の位置は、最も近い位置の親要素に対して、要素に位置した親要素がない場合、その位置は相対的になります.
Absolutelyの配置は、要素の位置をドキュメントフローとは無関係にするため、スペースを占有しません.
Absolutelyが配置した要素と他の要素が重なる.

positon:relative

相対位置決め要素の位置決めは、通常の位置に対して行われます.
移動可能な相対的な位置決め要素の内容と互いに重なり合う要素は、元の空間が変わらない.
一般的にabsoluteと組み合わせて使用されます.

position:fixed

要素の位置は、ブラウザウィンドウに対して固定されています.
ウィンドウがスクロールされていても移動しません.
4.2 hover
カーソル(マウスポインタ)が1つの要素を指すのに適していますが、この要素がアクティブになっていない場合のスタイルです.
4.3 overflow
overflowプロパティは、コンテンツが要素のボックスにオーバーフローした場合に何が起こるかを指定します.
visible
既定値.コンテンツはトリミングされず、要素ボックスの外に表示されます.
hidden
コンテンツはトリミングされ、残りのコンテンツは表示されません.
scroll
コンテンツはトリムされますが、ブラウザにはスクロールバーが表示され、残りのコンテンツが表示されます.
auto
コンテンツがトリムされると、ブラウザにスクロールバーが表示され、残りのコンテンツが表示されます.
4.4 z-index
z-indexプロパティは、要素のスタック順序を指定します.
より高いスタック順序を持つ要素は、常にスタック順序の低い要素の前にあります.
注意:z-indexは位置決め要素(position:absolute,position:relative,or position:fixed)を行います.
4.5 opacity
div要素の透明度レベルを設定します:0-1

C++メモ(2):STL容器vector,list,deque,map,set,hashmap

Stringのoperator演算子の再ロード