html css的简单学习(三)

时间:2021-03-22 15:16:00

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