css

网页布局的基本分为三种  表格布局 框架布局 CSS布局


CSS是层叠样式表（Cascading Style Sheets）的缩写，用于定义HTML元素的显示形式，是一种格式化网页内容的技术。实现表现和结构、内容相分离。将网页的表现形式部分剥离出来放在一个独立样式文件中。


CSS基本格式：
样式规则
选择器{属性1:值1;属性2:值2;....属性N:值N;}
有一个选择器和一个活多个声明组成.
每个声明用分号;
属性和值之间用:
属性值中包含了空格,那么该值就必须用双引号""
选择器之间用逗号隔开,


p{
color:#0f0;
}


样式规则的位置
外部样式表
不要style标签
<link rel="stylesheet" href="login.css"/>




嵌入式样式表
<style type="text/css">
p{}
</style>




内联样式
属性名未style
<p style=""></p>


优先级从小到大
用户设置
外部样式表
嵌入式样式表
内联样式


七种选择器:
元素选择器
类选择器
ID选择器
属性选择器
包含选择器
通配选择器
伪类及伪元素选择器


HTML元素师最典型的的选择器类型.
任何HTML元素都可以作为选择器
元素{属性:值;}
h1{color:red;}




类选择器1


.类名{属性:值;}




类选择器2
元素.类名{属性:值;}




ID选择器
#id名{属性:值;}


包含选择器
h1 b{color:blue;}  派生选择器
h1>b{color:blue;}所有父标记为h1的b元素,不包含h1子元素的b子元素//亲子选择器
h1+b{color:blue;} 紧接着h1元素的b元素// 兄弟选择器




通配选择器
*{color:red;}


伪类及伪元素选择器
伪类和伪元素是特俗的累和元素,能自动地被支持CSS的浏览器所识别
伪类区别开不同种类的元素例如,visited links已访问链接和active links可激活链接描述了两个锚点的类型
伪元素指元素的一部分,例如段落的第一个字母.                                                                                                                                                                                        
:link 设置对象a在未被访问的样式
:hover设置鼠标悬停时样式
:active点击时的样式
:visited访问过后的样式
:focus在成为输入焦点的样式
first-child第一个子对象
:first第一页的样式 仅用于@page
:left设置装订线左边的样式






注意:
对于<a>标签中href属性的内容,:link\hover\active及visited均无效
hover必须被置于link和visited之后才有效
active必须置于hover之后才有效






属性选择器
p[id]{所有有id属性的p标记
background-color:yellow;
}
input[type=password]{所有密码框拥有该样式
background-color:yellow;
}










选择器优先级


!important 可以改变CSS选择器的优先级,优先于正常的css规则




!important>id>class>element元素选择器>伪类>*








CSS优先级规定
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向越准确，他的优先级越高。


对于什么情况如何使用选择器
原则1：准确的选到要表现的标记
原则2：使用最合理的优先级的选择器
原则3：HTML和CSS代码尽量简介美观，易于阅读和维护


1）一般情况下 ，最常用的选择器时类选择器。
2）极少情况下使用id选择器，因为相同的样式只能引用一次，CSS代码复用性差，容易产生代码冗余。
3）尽量不要使用标记的style属性定义样式，它会破坏结果和表现分离的思想，导致混乱。








CSS属性 用于指明格式，通过给他设置具体的值可以确定特定选择器的样式。
CSS属性单位 长度pt px 颜色 rgb url
字体属性
文本属性
颜色与背景属性
布局属性
定位属性
列表属性
鼠标属性


CSS属性单位
绝对长度值包括cm、mm、in、pt、pc等绝对长度值最好用于打印输出设备，而在仅仅作为屏幕显示用时，绝对长度值并无多大意义。
相对长度包括px、em、ex等。相对长度是指元素尺寸相对于浏览器的系统默认值来相应的缩放。


颜色单位
用百分比值来表示  color:rgb(50%,0,50%)
使用0-255整数来设置 color:rgb(128,0,128)


URL单位
如果地址中使用了括号逗号空格单引号和双引号,那么就必须在整个地址外面加上一对单引号或双引号.
p{background-image:url(img/logo.gif);}


css中的字体属性包括
font
font-style
font-variant
font-weight
font-size
font-family


p{font:12pt/14pt sans-serif;}
p{font:x-large/110%"new century schoolbook",serif;}
p{font:bold italic large Palatino,serif;}
p{font:normal small-caps120%/120%fantasy;}


文本属性
line-height 行间距
letter-soacing 字间距
text-align文字对齐方式
text-decoration 下划线
text-transform
vertical-align
text-indent:1cm 文本缩进


颜色与背景属性
background-size 图片大小
background-color 设定背景色初始化为透明
background-image 设定背景图像
background-repeat 设置背景图像是否铺排
background-attachment 设置背景图像时岁对象内容滚动还是固定的
background-position 用于指定背景图片显示的位置
background 设置对象的背景样式,包括以上全部属性






CSS盒模型
四个不同的分层属性
内容content
边界Margin代表元素外边的空间,这个空间将元素相互分开
边框Border位于元素的编剧内盒严肃的边框距外之间的可配置的线
填充padding 
填充元素内容和元素边框之间的空间
边框编剧和边框距三个属性额可以单独设置,但是他们同事在互相配合在一起来格式化一个元素
盒式模型可以用上右下左方式设置.如果进给出两个或三个值,那么缺失的属性值取与对边相同的值.








padding-top
padding-right
padding-bottom
padding-left
padding
用来描述盒模型的边框和内容之间插入多少空间


margin
水平盒子间距为两个盒子间距的和
垂直盒子的间距为两个盒子间距的较大值
margin可以为负值


margin是当前元素和border的距离
padding是内容和border的距离
margin是对外的
padding是对内的
margin只对块级元素有效，。padding对所有元素有效




border属性
border-width 
border-color
border-style








标准文档流
所谓标准流，就是指在不适用其他与排列与定位相关的特殊CSS规则时，各种元素的排列规则。
文本元素按照从上到下从左到右
块级按照从上到下
内嵌按照从左到右


定位属性
position 定义位置
left 元素横向距左部距离
right 元素横向距右部距离
top 元素纵向距顶部距离
bottom 元素纵向距底部距离
z-index 设置元素层叠顺序
width 设置元素框宽度
height 设置元素矿高度
overflow 内容溢出控制
clip 剪切








Position：static|absolute|fixed|relative
static 默认值 不能通过z-index层次分级
relative相对定位，对象不可重叠，可以通过left right bottom top属性在正常文档中偏移位置，可以通过z-index进行层次分级
absolute 生产绝对定位的元素 相对于static定位意外第一个父元素进行定位。元素的位置通过left right bottom 和top规定
 fixed 生成绝对定位元素，相对浏览器窗口定位。元素的位置通过left rightbottom和top属性进行规定














绝对定位
1）如果父级指定绝对定位，那么子级的绝对定位是以父级左上角为原点
2）如果父级未指定绝对定位，那么子级的绝对定位是以上一级或根基的绝对定位的左上角为原点
3）如果没有指定一个定位属性和值，绝对定位不起作用。






fixed固定定位


相对定位是按照元素(或标记)自身所在位置,使用边偏移属性重新定义元素位置.
1)在确定相对定位元素位置时,首先确定元素的元素位置,即元素在文档流的位置然后恩局便宜属性中的定义的偏移量,确定元素的最终位置.
2)在使用相对定位的时候,相对定位元素保留原来所占用的文档空间,同事自身按照边偏移属性中的属性值进行偏移
3)使用相对定位的元素有可能和其他文档流普通元素出现重叠,由于其显示级别高于普通元素,所以相对定位元素会覆盖普通元素.








浮动定位:浮动的元素仍然是文档流的一部分.这与使用绝对定位的元素相比是一个明显的不同.绝对定位的元素被从文档流中脱离出来.绝对定位的元素不会影响其他元素,其他元素也不会影响它.






浮动定位只针对水平位置左右浮动
浮动定位如果有普通元素,其显示级别更高,讲覆盖普通元素/


多个浮动元素不会相互覆盖


float属性  
在传统的印刷布局中,文本可以按照需要围绕图片.一般把这种方式称为文本环绕.在网页设计中.应用CSS的float属性的页面元素就像在印刷布局里面的被蚊子包围的图片一样.浮动的元素任然是文档流的一部分.






如果不想让float下面的其他元素浮动环绕在该元素周围,可以使用clear属性清楚.clear:none left right both


clip
img{
position:absolute
clip:rect(0px 50px 100px 0px);


}


display和visibility属性 控制元素显示和隐藏
display='none'元素不会占用空间
visibility='hidden'元素会占用空间


overflow属性 内容超出容器
scroll  滚动条
hidden超出内容隐藏
word-break:break-all;文字超出容器自动换行




display属性 
display:inline 块级元素转化为内嵌元素
display:block内嵌元素转化为块级元素