css

使用css样式的3种方法：

1.外部样式
<link rel="stylesheet" type="text/css" href="css文件名">
2.内页样式
直接写在html文件的头部里
<style type="text/css">

</style>

3.行内样式
<p style="color:red;">


css基本语法：选择器+一条或多条声明（声明由一个属性和一个值组成）
（属性是你希望设置的样式属性）
选择器{
属性：值；
}
p{
color:red;
font-size:30px;
}


css加注释 /*    */


-常用选择器
-简单选择器
[1]id选择器：通过给标签加id属性，并给与该属性一个值#id名称{。。。}
如<p id="id名称"> </p>
id属性的值是我们自己定义的,独一无二
[2]类class选择器：给标签加class属性并给该属性一个值（类名）.类名{。。。}
一个标签可以拥有多个类名<p class="red size40"> </p>
[3]标签选择器
p{
color:red;
}
-复杂选择器
[1]交集选择器：一个标器选择器后边跟一个类选择器或者一个ID选择器，中间不能有空格
div.mycolor{....} 类别为mycolor的层才会被选中，应用该样式
div#mydiv{....}id为mydiv的层才会被选中，应用该样式
[2]并集选择器：就是多个选择器以逗号相连，只满足其中之一都会被选中
div,p,h1,div.mycolor,div#mydiv{.....]
[3]后代选择器（包含选择器）
是以空格相连的多个选择器，外层的选择器写在内层的选择器前面
根据元素的后代关系来作为选择的筛选条件
div p{...}
<div> <p> </p> </div>
-伪类选择器
<a href="http://www.baidu.com" target=“_blank”>baidu</a〉
a:hover{......}
选中的是一个状态hover,鼠标放上去才有用


-通配符选择器
用*表示,选中了所有的元素

*{....}

-构造文本
pt: point 大概1/71寸
px：屏幕的一个像素点
pc：pica,大约6pt. 1/6寸
em:元素的font-size
1.文本缩进：text-indent:值（单位:px/百分比）；text-indent:100px/10%;
2.文本对齐：text-align:left/center/right
3.文本行高： line-height:23px/120%; 默认：normal
4.字间隔（单词）：word-spacing:10px  默认：normal
5.字母间隔：letter-spacing:5px   默认：normal
6.文字下划线：text-decoration:none/underline
7.字体：font-family:微软雅黑/宋体
多个字体用逗号隔开 font-family:"Times New Roman",Georgia,Serif
8.字体风格：font-style:normal/italic/oblique
9.字体大小：font-size:20px;
10.文本颜色：color:red/green; 比较多的是颜色代码 color:#111111;
11.文本加粗：font-weight:normal/bold/数字（400）
12.样式继承

-构造块级元素
1.宽高: width:数值
height:数值
也可用百分比，长高的设置不会被后代继承


2.背景：-背景颜色： background-color:颜色值
元素的背景颜色默认为transparent
background-color不会被后代继承
-背景图片： background-image:url(bg.gif);
如果需要设置一个背景图象，必须为这个属性设置一个url值
background-repeat：repeat-x,repeat-y,no repeat
-背景图片位置：background-position:top/bottom/left/right/center/top left
百分比 background:50%,50% 第一个表示水平，第二个表示垂直
用数值，以px为单位  background:40px 10px;
也可以混用
-背景关联： background-attachment:fixed;
总结写法：background:#00FF00 url(bg.gif) no repeat fixed center left;


3.边框：border:1px solid #ccc;
dashed表示虚线
border-left:none;
border-right:none;
border-top:none;
border-bottom:none;
4.后代元素长度大于祖辈元素的大小时候的处理方法:
overflow:可能的值:visible ; hidden; scroll ; auto ; inherit


-盒模型概念
元素性质相互转化： display: block; 内联元素变为块级元素
display: inline;块级元素变为内联元素
display: inline-block;还是块级元素，但不独占一行了
display: none;设置为none后在页面中不显示了
CSS盒模型（box model）规定了元素框处理元素内容，内边距，边框和外边距的方式，页


面中的所有标记都可以看成是一个盒子。


1.盒模型概念：content-padding-border-margin
内边距 padding padding-top:10px,padding-right/left/bottom
padding:上右下左 10px 10px 10px 10px;
padding:10px(上下) 10px（左右）；


-浮动
在一行中显示多个div元素：浮动可以理解为让某个div元素（或其它块级元素）脱离标准


流，漂浮在标准流之上。
float:left/right;
不想标准流中的元素受到浮动的影响（清除浮动）：
clear:both;
none:默认值，允许两边都可以有浮动对象
left:不允许左边有浮动对象
right:不允许右边有浮动对象
both:不允许有浮动对象


-相对定位与绝对定位
1.相对定位：相对于原来的位置进行定位（偏移）
position:relative;
left right top bottom
{ position:relative;
  left:10px;}
一旦对元素设置了position后，对left设置了就别对right设置了，只设置left或


right,top或bottom
为元素设置相对定位后，元素依然会占据原来的空间，依然在标准流中


2.绝对定位:相对于整个页面body的位置（左上角）进行定位
position:absolute;
left right top bottom
为元素设置绝对定位后，元素不会占据原来的空间，脱离了原来的队伍。


3.固定定位:不跟着滚动条移动
position:fixed;
left right top bottom


重叠元素的堆叠顺序设置：
使用z-index:对设置了相对或绝对或固定定位的元素进行堆叠顺序的设置，设置的数值越


大即堆叠在越上层，该属性可以是负值
z-index:100;(数值)


-构造列表
1.构造列表
将ul或ol设置为
list-style:none;


实现文字上下居中：把height值和line-height值设置为一样
ul.list li{
height:31px;
border-bottom:1px solid #dedede;
width:130px;
line-height:31px;
color: #3c3c3c;
font-size:14px;
text-indent:35px;
}


-布局（框架）
1.固定浮动布局
用固定的值将元素的长度设置为固定不变，然后配合浮动的技术实现整个页面的布局
网页的主要内容一般都是在我们浏览器的中间位置展示的


块级元素怎么相对于父元素居中：元素需要设置长度，元素左右的外边据设置为auto即可
元素都可以看成是盒子，都有自己默认的边距


居中： margin-left:auto;
margin-right:auto;
或是 margin:0px auto;