黑马程序员技术交流社区

标题: 【石家庄校区】就业班_JavaEE_day02_css [打印本页]

作者: 风中的消逝    时间: 2018-5-3 15:23
标题: 【石家庄校区】就业班_JavaEE_day02_css
就业班_JavaEE_day02_css
一 定义
   css 层叠样式表  
   html中修饰内容的样式功能太弱,并且布局不灵活。所以用 div + css 来解决上面二个问题。文件以.css结尾。
   
二  css 与  html 的3中结合方式
        1  写在每个标签的style的属性中   行内
        2  写在head体中    <style > 样式内容 </style> 页面内
        3  写在head体中   通过<link href="css/demo.css" type="text/css" rel="stylesheet"/> 引入外部的css文件。 外部
        注意:type="text/css" rel="stylesheet" 不能缺少,否则不生效。
        
三   基本选择器 (选择器的作用就是将标签进行分类。)
        元素选择器;  
        class选择器 (通过标签的class属性) .class名称;   class属性可以写多个。用空格分开 class="title title1 title2"
        id选择器(通过标签的id属性) #id名称。 id名称一般唯一。
        优先级依次增高;

四   扩展选择器
        
        分组选择器  div,p{} 用来同时修饰piv和p标签。
        属性选择器  input[type="text"]
        后代选择器  div p {}    用来修饰div下所有层级的p标签
        子选择器     div > span   用来修饰div下一层级的span标签
        相邻兄弟选择器  h1 + p {}    用来修饰h1后面出现的p,并且h1和p要拥有相同的父元素。
      
五  元素的某一个样式最终以那个样式为准。
        1 就近原则+优先级
        2 id选择器> class选择器> 元素选择器
        3 定义在元素内的style属性优先级最高。
        
        元素的多个样式组合起来就构成了元素整体的样式。
   
六  盒子模型  
      边框 border; 内边距 padding; 外边距 margin;
        
七  DIV+ 悬浮  float: left , right
     DIV默认独占一行。
     左浮动  float: left
     右浮动 float: right
     清除浮动 clear:both
     注意:清除漂浮 只影响下面最近的一个div
   
八 定位 position

absolute、fixed  和 relative的区别
absolute、fixed 这二个都是绝对定位,会将div从文档流拖出,后续div会补位。 relative是相对定位  不从文档流拖出,后续div不会补位。
absolute 和 fixed 的区别
absolute 相对于页面。如果有滚动条,向下滚动的时候 会消失。   fixed相对于窗体,如果有滚动条,向下滚动时不会消失,相当于固定住了。


九 伪类
   a:link  a:visited  a:hover a:active 有顺序要求 按照这个顺序来写。
   ul li{
                display:inline 水平罗列;none 隐藏;block 显示;
    }
    可以用来设置超链接的水平罗列。







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2