html css的簡單學習（三）

html css的簡單學習（三）

---

 

前端開發工具：
Dreamweaver、Hbuilder、WebStorm、Sublime、PhpStorm...
==========================================================
head頭的本質：
優化頁面，利於搜索；
設置字符集，防止亂碼；
引入外部樣式方便；
規定呈現樣式。
===========================================================
<meta name="keyword" content="PHP、JS、CSS">
<meta name="description" content="PHP、JS、CSS">
===========================================================
<hr size="100" width="200">
size就是高度
===========================================================
<big>hello html</big>比默認的大一個號的字體（若是已經最大，就無效）
<small>hello html</small>比默認的小一個號的字體（若是已經最小，就無效）
=========================================================================
<sub>顯示在右下角
<sup>顯示在右上角
=================================================================
斜體效果的一些標籤：
<i>你好i</i>
<em>你好em</em>
<cite>你好tite</cite>
<address>你好address</address>
其中address是塊級元素，獨佔一行，其餘三個是行級元素。
=================================================================
css的樣式：
<img src="1.jpg" width="100" height="100">
<img src="1.jpg" style="width:100px;height:100px;">
使用style時須要加單位。
====================================================================
text-indent: 2.5em；首行縮進
==================================================================
在table元素中邊框亮邊線，是指表格的左側和頂部的邊線：
bordercolorlight；

在table元素中邊框暗邊線，是指表格的右側和底部的邊線：
bordercolordark；
====================================================================
設置表格的背景顏色：
bgcolor，background，
bgcolor能夠設置body標籤和table相關標籤的背景顏色，
示例：<table bgcolor="red"></table>
background必須寫進style中。bgcolor不寫在style中。
==================================================================
table相關標籤：
table、thead、tbody、th、caption、tr、td、tfoot。
<table style="border:1px solid #ccc;">
<caption>
我是表格標題caption
</caption>

<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>

<tbody>
<tr>
<td>張三</td>
<td>12</td>
</tr>
</tbody>

<tfoot>
<tr>
<td>合計</td>
<td>100</td>
</tr>
</tfoot>

</table>
================================================================
align 設置左右對齊方式（left、right、center）
valign 設置上下對齊方式（top、bottom、middle）
===============================================================
img的border-radius能夠設置邊角的弧度，
若是寬高同樣，弧度50%時圖片顯示圓形；
若是寬高不同，弧度50%時顯示橢圓形；
<img src="1.jpg" style="width:1080px;border-radius:50%;">

opacity:0.5;設置圖片透明度
<img src="1.jpg" style="width:1080px;opacity:0.5;">
==================================================================
css中屬性選擇器：
[alt="php"]{border:5px solid red;}設置屬性alt的值爲php的元素樣式；
[alt][title]{border:5px solid red;}設置擁有屬性alt和title的元素的樣式；
[alt^="php"]{border:5px solid red;}設置屬性alt的值爲php開頭的元素樣式；
[alt$="php"]{border:5px solid red;}設置屬性alt的值爲php結尾的元素樣式；
[alt~="php"]{border:5px solid red;}設置屬性alt的值包含php的樣式（字符之間以空格隔開）；
[alt|="php"]{border:5px solid red;}設置屬性alt的值包含php的樣式（字符之間以-隔開）；
=====================================================================================
僞類選擇器：
li:first-child{color:red;} //第一個li
li:last-child{color:red;} //最後一個li
li:nth-child(5){color:red;}//第五個li
li:nth-child(odd){color:red;}//第奇數個li
li:nth-child(even){color:red;}//第偶數個li
================================================================================
+表示同級且相鄰：
h1+h2{color:red;}//表示設置與h1相鄰的同級的h2元素的顏色，不包括h1，必須是下一個元素，不能是上
一個；
h1~h2{color:red;}//表示設置與h1同級的全部的h2元素的顏色，不包括h1，也不包括h1以前的h2元素;
==========================================================================================
text-indent:2em;//縮進兩字符
==================================================================================
cellspacing 外邊距
cellpadding 內邊距
=================================================================================