Html/Css相关知识总结

一.样式

如何在html结构中引入css样式

1.行内样式表

每一个标签都有style属性
格式：<标签 style=“属性名：属性值;”>内容</标签>

2.内嵌样式表（比较常用）

格式：在head标签中输入Xhtml

<style type="text/css">
选择器{属性名：属性值;}
</style>

内嵌样式：在当前的文档可以使用该样式

3.外部样式表（比较常用）

格式：<link rel="stylesheet" href="外部样式表 xx.css"/>

拓展名保存为css文件

4.导入样式表

管理css
格式：@import url(另外一个css样式)
注意：@import是css样式标签，所以必须放到css文件中、
必须放到css样式表的最上面

二.选择器的分类

1.基本选择器

标签选择器：
选择给哪个标签加样式，自动指向该标签

语法：标签选择器名{属性：属性值;}
标签选择器名：body{},p{},div{},table{},td{},ul{}

类选择器：
给一类html标签加样式
语法：类选择器名{属性：属性值;}
选择器名称是自己定义，但是要起的有意义
类用 .来表示

例如：  .myclass{},.page{},  .main{},.login{}
必须引用，每一个标签都有一个class属性
<标签  class="选择器名"></标签>
注意：类选择器可以引用多次

id选择器
给特定的html标签加样式
格式： id选择器名{属性：属性值;}
id是用#表示
选择器名自定义，要起的有意义

例如：#myid{},  #id1{}  ,  #checkform{}
id必须的引用，引用的方法：每一个标签都有一个id属性
<标签 id="选择器名"></标签>

注意：id只能引用一次，表示唯一，通常id给javascript用，不是用来设置样式的
如果想要设置样式，用类选择器

通用选择器

（*）表示通用选择器，给所有的标签加样式
html  body  p  ul  ol li ......给所有的HTML标签加样式
语法 ： *{属性 :属性值;}

不是所有的浏览器都支持，ie6版本不支持

2.复合选择器

多元素选择器：
多个标签共有的属性和属性值放到一起
语法：选择器，选择器…{共有的属性：属性值;}

后代元素选择器:给html的后代标签加样式
语法：选择器1 选择器2 {属性:属性值;}

选择器1里面的选择器2

子元素选择器：给html标签的子标签加样式
格式：选择器>选择器{属性：属性值;}

三.伪类：

锚<a>(内容必须做好链接)

a:link:未访问的链接
a:visited 访问过的链接
a:hover  鼠标移动到链接上
a:active 单击鼠标左键那一时刻的链接

<style>
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>

四.文本属性：

1.font-size:设置文本的大小  例如font-size:12px;
2.font-weight: blod文本的加粗，normal文本正常
3.font-style:文本是否倾斜 font-style:italic 文本倾斜 font-style:normal文本正常
4.font-family:文本的字体 例如：font-family:隶书  默认是宋体
5.text-decoration :文本是否有线条
text-decoration:underline 文本有下划线
text-decoration:overline 文本加上划线
text-decoration:line-through 删除线
text-decoration:none  去掉所有线
6.text-indent文本首行缩进 text-indent:2em;
7.color: 文本的颜色 例如：color：red
8.letter-spacing:2px  设置字母与字母之间的距离
9.word-spacing:2px 设置单词与单词之间的距离
10.text-align:left/right/center  文本的对齐方式
11.line-height:200%;设置行高

五.背景的属性

1.background-color：red;设置背景颜色
2.background-image  设置的背景图片
 例如： background-image:url(图片的路径)
        background-repeat:背景图片是否平铺 取值：
                          no-repeat不平铺
                          repeat-x:横向平铺；
                          repeat-y:纵向平铺
背景图片的优先级高
3.background-position:背景图片的展开方式，例如：background-position:水平，垂直
水平：left center right/center
垂直：top  center  bottom
数值：正直  负值
例如：background-position：left top;
例如：background-position: 0     0; 
      background-position：10px 20px; 距离左边是10 距离上面是20
可以简写为：
background:背景颜色 背景图片 背景图片是否平铺 （附件） 位置水平 垂直
4.background-attachment 背景附件，背景是否随着上方的内容一起滚动
取值：fixed 背景固定 scroll滚动
例如：background-attachment:fixed;

六.列表问题

去掉列表前面的项目符号

list-style-type:none

可以简写为

list-style:none;

用小图代表列表前面的序号：

list-style-image:url(图片的地址)

七.边框线

css样式如何实现合并表格的边框线：

border-collapse:collapse;

之前是写入到table里面指直接是<table rules="all"></table>

边框：
上边框：

border-top-color:颜色值;上边框的颜色
border-top-style:线型;solid实线  dashed 虚线  dotted 点状线
border-top-width:粗细;border-top-width:2px;
简写： border-top:粗细 线型  颜色;

右边框：

border-right-color:颜色值;上边框的颜色
border-right-style:线型;solid实线  dashed 虚线  dotted 点状线
border-right-width:粗细;border-right-width:2px;
简写： border-right:粗细 线型  颜色;

下边框:

简写： border-bottom:粗细 线型  颜色;

左边框

简写： border-left:粗细 线型  颜色;

如果四条边框的样式一样可以直接写如下： border：粗细 线型 颜色

八.重点：盒子模型

1.内容区：width 和height
2.边框 border

1.内边距

padding 主要设置内容和边框之间的距离

padding-top :数值;内容和上边框之间的距离
padding-right:数值；…
padding-bottom:数值;…
padding-left:数值;

内边距的简写形式：

（1）margin:10px 20px 30px 40px;分别代表内容和上、右，底，左边框之间的距离 （2）padding:10px 20px 30px;内容和上之间的距离是10px 左右之间时20px 下是 20px;
（3）padding: 10px 20px;内容跟上下之间的距离是10px 左右是20px
（4）padding :10px 内容跟四边之间的距离是10px

2. 外边距

Margin
边框以外的距离：

1.margin-top:数值;上边框往外的距离
2.margin-right:数值;右边框往外的距离
3.margin-bottom:数值;下边框往外的距离
4.margin-left:数值;左边框往外的距离

简写方式：

（1）margin:10px 20px 30px 40px;分别代表上、右，底，左边框以外的距离
（2）margin:10px 20px 30px;上边框之外的距离是10px 左右之外20px 下是20px;
（3）margin: 10px 20px ;上下之外距离是10px 左右是20px
（4）margin :10px 边框与四边之外的距离是10px

九.浮动

网站的结构就是分为两部分（横向、纵向）
纵向就是正产个的文档流
横向排列就要使用浮动：

float:left;
float:right;

浮动的特点：

设置浮动的元素，不占用空间
设置浮动的元素层级高于普通元素
设置浮动之后，无论之前是否是块元素，设置浮动以后一定是块元素

如果在一行中的元素想要横向排列，都这只浮动就可以了
通常情况下面是div里面还有div(外面的div:父盒子，里面的div:是子盒子)

方法1：
如果div里面还有div,外面的div叫做父盒子
如果父盒子不设置高度，只设置宽度，
那么里面设置了浮动，父盒子受影响

方法2：直接在父盒子里面直接设置：

overflow:hidden; 让父盒子得到一个自然高（在设置浮动前提下）

如何让盒子在页面水平居中：

1.margin:?px  auto;
2.margin-left:auto;
3.margin-right:auto;

Div受影响了之后，如何清除浮动呢？

Clear:left;
Clear:right;
Clear:both;

十.行内元素块标签（把整个页面划分结构）

行内元素和块标签
行内元素：输入完标签之后，不是自己占一行,行内元素的宽和高是由内容决定的
给它设置高和宽是没有用的，
–css样式默认是：display:inline;

span b | u strong a

块标签：输入完标签之后，自己独占一行它是可以设置高度和宽度的
–css默认的样式：display:block;

div p table ul li ol dl dt dd h1…

块转换为行内元素
display:inline;
行内转换为块元素
display:block;

十一.overflow

当内容溢出时候，如何显示

Hidden；隐藏
Auto;如果盒子装不下，就会出现滚动条
Scroll;无论是否能够装下，都有滚动条边框

十二.优先级

单个选择器的优先级：

行内样式表》Id选择器优先级》 类选择器 》标签选择器

标签选择器   类选择器    id选择器
1               10         100

复合选择器优先级
写的越精确，优先级越高

盒子的深入
最外边的盒子width=1000px Width:500px borde=2 padding=5px
margin=10px 盒子的宽度：=内容区的宽度+边框的宽度+padding+margin=534

如果有叠加取叠加部分的最大值：
例如：margin-bottom:10px
Margin-top:40px;

十三.定位

position:定位方式有一下几个：
坐标：偏离目标位置的距离
left:数值;
right:数值;
top:数值;
bottom:数值;

1.static是默认的定位方式,

如果没有设置就是默认定位

2.fixed 是固定定位，

1.相对于浏览器窗口进行的定位
2.如果不设置定位坐标，就要在原来的位置
3.层级要比普通标签高
4.如果结合定位坐标,就是相对于目标位置的距离
5.设置固定定位以后，一定是块元素

3.relative 是相对定位

1.相对定位占空间
2.如果不结合定位坐标，就是在原来的位置
3.如果设置了坐标，不是相对于浏览器，而是相对于《自身》作为定位的原点
4.层级高于普通的元素

4.absolute 是绝对定位

1.绝对定位不占空间
2.设置绝对定位之后，层级高于普通的元素
3.不结合定位坐标就是在原来的位置
4.结合定位坐标，就是相对于祖先元素定位,作为坐标的参考点
如果祖先没有设置定位，一直往上找，直到找到body,就以body来进行定位，相对于整个窗口。

十四.阴影的设置

1. 设置文本的阴影:

text-shadow :水平 垂直 模糊强度 颜色;

水平：正值 右 负值 左
垂直：正值 下 负值 上
可以有多组值，之间用逗号相隔

2.设置盒子的阴影

box-shadow:水平 垂直 模糊强度 模糊尺寸 颜色 内外阴影

默认是外阴影不加：outset
水平：正值 右 负值 左
垂直：正值 下 负值 上

3.盒子变成圆角

Border-radius:左上 右上 右下 左下

4.设置半透明

Color:rgba(255,0,0,0.3);
Background:rgba(0,0,0,0.6);

十五.透明图片-鼠标悬停效果

img
{
	opacity:0.4;
	filter:alpha(opacity=40); /* 适用 IE8 及其更早版本 */
}
img:hover
{
	opacity:1.0;
	filter:alpha(opacity=100); /* 适用 IE8 及其更早版本 */
}

opacity 属性通常与 :hover 选择器一起使用，在鼠标移动到图片上后改变图片的透明度：

十六.图片的拼合

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>  
<style>
#navlist{position:relative;}
#navlist li{
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	top:0;}
#navlist li, #navlist a{
	height:44px;
	display:block;
	}

#home{
	left:0px;
	width:46px;
	}
#home{
	background:url('/images/img_navsprites.gif') 0 0;
	}

#prev{
	left:63px;
	width:43px;
	}
#prev{
	background:url('/images/img_navsprites.gif') -47px 0;
	}

#next{
	left:129px;
	width:43px;
	}
#next{
	background:url('/images/img_navsprites.gif') -91px 0;
	}
</style>
</head>

<body>
<ul id="navlist">
  <li id="home"><a href="/"></a></li>
  <li id="prev"><a href="/css/"></a></li>
  <li id="next"><a href="/css/"></a></li>
</ul>
</body>
</html>

运行结果：

background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置（左0px，顶部0px）

实例解析：

#navlist{position:relative;} - 位置设置相对定位，让里面的绝对定位
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding设置为0，列表样式被删除，所有列表项是绝对定位
#navlist li, #navlist a{height:44px;display:block;} - 所有图像的高度是44px
现在开始每个具体部分的定位和样式：

#home{left:0px;width:46px;} - 定位到最左边的方式，以及图像的宽度是46px
#home{background:url(img_navsprites.gif) 0 0;} - 定义背景图像和它的位置（左0px，顶部0px）
#prev{left:63px;width:43px;} - 右侧定位63px（＃home宽46px+项目之间的一些多余的空间），宽度为43px。
#prev{background:url(‘img_navsprites.gif’) -47px 0;} - 定义背景图像右侧47px（＃home宽46px+分隔线的1px）
#next{left:129px;width:43px;}- 右边定位129px(#prev 63px + #prev宽是43px + 剩余的空间), 宽度是43px.
#next{background:url(‘img_navsprites.gif’) no-repeat -91px 0;} - 定义背景图像右边91px（＃home 46px+1px的分割线+＃prev宽43px+1px的分隔线）

十七.悬停效果与图片拼合

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>  
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</style>
</head>

<body>
<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>

运行结果：

由于该列表项包含一个链接，我们可以使用：hover伪类
#home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - 对于所有三个悬停图像，我们指定相同的背景位置，只是每个再向下45px