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 内边距
=================================================================================