1.   css

      老师的博客：http://www.cnblogs.com/yuanchenqi/articles/6856399.html

      选择器：找到想要改变的标签

      css的功能：渲染和布局

2.   css的四种引入方式

      第一种：标签属性，这是利用了标签的style属性，控制标签的一些样式。这种方式不需要寻找标签，只会影响自己的属性。

      语法如下：

　　例子：

我是谁

      第二种：在head标签添加style标签,利用选择器进行标签属性的设置。

　　　　　　selector {

　　　　　　　　　　key：value;

　　　　　　　　　　}

      例子：

p  {            color: #FF0000;            background-color: #BD8E00;            font-size: 32px;        }        div {             color: #BD8E00;             background-color: #55A0E6;             font-size: larger;        }   　　　　影响所有的p标签，影响所有的div标签。

　   第三种：采用css文件引入的方式，把css文件放到其他地方去。这样多个html文件，都可以引用一个css。

　　在head标签中添加。

       第四种：采用导入的方式，不常用，所以不需要具体研究，如果遇到，再进行研究。

3.    选择器的使用：

　　　基本选择器

                  

　　基本选择器：

　　　　标签选择器：上面的第二种css方式，就是css的标签选择器的使用方法。

　　　　ID  选择器：

#who {    color: black;}
     
          爱爱爱
     
 ID是前面加#

　　　　class 选择器：

.name {    color: #aaffaa;}
我是杨建波
  在标签里面定义好class的名称。 class是前面加.

　　　　*  选择器：  通配选择器，找到所有的标签。

*{    background-color: black;} 所有的标签都会变，包括body标签

　　        

           层级选择器

1 2 3 4 5 6 7 8 9

E,F   多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔      :div,p { color: #f00; }   E F   后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 :li a { font - weight:bold;｝   E > F   子元素选择器，匹配所有E元素的子元素F            :div > p { color: #f00; }    E  +  F   毗邻元素选择器，匹配所有紧随E元素之后的同级元素F  :div  +  p { color: #f00; }    E ~ F   普通兄弟选择器（以破折号分隔）                 :.div1 ~ p{font - size:  30px ; }

注意，关于标签嵌套：

一般，块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。需要注意的是，p标签不能包含块级标签。

 

　　　　后代选择器     .c1 空格 .c3

    
             
         
     
    
      
       我是杨建波        
       
哈哈哈
    
      
    
      
aaaaaa
    
      
       我是王艳和
      
     
     
          我是股数为
     
 .c1 的后代中的p标签。      .c1空格p{}

　　

    
             
         
     
    
      
       我是杨建波        
       
哈哈哈
    
      
    
      
aaaaaa
    
      
       我是王艳和
      
     
     
          我是股数为
     
 .c1的后代c3都会受到影响。

　　　　子代选择器    .c1 > .c3

　　　

    
             
         
     
    
      
       我是杨建波        
       
哈哈哈
    
      
    
      
aaaaaa
    
      
       我是王艳和
      
     
     
          我是股数为
     
 .c1>.c3   在c1的儿子找叫c3的标签

　　　　毗邻选择器：.c1+标签   一定要跟c1紧挨着的标签

    
             
         
     
    
      
       我是杨建波        
       
哈哈哈
    
      
    
      
aaaaaa
    
      
       我是王艳和
      
     
aaaaa
     
          我是股数为
     

　　

　　　　兄弟选择器：.c1~标签   只要是兄弟标签都会变

    
             
         
     
    
      
       我是杨建波        
       
哈哈哈
    
      
    
      
aaaaaa
    
      
       我是王艳和
      
     
aaaaa
     
          我是股数为
     

　　多元素选择器：  

    
             
         11111
     
          我是股数为
     
22222 span.c3 找到span标签，并且class为c3的标签      span要在c3的前面 . 表示且的关系。 如果表示或的关系，使用逗号表示。

　　

　　标签有多个类，在标签属性里面，可以指定多个class.

    
             
         11111
     
          我是股数为
     
22222 定义class的时候，使用空格隔开类名。

 4.      属性选择器

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

E[att]          匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。                  比如“[cheacked]”。以下同。）   p[title] { color: #f00; }     E[att = val]      匹配所有att属性等于“val”的E元素   div[ class = ”error”] { color: #f00; }     E[att~ = val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素                  td[ class ~ = ”name”] { color: #f00; }   E[attr^ = val]    匹配属性值以指定值开头的每个元素                                      div[ class ^ = "test" ]{background: #ffff00;}   E[attr$ = val]    匹配属性值以指定值结尾的每个元素    div[ class $ = "test" ]{background: #ffff00;}   E[attr * = val]    匹配属性值中包含指定值的每个元素    div[ class * = "test" ]{background: #ffff00;}

如何找到自定义的属性？

    
         
         
             
     
      egg
     
egg
     
      egg2
     
     
      alex
     

 

4. 伪类选择器

anchor伪类：专用于控制链接的显示效果

'''        a:link（没有接触过的链接）,用于定义了链接的常规状态。        a:hover（鼠标放在链接上的状态）,用于产生视觉效果。                a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。                a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。                伪类选择器 : 伪类指的是标签的不同状态:                           a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态                a:link {color: #FF0000} /* 未访问的链接 */                a:visited {color: #00FF00} /* 已访问的链接 */                a:hover {color: #FF00FF} /* 鼠标移动到链接上 */                a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }'''

    
             
         hello world! 一旦悬浮到span标签，就会执行hover后面的代码。

注：只有块级标签才能设置宽和高。　

    
             
         
     
          aaaaa
     
 使用css添加字符。而不需要在body里面添加标签。

　　例子：

    
             
     
    
      
       top
      
    
      
       bottom
      
     

before after伪类 

:before    p:before       在每个
元素之前插入内容      :after     p:after        在每个
元素之后插入内容     例：p:before{content:"hello";color:red;display: block;}

    
         
         
             hello world
     
     
    
      
    
      
     

5.   选择器的优先级

　　　　脱离规则：  color: #BD8E00; !important;           使用!important;

　　　　标签属性 1000

　　       id       100

　　　　class  10

　　　　标签   1

　　　　当有ID选择器的时候，不会跟class选择器和标签进行比较。

例子：

    
             
         
this is P

 例子：

    
         
         
             
this is P
     
    
      
        
       
            
        
P2
        
       
    
      
    
      
P1
     
     
     
    
      
PPP
    
      span
     

 

6.   继承父类(与字体相关的样式)

    
             
         
this is P
 子孙按照父类的设置进行继承。

7.　  css属性

　　　文本属性操作：

　　　　　color:   三种方式：(十六进制     RGB     颜色的英文单词    

                  text-align 属性规定元素中的文本的水平对齐方式。

• • • left      把文本排列到左边。默认值：由浏览器决定。
    • right    把文本排列到右边。
    • center 把文本排列到中间。
    • justify 实现两端对齐文本效果。

　　　　　            注意：line-height: 200px;    让这个值等于行高。 

例子：

 

     
CSS text-align 水平居中
2017 年 5 月 17 号
    有个落拓不得志的中年人每隔三两天就到教堂祈祷，而且他的祷告词几乎每次都相同。第一次他到教堂时，    跪在圣坛前，虔诚地低语：“上帝啊，请念在我多年来敬畏您的份上。让我中一次彩票吧！阿门。”    几天后，他又垂头丧气回到教堂，同样跪着祈祷：“上帝啊，为何不让我中彩票？我愿意更谦卑地来    服侍你，求您让我中一次彩票吧！阿门。”又过了几天，他再次出现在教堂，同样重复他的祈祷。如此周而    复始，不间断地祈求着。到了最后一次，他跪着：“我的上帝，为何您不垂听我的祈求？让我中一次彩票吧！    只要一次，让我解决所有困难，我愿终身奉献，专心侍奉您……”就在这时，圣坛上发出一阵宏伟庄严的声    音：“我一直垂听你的祷告。可是最起码？你也该先去买一张彩票吧!”
注意： 重置浏览器窗口大小查看 "justify" 是如何工作的。

 

　　     其他操作：

/*font-size: 10px;    文字大小line-height: 200px;   文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比vertical-align:－4px  设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效text-decoration:none       text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线font-family: 'Lucida Bright'font-weight: lighter/bold/border/font-style: obliquetext-indent: 150px;      首行缩进150pxletter-spacing: 10px;  字母间距word-spacing: 20px;  单词间距text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写*/ a标签默认有一个字体和颜色。

背景属性

属性介绍

• background-color
• background-image
• background-repeat
• background-position

1 2 3 4 5 6 7

background - color: cornflowerblue   background - image: url( '1.jpg' );   background - repeat: no - repeat;(repeat:平铺满)   background - position: right top（ 20px  20px ）;

简写

1	background: #ffffff url('1.png') no-repeat right top;

     　　　　

边框属性操作：

border-color: #FF0000;  　　　　　　　border-radius: 50%;     边框的弧度               border-width: 1px;      边框的宽度             border-style: solid;    边框的样式

　　　　　　　也可以用一句话：border: 1px solid red;

边框-单独设置各边

1 2 3 4

border - top - style:dotted; border - right - style:solid; border - bottom - style:dotted; border - left - style:none;

 

列表属性

　　　　　　ul

                     常用的是： list-style: none

　　　　　　例子：　　　　

       
               
             
     
     
      
111
     
      
222
     
      
333
 
     
  

1 2 3 4 5

list - style - type          设置列表项标志的类型。 list - style - image    将图象设置为列表项标志。 list - style - position 设置列表中列表项标志的位置。   list - style          简写属性。用于把所有用于列表的属性设置于一个声明中

ist-style-type属性指定列表项标记的类型：

1	ul {  list - style - type : square; }

使用图像来替换列表项的标记:

1 2 3

ul {       list - style - image: url('');              }

　　　　　

dispaly属性

• none
• block
• inline
• inline-block

none(隐藏某标签)

1	p{display:none;}

注意与visibility:hidden的区别：

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

block(内联标签设置为块级标签)

1	span {display:block;}

注意：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。　

inline(块级标签设置为内联标签)

1	li {display:inline;}

inline-block

选择内联标签的属性： 按内容占空间

选择块级标签的属性：可以设置长宽

display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决：

1 2 3 4

#outer{              border:  3px  dashed;              word - spacing:  - 5px ;          }

例子一:

    
         
         
             span
     
      DIV1
     
     
      DIV2
     

例子二：

    
         
         
             123

　　

8.   内边距和外边距

　　　　　 内边距：padding    内容与边框的距离

　　　　　 padding  一个值  四周都加边距

　　　　　 padding  两个值  上下    左右

　　            padding  四个值   上   右   下    左

　　　　　 padding  三个值    上     左右    下

 

　　　　　　外边距   控制元素与元素之间的距离

　　　　　　margin

　　　　　　margin-bottom     上下取最大的值

　　　　　　margin-top          上下取最大的值

　　　　　　margin-left            左右是相加

　　　　　　margin-right          左右是相加

 

margin:10px 20px 20px 10px；        上边距为10px        右边距为20px        下边距为20px        左边距为10pxmargin:10px 20px 10px;        上边距为10px        左右边距为20px        下边距为10pxmargin:10px 20px;        上下边距为10px        左右边距为20pxmargin:25px;        所有的4个边距都是25px

 

　

　　　　　　body也有外边距

　　　　　　取消body的外边距

　　　　　　

body{            border-width: 1px;            border-style: solid;            margin: 0;        }

　　例子：

    
             
         
     
      
       bbbbb
      
     

　　

 

　　　　　　overflow: hidden;    内容溢出隐藏。

9.      背景图片

　　  引入图片：background-image: url("IMG_5422.jpg");   以图片进行填充

　　  引入图片但是不填充：background-repeat: no-repeat;

　　  设置背景图片的位置：background-position: center;

　　　background-position: 100px 200px;   离左边100px,  离上边200px

　　   简写的方法：background: url("IMG_5422.jpg") no-repeat center brown;

 

           取图片的一部分

　　　移动背景图片:  利用浏览器进行调整。

10. 　 css属性操作之定位position.

　　    position:  fixed    以可视窗口为参照物   完全脱离文档流

　　　例子： 定位到右下角

　　

    
             
         
     
     
      返回顶部
     

　　　　position:relative    相对定位    以自己原来的位置为参照物   不脱离文档流

　　　　position:absolute   绝对定位    脱离文档流     以最近的已定位的祖先元素，如果没有已定位的祖先元素，就以body为参照物。祖先元素里面有position。

11.   positon应用

　　        京东轮播图