和
标签如果想在一段中加上引用就用,内联元素;
如果想让引用自成一段则用,块元素。
有序列表:
;
无序列表:
;
自定义列表:
<dl>
<dt> dt>
<dd> dd>
<dt> dt>
<dd> dd>
dl>
~/:根路径,可省略(~);
./:当前路径(可省略);
../:父级(上一层)路径
//链接到元素
"top">top postition
<a href="#top">Back to top!a>
<a href="localhost:8888/index.hrml#top">Go to topa>
//在新窗口打开界面
<a href="#top" target="_blank">Back to top!a>
<a href="#1" target="coffee">Click Herea>//在名为coffee的窗口打开(如果没有,则打开一个新的窗口并命名为coffee)
样式
a:link{ color:green; //未访问 }
a:visited{ color:red; //已访问; }
a:hover{ color:yellow; //悬停; }
a:focus{ color:blue; //获取焦点,主要针对键盘切换; }
标签服务器处理图像数据的过程:
标签是一个内联函数,也属于void元素(在开始标记和结束标记之间没有任何内容的元素)
和
标签link用来链接外部文件,而style一般只用来引用本地代码
能够继承的属性:能够影响页面外观的属性,比如颜色系列,字体系列;
不能继承的属性:如边框
1.字体
font-family:Arial sans-serif;
//自定义字体(移动设备和小型设备不支持)
@font-face {
font-family: 'Glyphicons Halflings';//为字体创建名字
src: url(../fonts/glyphicons-halflings-regular.eot);
src: url(../fonts/glyphicons-halflings-regular.eot?#iefix);
}
h1{
font-family:'Glyphicons Halflings';
}
2.字体大小
font-size:14px;
font-size:1.2em;//相对于父元素的1.2倍
font-size:150%;//相对于父元素的150%
font-size:xx-small x-small small medium large x-large xx-large;//关键字
font-style:italic(斜体);//字体样式;normal(正常)oblique(倾斜) inherit
color:red; //文本颜色
font-weight:lighter normal bold bolder; //字体粗细
text-decoration:none;// underline(下划线) overline(文本上的一条线) line-through(删除线) inherit(从父元素继承 text-decoration 属性);//更多样式
简写方式:font:font-style font-weight font-size/line-height font-family;
将每个元素都看成一个盒模型,有四个方面,包括内容、内边距(padding)、边框(border)和外边距(margin)。
外边距提供元素之间的间距,而内边距是在内容周围增加额外的空间。可以将内边距看成元素的一部分,而外边距包围元素,将它与其他元素隔开。
background-image:url(../images/baidu.jpg);//注意:url中没有引号
background-repeat:no-repeat(图像不重复); // 或者repeat-x(图像在x方向上重复) repeat-y(图像在y方向上重复) inherit(继承父元素);
background-position: top left;//把图像放在左上角,还有其他指定位置的方法 (在盒子内)
简写方式:background:url(../images/baidu.jpg) no-repeat top left;
padding-left:14px;//设置左内边距
margin:14px; //同时设置四个方向的外边距
padding:10px 20px 10px 10px;//上、右、下、左分别指定
/*当内容区宽度为auto时,浏览器会根据需要拓展内容区;外边距为auto时,浏览器会设置正确的外边距,另外会确保左右的外边距相同,所以会内容居中*/
margin-left:auto;
margin-right:auto;
border-style:solid(实线);//dotted(虚线:点点点) dashed(破折线)
border-width:thin;//边框宽度:medium thick 1px 3px 5px
border-color:rgb(0,255,255);//边框颜色
border-top-color:#444444;//指定其中一个边框
border-radius:2px;//指定边框圆角大小
简写方式:border: thin solid #444444;
//width和height针对内容区的宽度;
width:500px;
height:300px;
text-align(只能)用在块元素上,对块元素内的所有内联元素(包括img元素)对齐。如果直接用在内联元素上则不起作用。
如果要找到元素的某个属性值(如font-size):
1. 搜集所有样式表,包括作者写的、读者加的和浏览器默认的;
2. 找到所有匹配的声明;
3. 对所有匹配的规则进行排序(!important优先级最高),按作者>读者>浏览器排序;
4. 按特定性对所有声明排序:比如div > h1 比 h1更特定。
5.最后对于有冲突的规则,再按照他们在样式表中出现的顺序排序,最后出现的最重要;
6. 如果最后还是没有找到,则往上继承父元素;如果该元素不能继承,则使用浏览器默认值。
浏览器从最上面的html文件开始,从上到下沿着元素流逐渐显示遇到的元素。显示规则为:在每个块元素之间加入一个换行;内联元素在水平方向上互相挨着。如果内容区或者浏览器太窄,内联元素会自动换行。
float属性
float属性尽可能的向左或者向右浮动一个元素(浮动元素必须有一个宽度),此时正常流中会将这个元素删除,它下面的所有元素都会绕流。
总结:可以将浮动元素当成块元素忽略的元素,但是内联元素知道它在哪儿。
#footer{
clear:right;//设置它的右边没有浮动元素
}
position属性默认是static;
position:fixed;//将元素放置相对于浏览器的位置上(而不是相对于页面),因此fixed元素位置永远不会改变(即使滚动页面,元素位置也不会改变);
position:relative;//相对定位
position:absolute;//绝对定位当元素设置绝对定位时,会将其从流中完全删除,后面的块级元素和内联元素都会忽略它(与float属性不同)。
//绝对定位的元素在一般元素的上面,但同时有多个绝对定位的元素时,需要用z-index属性区分
top:10%;//百分数是相对于浏览器窗口宽度和高度的百分比
div{
position:absolute;
left:20px; //距离父元素的左边20个像素
}
div{
position:relative;
left:20px; //将元素从原来的(相对)位置右移20个像素
}
在元素太小而不能包含所有文本时控制文本的溢出方式
overflow:visible;//默认方式。自动扩大矩形区域以容纳溢出的文本
overflos:hidden;//隐藏溢出的文本
overflos:scroll;//给元素添加滚动条,以便可以通过滚动看到所有文本
<div id="tableContainer">
<div id="tableRow"> //table-row表示结构中的一行
<div id="main"> //table-cell表示每行中的一列
jsafkjkalfas
div>
<div id="siderbar">
jsfjljflaf
div>
div>
div>
#tableContainer{
display:table;//建立表格结构
border-spacing:10px;//代替外边距margin设置,性质一样;表示每个格子之间的外边距
}
#tableRow{
display:table-row;//表示结构中的一行
}
#main,#siderbar{
display:table-cell;//表示每行中的一列(设置table-cell后margin属性无效)
}
//html
<table>
<caption>德玛西亚caption>
<tr>
<th>Cityth>
<th>Dateth>
<th>Tempth>
<th>Altitudeth>
<th>Populationth>
<th>Diner Ratingth>
tr>
<tr>
<td>Walla Walla,WAtd>
<td>June 15thtd>
<td>75td>
<td>1204fttd>
<td>29686td>
<td>4/5td>
tr>
table>
//css
table{
caption-side: bottom;//将标题移到表格下方
}
html表格和css表格的区别:如果确实需要在页面中创建表格数据时,采用html表格;如果只需要对内容使用表格的方式呈现,那么就用css表格。
border-collapse:collapse;
折叠边框,可以把两个紧挨的边框合并成一个边框
规定元素中的文本的水平对齐方式
tr>td:nth-child(2),tr>td:nth-child(3),tr>td:nth-child(6){
text-align: center; //默认是left
}
tr>td:nth-child(4),tr>td:nth-child(5){ //nth-child从1 开始计数
text-align: right;
}
tr>td:nth-child(4);//nth-child(even) nth-child(2n)都可以表示偶数项
<tr>
<td>Walla Walla,WAtd>
<td>June 15thtd>
<td>75td>
<td colspan="2">1204fttd>
<td>29686td>
<td>4/5td>
tr>
li{
list-style-type:circle;url(image/mark.gif);
list-style-position:inside;//有缩进
}
//还可以定制标记
li{
list-style-image:url(image/mark.gif);
list-style-position:outside;//无缩进(默认)
}
//form:表单开始标记;action:web服务器地址
<form action="http://www.baidu.com" method="POST">
First Name: <input type="text" name="firstname" value="" /><br />
Last Name: <input type="text" name="lastname" value="" /><br />
<input type="submit" />
form>
type="text" name="lastname" value="" placeholder="123" required/>
//placeholder:占位提示;required:必须输入这个域
type="submit" name="submit" value="" />
//每个选项必须用相同的type和相同的name,不过可以用不同的value
type="radio" name="hotornot" value="hot" />
type="radio" name="hotornot" value="not hot" />
//同上
type="checkbox" name="hotornot" value="hot" />
type="checkbox" name="hotornot" value="not hot" />
type="checkbox" name="hotornot" value="cold" />
//rows和cols分别告诉浏览去文本去高度和宽度为多少个字符
<textarea name="comments" rows="10" cols="48">textarea>
//如果使用,就会变成多选菜单
<select name="charac"> //用name属性指定唯一的名字
select>
//限制只能输入数字
<input type="number" min="0" max="20" />
//类似于数字输入,但是它会显示一个滚动条
"range" min="0" max="20" step="5" />
//单击控件会出现颜色选择器
type="color" name="1" />
//单击控件会出现日期选择器
type="date" name="1" />
type="email" name="1" />
type="url" name="2" />
type="tel" name="3" />
type="password" name="4" />//文本框的输入会被隐去
//可以向服务器发送整个文件,此时Method必须用POST
type="file" name="file" />
<fieldset>//包围一组元素
<legend>//为元素提供标签
<input type="checkbox" name="spice">Salt<br>
<input type="checkbox" name="spice">Pepper<br>
<input type="checkbox" name="spice">Garlic<br>
legend>
fieldset>
(框架集)已从HTML5中移除,但是
(内联框架)仍然存在
<frameset rows="50,*">
<frame src="top.html" name="top" />
<frame src="home.html" name="home" />
<noframes>
<body>
<h1>Sample Framed Siteh1>
Your brower dose not support frames.Sorry!
body>
noframes>
frameset>
<a href="home.html" target="home">Homea>
<body>
<h1>Inline Frame Exampleh1>
<div>
<iframe src="iframe.html" frameborder="1">
<p>Uh oh.....your brower does not support iframe!p>
iframe>
div>
body>
iframe {
frameborder:"1";//0和1,0表示没有边框
}
内联框架常用于 从其他网站中引入内容