html和css总结
2018-01-11 10:41
204 查看
锚点的使用
实现网页内和网页间的跳转，例如：返回顶部等功能
使用方法：
（1）先定义锚点：<a name=”锚点名字”>内容
</a>
（2）使用锚点：<a href=”#锚点名字”>返回顶部</a>
注意：上例是同一网页内，不同网页之间注意路径问题
同一文件夹内：<a href=”06.html#锚点名字”>内容</a>
不同文件夹：要注意文件的路径
路径问题
注意：区分好本地路径、绝对路径和相对路径
本地路径：E:\Tomcat6\apache-tomcat-6.0.9
绝对路径：网站上的固定资源
相对路径：一定是相对于url地址的。一定要和文件目录区分开。
/image/01.jpg这是表示当前web应用的根路径
特殊字符：空格： 注意最后分号。
align属性：设置元素的位置
不换行标签：<nobr></nobr>
表格标签的使用:<table></table>
行标签：<tr></tr> 表头：<th></th> 单元格：<td></td>
属性：rowspan合并行 colspan：合并列 rowspan=”2”
7、表单标签：<form></form>
属性：method：get/post表示数据提交的方法 action:将数据提交到哪个程序
用于接受用户的输入数据：格式：<input type=” ”name=” “ id=” ” value=”” />
(1)、列表框：<selectname=”” size=”显示几个选项” multiple> <option selected>
21</option></select> 其中multiple表示可以多选
（2）、多行多列文本框
<textarea rows=”” cols=””wrap=””>内容</textarea> 其中wrap属性的值：Off：不换行 Soft：自动换行，如果行末有英文单词，会将整个单词移到下一行。
Hard：自动那个换行，会截断行末单词。
（3）、隐藏变量会自动提交到下一个页面
<input type=”hidden” name=”hi”value=”${user.name}”/>
网页的布局框架：
<html>
<head><title>Frame</title></head>
<!--注意不要有body-->
<frameset cols="20%,*">
<framename="left" src="20_1.html" noresize>
<framename="right" src="20_B.html">
</frameset>
</html>
注意：使用frameset不要有<body>标签，将其省略。
<frameset rows=”row1,row2,..”cols=”col1,col2..”>
<frame name=”” src=””noresize>
<frame name=”” src=”” >
</frameset>
框架之间的嵌套
<framesetcols=“20%,*”>
<frame name=“left” src=“a.htm”>
<frameset rows=“40%,*”>
<frame name=“righttop”src=“b.htm”>
<frame name=“rightbottom”src=“c.htm”>
</frameset>
</frameset>
页面之间的跳转：利用<ahref=”网页” target=”frame name,_blank新窗口，_self本窗口，_parent父窗口，_top浏览器窗口”>内容</a>
将样式写入css文件，然后引入网页:
<link href=”url相对路径” rel=”stylesheet” type=”text/css”/>
（一）兼容问题的解决：解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
（二）注意：在css中块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距
（三）当我们不用任何样式表进行定义时，body，h1-h6，ul等元素默认有外边距或其他样式，可以通过设置body{ margin:0;}，将默认外边距去掉。
为了统一设置，可以将标签的默认样式去掉：
body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd {margin: 0px; padding: 0px; font- size:12px; font-weight:
normal; }
ul { list-style: none; } 取消列表的符号
img { border-style: none; } 取消图片的默认边框
其中：dl定义一个描述列表，dt定义项目/名字 dd描述项目/定义
（四）当设置div的边界时，有时可能没有效果，如果语法都对，很大的原因是调整大小超出了父类标签的大小。调整一个父标签就可以了。标签的位置是就左上角（即左边界和上边界为准的）
设置超链接：去除超链接的下划线：a{text-decoration:none;}
显示为块级元素：display：block；
设置高度和宽度：height：100px；width：100px；
设置背景颜色：background：gray；灰色
实现按钮效果也可以设置背景图片：background:url(images/2010-08/14/014304_btn_bg.gif)no-repeat
0px 0px;（background是一个简写属性）
设置导航按钮：也可以利用背景图片，来实现更好的效果，即将一些背景图片整合到一张图片利用css背景图片定位到要显示的位置（软件：css
sprites称为css精灵）
通过position来定位背景图片的位置，通过取负值来定位。
引入css的方式：
（1）、内嵌式：通过<style></style>来书写CSS代码，只能修饰当前网页，<style>标签可以放在网页的任何地方，一般推荐放在<head>标签内。
（2）、外联式：通过<link>标记来引入外部的CSS文件（.css）,该css文件可以被其他网页共享。<link>标签只能放在<head>标签内。
<link href=”css文件的url”rel=”stylesheet” type=”text/css”/>
（3）、行内样式：通过标签的style属性来书写css代码
<p style=”font-size:24px”></p>
CSS的优先级问题
按照最靠近的元素的定义来显示，如果两个css文件冲突，以后面的为准。
Div默认情况下宽度是最大化100%，高度最小化，高度随内容自由伸展。
元素浮动的问题：float：浮动元素之后的元素将围绕着该浮动元素，浮动元素之前的元素不受影响。解决方法：设置一个div，用去取消浮动效果div{clear：both;}
css圆角： border-radius:0px 0px 20px 25px;
或者
border-radius:15px;
设置边框：border-style：none，solid；可以设置四边的边框，类似外边距 border-width：边框宽度
Border-color：red；边框颜色
Border和border-style的区别：border：1px,solid,red;
box-shadow:h-shadow
v-shadowblur
spread
color inset;
阴影的X轴(可以使用负值)
阴影的Y轴(可以使用负值) 阴影模糊值（大小） 阴影的颜色 默认是外阴影 内阴影：inset可以设置成内部阴影
Display（显示）：显示为块元素和内联元素（块元素之间必须换行，内联元素不强制换行），即块元素独占一行，其他元素另起一行。
Display的取值： block显示为块级元素，inline显示为内联元素，inline-block显示为内联块元素。将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
（一）定位：Position指定元素的定位类型，取值：relative，absolute，fixed，static
Fixed：元素的位置相对于浏览器窗口是固定位置
Relative：是相对于正常位置的定位（即相对该标签正常情况下的位置）
Absolute：相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。（即绝对定位是以父类标签作为标准定位的）
相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右。
作用：可以用于实现多级菜单的显示，用于定位二级菜单的显示位置。
css阴影效果：
box-shadow: h-shadowv-shadowblurspread
color inset;
阴影的X轴(可以使用负值)
阴影的Y轴(可以使用负值) 阴影模糊值（大小） 阴影的颜色 默认是外阴影 内阴影：inset可以设置成内部阴影
<div style="box-shadow:-10px 0px 10pxred, /*左边阴影*/
0px -10px 10px #000, /*上边阴影*/
10px 0px 10px green, /*右边阴影*/
0px 10px 10px blue;" /*下边阴影*/ ></div>
表格标签的使用：<table></table>
<thead>定义表头,内部必须包含一个或多个<tr>
和<th>区分开，在<tr>标签内部。
<tfoot>定义表格的页脚内容,内部必须包含一个或多个<tr>
<tbody>定义表格的主体内容，内部必须包含一个或多个<tr>
（一）伪类的使用：主要是指链接后的样式
注意：a:link的样式后，下面分别设置a:visited，a:hover，a:active的样式
四个的顺序不能颠倒，会导致有些不会显示效果。
按钮的设置
li{display:inline-block;
margin-right:20px;
float:right;
}
.button{
float:right;
background-color:#e7e7e7;
border:none;
color:black;
padding:15px
52px;
text-align:center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius:10px;
}
.button:focus{
background-color:blue;
}
列表的设置：<ul>:list-style:（简写属性）list-style-type
list-style-positionlist-style-image
设置符号颜色：利用<li>和<span>标签来完成。先设置<li>标签的颜色,在设置<span>标签的颜色，即可设置成自己想要的颜色。（这里可以使用css类，标签中的class可以同名，来完成统一的设置）
表格的样式设置：border-collapse:collapse,separate;这只单元格之间的边框是合成一个单一的边框还是隔开，默认是隔开的。如果设置为collapse，border-spacing不在起作用。Table{border-collapse:separate;border-spacing:10px
50px;}，要设置table标签。
设置单元格之间的距离：border-spacing:length length;就两个值水平和垂直距离
字体的颜色直接通过：文本所在的标签设置color即可。去除滚动条，父标签设置overflow：hidden
CSS（cascading style sheet）：层叠样式表，为网页添加样式特效。
*相当于选择器，代表html所有的元素
1、<pre>标签：用于保留内容的格式。
<pre>内容</pre>
（一）添加CSS的三种方法
1、链接外部样式表
每个页面使用<link>标签链接到样式表。
<link>标签在（文档的）头部<head>标签。
<head>
<linkrel="stylesheet"type="text/css"href="mystyle.css">
</head>
说明：rel：表示使用外部的样式表 type：表示文件的类型是样式表文件 href：表示文件所在位置
2、内部样式表
使用<style>标签在文档头部定义内部样式表。
<head>
<style>
hr{color:sienna;}
p{margin-left:20px;}
body{background-image:url("images/back40.gif");}
</style>
</head>
3、内嵌样式（慎用，会损失掉样式表的很多优势）
使用标签的style属性，给标签添加样式。Style属性可以包含任何CSS属性。
<pstyle="color:sienna;margin-left:20px">这是一个段落。</p>
4、多重样式的优先级
内联样式）Inlinestyle >（内部样式）Internalstyle
sheet >（外部样式）Externalstyle sheet >浏览器默认样式
使用元素浮动属性float：left；可以在下一个标签使用clear：both；使该标签两侧没有浮动标签。
例如：img{float:left;} p{clear：both；} 这样段落标签两侧没有浮动元素
标签的对其方式：
利用margin（外边距）、padding（内边距）、float、line-height（行高）、position（absolute，relative，fixed；这时就可以设置left，right，bottom，top的距离了）
P{position:absolute;right:10px;}
文字对齐：text-align：center；
选择器
包含选取器(以空格分隔)：标签内的任意标签
子元素选择器(以大于号分隔）：必须是标签内的子标签
相邻兄弟选择器（以加号分隔）：相同的父元素，选取加号后的标签
普通兄弟选择器（以破折号分隔）：选取所有指定元素之后的相邻兄弟元素。（必须是同一父元素的标签才可以）
属性选择器（使用中括号）：ie6以前的不支持，[class=runoob]{border:5px
solid green;}
伪类和伪元素（本质是选择器）：选取要完成某个效果的标签为其添加特殊的效果。
例如：<style>h1:after { content:url(smiley.gif);}</style>
<h1>This is a heading</h1>
li a.active {
background-color: #4CAF50;
color: white;
}
<li><a href="#news">新闻</a></li>
媒体类型(媒体类型不区分大小写)：@media
screen,print{p.test{ font-family:宋体；font-size:10px;}}
图像的拼合技术（为提高加载效率，将多个图像和成一个图像，）
11、图像透明和不透明
（二）CSS的基本语法
CSS的语法结构由3部分组成：选择符（selector），样式属性（property）和值（value）
格式：选择符{样式属性：取值；样式属性：取值；...}
其中：属性和值成对出现，用冒号，多个属性用分号分开。
注意：多个选择器用逗号分开。标签的类名可以相同，但是id不能相同，会报错。
锚点的使用
实现网页内和网页间的跳转，例如：返回顶部等功能
使用方法：
（1）先定义锚点：<a name=”锚点名字”>内容
</a>
（2）使用锚点：<a href=”#锚点名字”>返回顶部</a>
注意：上例是同一网页内，不同网页之间注意路径问题
同一文件夹内：<a href=”06.html#锚点名字”>内容</a>
不同文件夹：要注意文件的路径
路径问题
注意：区分好本地路径、绝对路径和相对路径
本地路径：E:\Tomcat6\apache-tomcat-6.0.9
绝对路径：网站上的固定资源
相对路径：一定是相对于url地址的。一定要和文件目录区分开。
/image/01.jpg这是表示当前web应用的根路径
特殊字符：空格： 注意最后分号。
align属性：设置元素的位置
不换行标签：<nobr></nobr>
表格标签的使用:<table></table>
行标签：<tr></tr> 表头：<th></th> 单元格：<td></td>
属性：rowspan合并行 colspan：合并列 rowspan=”2”
7、表单标签：<form></form>
属性：method：get/post表示数据提交的方法 action:将数据提交到哪个程序
用于接受用户的输入数据：格式：<input type=” ”name=” “ id=” ” value=”” />
(1)、列表框：<selectname=”” size=”显示几个选项” multiple> <option selected>
21</option></select> 其中multiple表示可以多选
（2）、多行多列文本框
<textarea rows=”” cols=””wrap=””>内容</textarea> 其中wrap属性的值：Off：不换行 Soft：自动换行，如果行末有英文单词，会将整个单词移到下一行。
Hard：自动那个换行，会截断行末单词。
（3）、隐藏变量会自动提交到下一个页面
<input type=”hidden” name=”hi”value=”${user.name}”/>
网页的布局框架：
<html>
<head><title>Frame</title></head>
<!--注意不要有body-->
<frameset cols="20%,*">
<framename="left" src="20_1.html" noresize>
<framename="right" src="20_B.html">
</frameset>
</html>
注意：使用frameset不要有<body>标签，将其省略。
<frameset rows=”row1,row2,..”cols=”col1,col2..”>
<frame name=”” src=””noresize>
<frame name=”” src=”” >
</frameset>
框架之间的嵌套
<framesetcols=“20%,*”>
<frame name=“left” src=“a.htm”>
<frameset rows=“40%,*”>
<frame name=“righttop”src=“b.htm”>
<frame name=“rightbottom”src=“c.htm”>
</frameset>
</frameset>
页面之间的跳转：利用<ahref=”网页” target=”frame name,_blank新窗口，_self本窗口，_parent父窗口，_top浏览器窗口”>内容</a>
CSS学习
注意：行内元素是不支持上下方向的padding和margin。将样式写入css文件，然后引入网页:
<link href=”url相对路径” rel=”stylesheet” type=”text/css”/>
（一）兼容问题的解决：解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
（二）注意：在css中块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距
（三）当我们不用任何样式表进行定义时，body，h1-h6，ul等元素默认有外边距或其他样式，可以通过设置body{ margin:0;}，将默认外边距去掉。
为了统一设置，可以将标签的默认样式去掉：
body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd {margin: 0px; padding: 0px; font- size:12px; font-weight:
normal; }
ul { list-style: none; } 取消列表的符号
img { border-style: none; } 取消图片的默认边框
其中：dl定义一个描述列表，dt定义项目/名字 dd描述项目/定义
（四）当设置div的边界时，有时可能没有效果，如果语法都对，很大的原因是调整大小超出了父类标签的大小。调整一个父标签就可以了。标签的位置是就左上角（即左边界和上边界为准的）
设置超链接：去除超链接的下划线：a{text-decoration:none;}
显示为块级元素：display：block；
设置高度和宽度：height：100px；width：100px；
设置背景颜色：background：gray；灰色
实现按钮效果也可以设置背景图片：background:url(images/2010-08/14/014304_btn_bg.gif)no-repeat
0px 0px;（background是一个简写属性）
设置导航按钮：也可以利用背景图片，来实现更好的效果，即将一些背景图片整合到一张图片利用css背景图片定位到要显示的位置（软件：css
sprites称为css精灵）
通过position来定位背景图片的位置，通过取负值来定位。
引入css的方式：
（1）、内嵌式：通过<style></style>来书写CSS代码，只能修饰当前网页，<style>标签可以放在网页的任何地方，一般推荐放在<head>标签内。
（2）、外联式：通过<link>标记来引入外部的CSS文件（.css）,该css文件可以被其他网页共享。<link>标签只能放在<head>标签内。
<link href=”css文件的url”rel=”stylesheet” type=”text/css”/>
（3）、行内样式：通过标签的style属性来书写css代码
<p style=”font-size:24px”></p>
CSS的优先级问题
按照最靠近的元素的定义来显示，如果两个css文件冲突，以后面的为准。
Div默认情况下宽度是最大化100%，高度最小化，高度随内容自由伸展。
元素浮动的问题：float：浮动元素之后的元素将围绕着该浮动元素，浮动元素之前的元素不受影响。解决方法：设置一个div，用去取消浮动效果div{clear：both;}
css圆角： border-radius:0px 0px 20px 25px;
或者
border-radius:15px;
设置边框：border-style：none，solid；可以设置四边的边框，类似外边距 border-width：边框宽度
Border-color：red；边框颜色
Border和border-style的区别：border：1px,solid,red;
box-shadow:h-shadow
v-shadowblur
spread
color inset;
阴影的X轴(可以使用负值)
阴影的Y轴(可以使用负值) 阴影模糊值（大小） 阴影的颜色 默认是外阴影 内阴影：inset可以设置成内部阴影
Display（显示）：显示为块元素和内联元素（块元素之间必须换行，内联元素不强制换行），即块元素独占一行，其他元素另起一行。
Display的取值： block显示为块级元素，inline显示为内联元素，inline-block显示为内联块元素。将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
（一）定位：Position指定元素的定位类型，取值：relative，absolute，fixed，static
Fixed：元素的位置相对于浏览器窗口是固定位置
Relative：是相对于正常位置的定位（即相对该标签正常情况下的位置）
Absolute：相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。（即绝对定位是以父类标签作为标准定位的）
相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右。
作用：可以用于实现多级菜单的显示，用于定位二级菜单的显示位置。
css阴影效果：
box-shadow: h-shadowv-shadowblurspread
color inset;
阴影的X轴(可以使用负值)
阴影的Y轴(可以使用负值) 阴影模糊值（大小） 阴影的颜色 默认是外阴影 内阴影：inset可以设置成内部阴影
<div style="box-shadow:-10px 0px 10pxred, /*左边阴影*/
0px -10px 10px #000, /*上边阴影*/
10px 0px 10px green, /*右边阴影*/
0px 10px 10px blue;" /*下边阴影*/ ></div>
表格标签的使用：<table></table>
<thead>定义表头,内部必须包含一个或多个<tr>
和<th>区分开，在<tr>标签内部。
<tfoot>定义表格的页脚内容,内部必须包含一个或多个<tr>
<tbody>定义表格的主体内容，内部必须包含一个或多个<tr>
（一）伪类的使用：主要是指链接后的样式
注意：a:link的样式后，下面分别设置a:visited，a:hover，a:active的样式
四个的顺序不能颠倒，会导致有些不会显示效果。
按钮的设置
li{display:inline-block;
margin-right:20px;
float:right;
}
.button{
float:right;
background-color:#e7e7e7;
border:none;
color:black;
padding:15px
52px;
text-align:center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius:10px;
}
.button:focus{
background-color:blue;
}
列表的设置：<ul>:list-style:（简写属性）list-style-type
list-style-positionlist-style-image
设置符号颜色：利用<li>和<span>标签来完成。先设置<li>标签的颜色,在设置<span>标签的颜色，即可设置成自己想要的颜色。（这里可以使用css类，标签中的class可以同名，来完成统一的设置）
表格的样式设置：border-collapse:collapse,separate;这只单元格之间的边框是合成一个单一的边框还是隔开，默认是隔开的。如果设置为collapse，border-spacing不在起作用。Table{border-collapse:separate;border-spacing:10px
50px;}，要设置table标签。
设置单元格之间的距离：border-spacing:length length;就两个值水平和垂直距离
字体的颜色直接通过：文本所在的标签设置color即可。去除滚动条，父标签设置overflow：hidden
CSS（cascading style sheet）：层叠样式表，为网页添加样式特效。
*相当于选择器，代表html所有的元素
1、<pre>标签：用于保留内容的格式。
<pre>内容</pre>
（一）添加CSS的三种方法
1、链接外部样式表
每个页面使用<link>标签链接到样式表。
<link>标签在（文档的）头部<head>标签。
<head>
<linkrel="stylesheet"type="text/css"href="mystyle.css">
</head>
说明：rel：表示使用外部的样式表 type：表示文件的类型是样式表文件 href：表示文件所在位置
2、内部样式表
使用<style>标签在文档头部定义内部样式表。
<head>
<style>
hr{color:sienna;}
p{margin-left:20px;}
body{background-image:url("images/back40.gif");}
</style>
</head>
3、内嵌样式（慎用，会损失掉样式表的很多优势）
使用标签的style属性，给标签添加样式。Style属性可以包含任何CSS属性。
<pstyle="color:sienna;margin-left:20px">这是一个段落。</p>
4、多重样式的优先级
内联样式）Inlinestyle >（内部样式）Internalstyle
sheet >（外部样式）Externalstyle sheet >浏览器默认样式
使用元素浮动属性float：left；可以在下一个标签使用clear：both；使该标签两侧没有浮动标签。
例如：img{float:left;} p{clear：both；} 这样段落标签两侧没有浮动元素
标签的对其方式：
利用margin（外边距）、padding（内边距）、float、line-height（行高）、position（absolute，relative，fixed；这时就可以设置left，right，bottom，top的距离了）
P{position:absolute;right:10px;}
文字对齐：text-align：center；
选择器
包含选取器(以空格分隔)：标签内的任意标签
子元素选择器(以大于号分隔）：必须是标签内的子标签
相邻兄弟选择器（以加号分隔）：相同的父元素，选取加号后的标签
普通兄弟选择器（以破折号分隔）：选取所有指定元素之后的相邻兄弟元素。（必须是同一父元素的标签才可以）
属性选择器（使用中括号）：ie6以前的不支持，[class=runoob]{border:5px
solid green;}
伪类和伪元素（本质是选择器）：选取要完成某个效果的标签为其添加特殊的效果。
例如：<style>h1:after { content:url(smiley.gif);}</style>
<h1>This is a heading</h1>
li a.active {
background-color: #4CAF50;
color: white;
}
<li><a href="#news">新闻</a></li>
媒体类型(媒体类型不区分大小写)：@media
screen,print{p.test{ font-family:宋体；font-size:10px;}}
图像的拼合技术（为提高加载效率，将多个图像和成一个图像，）
11、图像透明和不透明
（二）CSS的基本语法
CSS的语法结构由3部分组成：选择符（selector），样式属性（property）和值（value）
格式：选择符{样式属性：取值；样式属性：取值；...}
其中：属性和值成对出现，用冒号，多个属性用分号分开。
注意：多个选择器用逗号分开。标签的类名可以相同，但是id不能相同，会报错。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 小知识点总结HTML、CSS、JavaScript（一）
- html,css总结
- HTML+CSS要点总结
- HTML_CSS 胡乱总结
- 总结一些更多的针对webkit的HTML, CSS和Javascript方面的特性.
- html&css基础总结
- html,css,js以及vue的小总结
- 近段时间学习html和ＣＳＳ的一些细碎总结
- 总结JS、CSS和html的注释和其作用
- html及css复习总结
- 【HTML/CSS】关于对齐的总结
- HTML 和 CSS 资料总结
- HTML和CSS的复习总结
- HTML+CSS 项目总结
- 打杂之WEB前端（二） jQuery 操作DOM总结，DOM Html操作，DOM Css操作
- Head first HTML and CSS 总结-1.HTML简介
- 关于HTML和Css的一些总结
- HTML、CSS、JavaScript学习总结
- HTML & CSS 小总结
- 四月CSS/HTML小知识点总结