大数据WEB阶段（三）CSS

CSS

一、概述

1. css： 层叠样式表 ， 可以用来美化html页面 。可以实现html代码和设置样式的css代码的分离 。增强了页面的显示能力。

二、在html中引入css样式的方式

1. 内嵌式

   1. 大多数便签都可以具有style属性 ， 可以通过style属性为当前标签设置样式 。

   2. 这种设置方式不推荐大量使用， 会造成页面结构的混乱 ， 不理与后期的维护及扩展 。

      <div style="border:10px solid red; font-size:50px">
          这是一个div
      </div>
      

2. 内联式

   1. 样式定义在head内部 ， 可以提供一个style标签 ， 在style标签内可以选中元素进行修饰。（选择元素是通过选择器实现的 ，下面有详细介绍）

   2. 这种方式将所有的css代码放在一个 style标签内部统一管理 。 初步实现了html与css代码分离

      <style type="text/css" media="screen" id="test">
          #d1{
              border:10px solid green;
              font-size:10px;
          }
      </style>
      

3. 外联式

   1. 通过head标签下的link标签可以引入外部的css文件

   2. 这种方式是将所有的css代码放在一个独立的文件中进行统一管理 ，真正实现了html与css的分离

      <link rel="stylesheet" href="demo.css" />
      

三、div、span、p标签

• 这三个标签都可以看做是一个容器 ， 可以用来包裹其他的html内容 ， 被包裹起来的内容形成了一个组 ， 可以通过css样式对这一组的内容统一设置样式 。
• div : 独占一行， 标签可以把文档分割为不同的独立的部分
• span ： 并非独占一行， 多个span会并排排列 ，直到一行排满才会换行 。 该标签 用于组合文档中的行内元素 。
• p： 独占一行 ， 但是元素会自动在其前后创建一段空白 ， 是段落标签 。
• 元素的类型：
  
  • 块级元素 ： 默认情况下会独占一行 ， 如： div 、p 、 h1~h6 、hr
  • 行级元素 ： 默认情况下 ， 多个元素可以处在同一行 ， 如： span、input 、font

四、选择器

1. 选择器可以在html中选中想要修饰的标签 ， 进而进行修饰 。

2. 基本选择器：

   1. 标签名选择器

      1. 通过标签的名称选中相应的标签

         格式：元素名{} ， 如div{}
         
             <div>ddd</div>
         

   2. 类选择器

      1. 通过标签上的class属性 ， 可以把标签设置为一个类别 ，而后通过类选择器进行选择后修饰

         格式： .c1{ /*css属性*/  key:value;}
         
             <div class="c1">ddd</div>
             <span class="c1">span</span>
             <p class="c1">p</p>  
         

   3. ID选择器

      1. 通过标签上的ID属性 ， 可以为标签设置编号 ， id的值在整个html文档中是独一无二的 ， 可以通过id选择器选中标签的id进行修饰 。

         格式：#id{css属性}   如：#c{}
         
             <div id="c">dddddd</div>
         

3. 扩展选择器

   1. 后代选择器

      1. 在父选择器选中的元素内部 ， 再选中指定的后代元素进行修饰 。

         要求：选中所有div下所有的span标签
         格式：div span{}
         
         <div>
             <span>s1</span>
             <span>s2</span>
             <span>s3</span>
         </div>
         

   2. 子元素选择器

      1. 在父选择器选中元素的内部 ， 选中指定的子元素进行样式的修饰 。

         要求： 只选中 父元素层下一层的子元素 ，而不选中父元素的孙子元素
         格式： 父元素>子元素{} 如： div>span
         
             <div>
                 <span>s1</span>
                 <div>
                     <span>s2</span>
                 </div>
             </div>
         注意 ： 只能选中s1 而选不中s2 . 
         

   3. 分组选择器

      1. 一次选中多个标签来统一设置样式 。

         要求： 同时对div ， span 进行设置
         格式： div,span{}
         
         <div>ddd</div>
         <span>sss</span>
         

   4. 属性选择器

      1. 通过元素的属性选中元素进行修饰 。

         要求：只对提交按钮进行修饰
         格式：元素名[属性名=属性值]{}  可以只写属性名而不写属性值， 表示选中有该属性的元素  如： input[type="submit"]{}
         
             <input type="text" />
             <input type="password" />
             <input type="submit" />
         

   5. 相邻兄弟选择器

      1. 如果两个元素具有相同的父元素 ， 并且是紧挨着的 ， 这两个元素就是相邻兄弟元素 ，可以通过兄元素A选中第元素B

         要求： 选中同一div中与span紧邻的后一个元素
         格式： 大哥+小弟 如：#s1+span{}
         
         <div>
             <span id="s1">ss</span>
             <span>s22</span>
         </div>
         

   6. 伪元素选择器

      1. 伪元素选中的不单单是元素的本身 ， 而是选中不同状态下的同一元素

      2. 状态：

         1. :link –> 表示元素未被点击时的状态
         2. :hover –> 表示鼠标悬停在元素上时的状态
         3. :active –> 表示被点击时的状态

         4. :visited –> 表示被点击之后的状态

            要求：对超链接不同状态的样式进行修饰
            css: a:link{}
                a:hover{}
                a:active{}
                a:vidited{}
            
            html:  <a href="#">超链接</a>
            

五、外边距、边框 、内边距

1. 外边距： margin

   1. margin-top:上边距
   2. margin-left: 左边距
   3. margin-bottom ：下边距
   4. margin-right: 右边距
   5. margin：1px 2px 3px 4px ; /*上 右 下 左*/
   6. margin：1px 2px ; /*上下  左右*/
   7. margin：1px;  /*上下左右*/
   8. 注意：垂直外边距合并的现象:外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
   

2. 边框：border

   1. border: 5px solid green;
   2. border-top: 5px solid green;
   3. border-bottom: 5px solid green;
   4. border-left: 5px solid green;
   5. border-right: 5px solid green;
   

3. 内边距： padding

   1. padding-top: 20px;
   2. padding-left: 20px;
   3. padding-bottom: 20px;
   4. padding-right: 20px;
   5. padding: 20px 1px 2px 4px; /* 上 下 左 右 */
   6. padding: 20px 2px;/*上下 左右*/
   7. padding: 20px;/*上下左右*/
   

六、常用CSS属性

1. 元素类型的补充
   
   1. 块级元素
      
      1. 默认情况下, 块级元素可以独占一行
      2. 块级元素可以设置宽和高
      3. 如果不设置宽度: 其中宽是默认填满父元素, 高是由内容决定(由内容撑起来)
      4. 如果设置, 就是设置的宽和高.给块级元素设置的外边距/边框/内边距都会起作用
   2. 行级元素
      
      1. 默认情况下, 多个行内元素可以处在同一行
      2. 不可以设置宽和高, 其中宽和高由内容决定
      3. 给行内元素设置的左右外边距/边框/内边距都会起作用, 但是上下外边距将不会起作用!
2. display属性 – 设置元素的显示方式
   
   1. block: 块级元素的默认值
   2. inline: 行内元素的默认值
   3. inline-block: 既具备行内元素的特性(可以同行显示), 也具备块级元素的特性(可以设置宽高)
   4. none: 用来隐藏一个元素, 这种方式的隐藏是真的隐藏了, 元素在原位置不再占用空间
   5. visibility: hidden 这种方式也可以隐藏一个元素, 但是这种隐藏只是元素不显示了, 在原位置仍然占用空间（很少用到）
3. text-aglin属性 – 设置元素中文本水平对齐方式
   
   1. left ： 默认 左对齐
   2. right ： 右对齐
   3. center： 居中对齐
   4. justify： 两端对齐
4. 字体属性
   
   1. font-size： 字体尺寸
   2. font-weight： 字体加粗
   3. font-family： 字体样式
   4. color： 字体颜色
   5. line-height： 行高
   6. text-decoration： 下划线
5. 背景属性
   
   1. background-color： 背景颜色设置
   2. background-image： 背景图片设置
   3. background-repeat：设置背景图像是否及如何铺排
   4. background-position：设置或检索对象的背景图像位置