CSS日常總結

加瓦一枚發表於2018-12-26
CSS

CSS：層疊樣式表，Cascading Style Sheets

CSS語法：

CSS規則由兩個主要的部分構成：選擇器，以及一條或者多條宣告

selector {declaration1;...;declarationN}

選擇器通常是需要改變樣式的HTML元素，每條宣告由一個屬性和一個值組成

元素  {屬性1：值1；屬性2：值2}

例如

CSS水平對齊

margin：把左和右外邊距設定為 auto，規定的是均等地分配可用的外邊距。結果就是居中的元素：

.center {margin-left:auto; margin-right:auto;width:70%;//如果寬度是 100%，則對齊沒有效果。background-color:#b0e0e6; }

使用position屬性左右對齊：

.right {position:absolute;right:0px; width:300px; background-color:#b0e0e6; }

使用float屬性進行左右對齊：

.right {float:right;width:300px; background-color:#b0e0e6; }

導航欄---為何連結區域變大了display:block屬性的原因

<style>

ul

{

list-style-type:none;

margin:0;

padding:0;

}

a:link,a:visited

{

display:block;//display:block - 把連結顯示為塊元素可使整個連結區域可點選（不僅僅是文字），同時也允許我們規定寬度。而display:inline內聯樣式則是不換行

font-weight:bold;

text-transform:uppercase;

}

</style>

</head><body>

<ul>

<li><a href="#home">Home</a></li>

</ul>

水平導航欄：將<li>的display改為inline內聯即可（不換行）

或者

li {

float:left;

}

選擇器的分組：逗號隔開

selector1，selector2，selector3 {declaration1;...;declarationN}

元素的元素：如li列表下的strong元素樣式

li strong {     font-style: italic;     font-weight: normal;   }

* {   margin: 0;   padding: 0; }

id 選擇器：定義了id屬性的元素，用#id作為選擇器，如id為sidebar的元素下的<p>標籤

#sidebar p {     font-style: italic;        }

div#sidebar p {      font-style: italic;        }

類選擇器：以.點開頭加型別作為選擇器，如

.fancy td {       color: #f60; background: #666;   }

td.fancy { color: #f60; background: #666;   }

.class1.class2.fancy {//至少要同時包含，如果只有class1則不匹配     color: #f60; background: #666;   }

屬性選擇器：[]括起來

input[type] {   width:150px;   display:block;   margin-bottom:10px;   background-color:yellow;   font-family: Verdana, Arial; }

input[type="text"] {   width:150px;   display:block;   margin-bottom:10px;   background-color:yellow;   font-family: Verdana, Arial; }

a[href][title] {color:red;}//同時擁有href和title屬性的

<p class="important warning">This paragraph is a very important warning.</p>

如果寫成 p[class="important"]，那麼這個規則不能匹配示例標記。

要根據具體屬性值來選擇該元素，必須這樣寫：

p[class="important warning"] {color: red;}

如果需要根據屬性值中的詞列表的某個詞進行選擇，則需要使用波浪號（~）。

假設您想選擇 class 屬性中包含 important 的元素，可以用下面這個選擇器做到這一點：

p[class~="important"] {color: red;}

如果忽略了波浪號，則說明需要完成完全值匹配。

偽類：selector : pseudo-class {property: value}

<style type="text/css">

a:link {color: #FF0000}          /* 未訪問的連結 */a:visited {color: #00FF00} /* 已訪問的連結 */a:hover {color: #FF00FF}       /* 滑鼠移動到連結上 */a:active {color: #0000FF}   /* 選定的連結 */

</style>

</head>

<body>

<p><b><a href="/index.html" target="_blank">這是一個連結。</a></b></p>

建立css樣式表

1.引入外部樣式表，<link>匯入

2.內部樣式表：在head中定義style

3.內聯樣式表，在元素中定義style

CSS框模型

相關文章