CSS结构样式

一.CSS:为了优化页面
  1.语法结构：选择器，属性，值（selector {property: value}）


   选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你    希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围    这样就组成了一个完整的样式声明（declaration）：body {color: blue}
    
  2.css的三种使用方式：
   2.1 行内样式：行内样式:使用标签内部的style属性给每一个标签设置样式
缺点:一次只能给一个标签设置样式,如富哦标签比较多,工作量比较大,而且更 改起来比较麻烦


   2.2 内部样式：使用style标签,给style标签中写css的样式代码
缺点:css代码和html代码混杂在了一起,管理起来比较麻烦 


   2.3 外部样式（推荐使用）:在html代码的外部,创建一个css文件,css文件中写独立 的css代码,使用的时候,直接将css文件导入到html文件中即可
<link href="1.css" rel="stylesheet" />
href  : 表示外部css文件的位置
rel: 表示关联的是样式表


  3.css中的选择器


    3.1 标签选择器：语法：标签名称{css代码}
div{font-size:14px;color:#F00;}     <div id="d1">div1</div><br />


    3.2 类选择器：语法：.类名{css代码}
.c1{font-size:16px;color:#00F;} <div class="c1">div2</div><br />


    3.3 id选择器：语法：#id值{css样式}
#d1{font-size:24px;color:#600;} <div id="d1">div1</div><br />


    3.4 并集选择器：当多个选择器中的css代码相同的时候，我们可以使用并集选择器，对这些css代码进行抽取
.c1,.c2{font-size:16px;color:#00F;}
    
    3.5 交集选择器：选中某一个标签中的子标签
div span{font-size:36px;color:#006;}
<div><span>div中的span标签</span></div><br />

注意：当一个标签同时被标签选择器和类选择器选择时，类选择器优先！！！


    4.伪类选择器：可以控制标签在不同的状态下展示出的不同的样式


    link:没有访问过的状态
hover:鼠标划过的状态
active:鼠标按下没有松开的状态
visited:已经访问过的状态


设置伪类选择器的时候,设置不同状态是有一定的顺序的(link-visited-hover-active)
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的


   
    5.css文本属性和值
设置字符间距
letter-spacing:4px;

设置文本的位置
text-align:center;

给文本设置上划/下划/中划线
text-decoration:underline;

设置词语和词语之间的间距,设置之前需要分词,每个词语之间使用空格隔开
word-spacing:20px;




     6.css字体


  设置字体
font-family:"黑体";

设置字体大小
font-size:36px;

设置字体样式*/
font-style:italic;

设置字体的粗细
font-weight:bold;

字体设置的简写属性,一定要注意属性的顺序
font:italic bold 36px "黑体";


      7.css背景


给标签设置背景颜色
background-color:#006;

将背景设置为图片
background-image:url(05.%E7%B4%A0%E6%9D%90/mm.jpg);

设置背景图片的重复规则
repeat:默认显示的重复方式,x,y方向都重复
repeat-x:设置图片仅在x方向上重复
repeat-y:设置图片仅在y轴方向上进行重复
no-repeat:图片不重复

background-repeat:no-repeat;

设置图片的位置
background-position:top right ;

设置图片背景的简写样式
background:#006 url(05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top right;


      8.css列表




设置列表选项前面的样式
list-style-type:circle;

将图片设置为列表选项的一个标记
list-style-image:url(05.%E7%B4%A0%E6%9D%90/start.jpg);8?

列表样式的简写属性
list-style:url(05.%E7%B4%A0%E6%9D%90/start.jpg);


      9.css表格


  合并表格的边框，所有的边框都消失
border-collapse:collapse;


    
      10.css边框
 
width:300px;
height:200px;
 
    /*
必须首先设置边框的样式之后,边框的颜色才可以显示
border-color:#F00;

给四个边框非别设置不同的颜色

border-top-color:#0F0;
border-bottom-color:#063;
border-left-color:#9C0;
border-right-color:#F00;


设置边框的样式
border-style:solid;
实线:solid*/
border-left-style:solid;

点划线:dotted
border-top-style:dotted;

双实线:double
border-right-style:double;

虚线:dashed
border-bottom-style:dashed;

设置边框的宽度
border-width:5px;
border-left-width:1px;
border-top-width:3px;
border-right-width:6px;
border-bottom-width:9px;


     */
 
使用简写属性,设置边框样式:booder:border-width border-style border-color
这个简写属性必须牢记
border:2px solid #F00;




     11.盒子模型


width:盒子的宽度
height:盒子的高度
border-width:盒子的厚度
padding:设置盒子的内边距（盒子的内容距离盒子内边框的距离）
margin:设置盒子的外边距（盒子外边框和另一个盒子的外边框距离）