![f902204fcce620c2afdc3bd568222ef4.png](https://i-blog.csdnimg.cn/blog_migrate/45d37688c50b219f2c403bc459f2557b.jpeg)
这篇文章主要给大家伙科普下,结合之前本人刚入门时的所学所想,最最基本的标签就不介绍了,主要分享一些需要记忆的点和重点。
- 假设修饰div的样式表为.short{},
则修饰div其中的table 则 .short table{}
id选择器>类选择器>html选择器>通配符选择器
#>.>body>*
- 行内元素(inline element),又叫内联元素:
内联元素只能容纳文本或者其他内联元素,常见内联元素<span> <a>
- 块元素(block element):
块元素一般都从新行开,可以容纳文本,其它内联元素和其它块元素,
即使内容不能占满一行,块元素也要把整行占满。常见块元素<div></div><p></p>
- 块元素和行内元素-区别
①行内元素只占内容的宽度,块元素内容不管内容多少要占全行。
②行内元素只能容纳文本和其它行内元素,块元素可以容纳文本
行内元素和块元素.(与浏览器类版本和类型有关)
③一些css属性对行内元素不生效,比如margin,left,right,width,
height.建议尽可能使用块元素定位。(与浏览器类版本和类型有关)
- 行内元素和块元素可以相互转换
display:inline -> 转为行内元素 (比如div)
display:block -> 转为块元素 (比如a)
Padding:内边距
Margin:边框
内容(content)、填充(padding)、边框
(border)、边界(margin)
![6ac5a8e460f7a48c504668d353dd7fc5.png](https://i-blog.csdnimg.cn/blog_migrate/e2799a749452115fb552f30560201315.png)
为body 加上一个边框,再为div加上一个边框,再设置div中的图片大小内边距等(margin),
img和table 一样只要在原类选择器下
.si img/.si table
.si a/.si li
常用超链接样式:
a:link{ //设置对象在未被访问前的样式表属性。
text-decoration: none;
}
a:hover{ //设置对象在其鼠标悬停时的样式表属性。
}
a:visted{
} //设置对象在其链接地址已被访问过时的样式表属性。
![825afdc342bbb6d62a4352c772fd49ae.png](https://i-blog.csdnimg.cn/blog_migrate/a8d18e8eac601d5d5969a2474d9549c2.jpeg)
- 浮动
可以这么理解浮动:如果一个元素右/左浮动则:
①它本身会尽可能向右/左移动,直到碰到边框或者
别的浮动元素,特别强调浮动对块元素和行内元素都生效!
②元素向右/左浮动,就相当于让出自己的左/右边,别的元素就会在它的左/右边排列。
如果不希望别的元素在某个元素的左边或者右边,可以使用清除浮动的方法 clear:right ; clear: left; clear:both
- 定位:relastive
<div class="s1">内容1</div>
<div id="special" class="s1">内容2</div>
<div class="s1">内容3</div>
<div class="s1">内容4</div>
#special{
/*position: relative;*//*这里我们使用了相对定位*/
/*position:absolute;*//*绝对定位*/
left: 40px;/*原来的位置,向右移动大小(如果希望向左移动 则值就是负数)*/
top: 100px;/*在原来的位置,向下移动大小(如果希望向上移动,则值是负数)*/
}
相对定位,原来旁边的元素位置不会改变
绝对定位,会补齐
- 序列:
![7d693b9717f8e43cbb93ca06d36e4706.png](https://i-blog.csdnimg.cn/blog_migrate/b508ea99066a874457ae1054991e7f29.png)
<ul type=”circle”> // 无序 空心圆 、square方块
<li></li>
</ul>
有序排列的类型有多种,例如:I 、A、a
Type=”a”
<ol start="10"> 从10开始
<li>ios</li>
<li>android</li>
<li>html5</li>
<li>swift</li>
</ol>
- 用css修饰字标签:
<head>
<meta charset=”UTF-8”>
<link rel=”stylesheet” type=”text/css” href=”mycss.css”>
</head>
#divid p{ //中间空格 只对div内p有效,a标签无效
Color:red;
}
<div id=”divid”>
<p>hellow</p>
<a>点击我</a>
</div>
- 使某个div背景占满整个布局:
Body{
Margin : 0px;
}
- Div布局实例:
<head>
<style type="text/css">
body{
margin:0px;
}
#container{
width:100%;
height:950px;
background-color:red;
}
#heading{
width:100%;
height:10%;
background-color:#FFB6FF;
}
#content_menu{
width:30%;
height:80%;
background-color:#F0F0F0;
float:left; /*左浮动,从左往右排序,让出位置*/
}
#content_body{
width:70%;
height:80%;
background-color:#B1DBF4;
float:left; /*左浮动,从左往右排序,让出位置*/
}
#footing{
width:100%;
height:10%;
background-color:#F4E37D;
clear:both; /*清除浮动*/
}
</style>
</head>
<body>
<div id="container">
<div id="heading">xx</div>
<div id="content_menu">xx</div>
<div id="content_body">xx</div>
<div id="footing">xxx</div>
</div>
</body>
- table布局实例:
<table width="100%" height="950px" style="background-color:darkgray">
<tr>
<td colspan="2" width="100%" height="10%" style="background-color:aqua">这是头部</td>
</tr>
<tr>
<td width="30%" height="80%" style="background-color:blue">左菜单</td>
<td width="70%" height="80%" style="background-color:blueviolet">右菜单</td>
</tr>
<tr>
<td colspan="2" width="100%" height="10%" style="background-color:darkcyan">下部分</td>
</tr>
</table>
- input type:
text / password / checkbox/
radio(单选,用name标志为一个组)
<select>
<option></option>
</select>
<textarea cols=”30” rows=”30”></textarea>
<input type=”button” value=””>
<inout type=”submit” value=””>
<!DOCTYPE html>
<html>
<frameset rows="20%,*">
<frame src="top.html"/>
<frameset cols="20%,*">
<frame src="left.php"/>
<frame name="myright" src="right3.php"/>
</frameset>
</frameset>
</html>
- 内联框架
<iframe sc=”” frameborde=””>
</iframe>
- 在页面中显示实体
html 关键字显示不出来
要使用html>
- XHTML
![6721ff90427cc1b4f744e17581edd47a.png](https://i-blog.csdnimg.cn/blog_migrate/ac5db47024596501540a118c123f07af.png)