关于CSS样式的笔记

整理于CSS笔记：
 关于CSS作用：A.快速维护页面元素的样式属性
     B.弥补HTML元素的属性不足
 CSS又被称作层叠样式表。
 
关于CSS的元素属性：
 一：
  首先是长度单位：A.宽度、高度用px(像素)，也可以用%(百分比)。建议使用固定值：width:200px;height:200px;
  B.字体大小用pt(磅)表示
  其次就是颜色单位：A.颜色的直译英文名称，如：red(红)、green(绿)、blue(蓝).....
  B.十六进制表示法：#ff0000
  C.简写十六进制：#f00
  D.RGB表示法：rgb(255,0,0)
  E.百分比RGB：rgb(100%,0%,0%)
 
 二：
1.宽度和高度：
  大部分元素都会用到这两个属性-------> width(设置宽度)、height(设置高度)
例：width:200px;height:200px;
2.边框：
  border属性，设置边框的宽度、线性、颜色
  <table>,<ul>,<ol>,<div>,<p>......都有线性这个属性，我们最多用到的无疑就是在<table>和<div>中了。
  表格(table)和盒子(div)因为看不到它的大小，我们一般都会用border设置显示出边框线
例：border:2px solid red;
  这样我们可以看到一个2个像素的红色实线出现在你的表格中。这样就可以清晰的看到表格样式了。
  在border中还可以给上下左右单独设置边框线：
border-top:宽度 线型 颜色;border-bottom:宽度 线型 颜色;
border-right:宽度 线型 颜色;border-left:宽度 线型 颜色;
  线性我们有三种：none(无)|solid(实线)|dotted(点划线)
3.内边距
  就是设置表格或者盒子内的边距，可以设置单独上下左右和边框相同，这里不列举。
例：padding-top:5px;上侧内边距
padding:5px;四个方向的内边距都是5px
padding:5px(上) 5px(左右) 5px(下);
padding:5px(上) 5px(右) 5px(下) 5px(左);
4.外边距
  设置外部的边距，可单独设置上下左右。
例：margin-top:5px;上侧外边距
margin:0 auto;(让外编剧为0，auto为网页自动计算居中)
margin:5px(上下) 5px(左右);
margin:5px(上) 5px(左右) 5px(下);
margin:5px(上) 5px(右) 5px(下) 5px(左);
5.控制元素的显示方式属性
  可以控制元素不显示，或者以什么方式显示出来。如果不显示在此元素style中加入即可：
例：dispaly:none(不显示)|inline(内联对象)|block(块级对象);
  HTML的标记种类为----->内联对象：不能自然换行
块级对象：可以自然换行
  默认为块级对象：<p>,<div>,<hn>,<ul>,<ol>,<li>.....
6.背景样式
  可以设置背景图片，背景颜色，图片的平铺方式，背景图片的位置
设置背景样式(哪个部分不需要可以忽略不用写)：
例：background:背景颜色 背景图片 平铺方式 水平位置 垂直位置
A.背景颜色就是color，上面有书写方式。
B.背景图片----> url(图片地址)   一定要写 url 然后括号中写上图片地址
C.平铺方式:no-repeat(不平铺)|repeat-x(x轴平铺)|repeat-y(y轴平铺)
D.水平位置(left|center|right)
E.垂直位置(top|center|bottom)
7.浮动样式
  使表格或者盒子中的内容全部靠左或者全部靠右，一把导航页面都需要用到
例:float:left|right;
8.文本样式
  line-height:5px;设置行高
  text-indent:99px;设置首行缩进--------->首行缩进一般用于把按钮上的文本向后隐藏
  text-align:left|center|right;设置水平对齐方式
  cursor:pointer;设置浏览器中鼠标形状
  font-weight:normal|bold;设置文本加粗效果
  text-decoration:none|underline;设置文本下划线样式----->一般用于把超链接的下划线取消
9.列表样式
  list-style:样式 url(图片地址) 位置(inside|outside);
  我们一般只设置一项，就是样式，其余可以忽略不写。
例：list-style:none;把列表前面的实心圆或空心圆取消。用于ul,ol
10.***定位属性***
  定位属性----->position:fixed(固定的)|absolute(绝对)|relative(相对);
  我们先说固定(fixed):固定定位根据屏幕所定位，但是会遮住下面的文本。所以我们通常很少用。
A.相对定位(relative):相对定位是子盒子根据父盒子定位，父盒子移动，子盒子移动。
这就是父盒子<--- <div>
这就是子盒子<---  <div></div>
                </div>
  子/父盒子可以不用是div元素，也可以是p,li,ul,ol.....
B.绝对定位(absolute):绝对定位根据屏幕左上角定位。一般我们用绝对定位都是用在相对定位的子盒子中
我们现在body中做出这么一个盒子：
<div id="div1">
<ul>
 <li>div中的li1</li>
 <li>div中的li2
  <div id="subDiv">
   <p>段落p1</p>
   <p>段落p2</p>
   <p>段落p3</p>
  </div>
 </li>
</ul>
</div>
然后我们在head中写个CSS样式：
<style type="text/css">
/*去除内外边距*/
body,p,div,h1,h2,h3,h4,h5,h6,ul,ol,li{margin:0;padding:0;}
ul,ol{list-style: none;}
/*给父盒子一个宽高，边框线，然后自动居中*/
#div1{
width: 205px;
height: 30;
margin: 0 auto;
border: 2px solid #f00;
}
/*我们让父盒子中的li元素向左浮动，内边距为5像素，并且相对定位*/
#div1 li{
float: left;
margin: 5px;
position: relative;
}
/*因为我们在li元素中写了subDiv，所以subDiv中的所有元素会对其中的li元素定位。li元素变为屏幕的左上角，subDiv只能在此li元素中。这时我们就可以做出很多网站中鼠标放到菜单上的下拉选项了。*/
#subDiv{
position:absolute;
top: 18px;
left: 0px;
}
</style>