大数据正式8

大数据正式8

CSS

• css概述
  • 层叠样式表，美化HTML界面
  • HTML是盖房子，css就是装修
  • html与css分离，增强网页的显示能力
• 在HTML页面中引入css样式的方式
  • （1）通过标签上的style属性引入css样式

    <div style="border:1px solid ref;font-size:40px;">这是div</div>   
    

  • （2）通过style标签引入css样式

    <style>
        span{
            border:1px solid yellw;
            font-size:12ps;
            background-color:#ff00ff;
        }
    </style>
    

  • （3）通过链接文件引入css文件

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

• div,span,p标签--“容器”标签，包裹其他的html内容
  • div：独占一行，可以把文档分割为独立的，不同的部分
  • span：非独占一行，并排排列，直到排列完一行才能到下一行（换行），组合行内元素
  • p：独占一行，但是元素会自动在其前后创建一些空白，是段落标签
• 元素类型

  1. 块级元素：独占一行
  2. 行内元素：同一行多个元素
  

• 选择器

  • 基本选择器
    1. 标签名（元素名）选择器--通过标签的名字选中指定名称的标签进行样式的修饰

       1. 格式：
           元素名{}
       2. 例子
           span{}
       

    2. 类（class）选择器--通过标签上的class属性来选择

       1. 格式：
           .类名{}
       2. 例子：
           huml中：<p class="p1"></p>
           css中：.p1{}
       

    3. ID选择器--通过标签上的id属性，可以为标签设置编号，独一无二，然后修饰标签

       1. 格式
           #id值{}
       2. 例子
           html中：<p id="p1"></p>
           css中：#p1{}
       

  • 扩展选择器

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

       1. 格式
           父类选择器 后代选择器{}
       2. 例子
           html中：
               <div id="div1">
                   <span>
                   </span>
               </div>
           css中：#div1 span{}
       

    2. 子元素选择器--父类选择器中元素的内部，选中指定的子元素进行样式的修饰

       1. 格式
           父选择器>子元素选择器{}
       2. 例子
           html中：
               <div id="div1">
                   <span></span>
               <div>
           css中：#div1 > span{}
       

    3. 分组选择器--给多个选择器统一设置样式

       1. 格式
           选择器1，选择器2，选择器3{}
       3. 例子
           html中：
               <div id="div1"></div>
               <div id="div2"></div>
               <div id="div3"></div>
           css中：   
               div1,div2,div3{}
       

    4. 属性选择器--通过属性条件筛选出元素进行修饰

       1. 格式
           选择器[属性条件...]{}
       2. 例子
           html中：
               <input type="text" name="input1">
           css中：
               input[type="text"]{}
       

    5. 相邻兄弟选择器--如果两个元素具有相同的父元素，并且是紧挨着的

       1. 格式
           大哥+小弟{}
       2. 例子
           html中：
               <input type="text1" name="input1"/>
               <p></p>
           css中：
               input+p{}
       

    6. 伪元素选择器--伪元素本身元素选择的不仅是元素本身，还包括元素的状态

       :link
       :hover
       :zctive
       :visited
       

• 外边距/边距/内边距
  • margin(外边距)
    1. margin-top:20px;
    2. margin-botttom:20px;
    3. margin-left:20px;
    4. margin-right:20px;
    5. margin-10px 20px 1px 2px;//上，下，左，右
    6. margin-botttom:10px 20px;//上下，左右
    7. margin-botttom:20px;//上下左右
    8. 注：垂直外边距合并现象：当两个垂直外边距相遇时，他们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的最大者。
  • border（边框）
    1. border:1px solid green;
    2. border-top:1px solid green;
    3. border-bottom:1px solid green;
    4. border-left:1px solid green;
    5. border-right:1px solid green;
  • padding（内边距）
    1. padding-top:10px;
    2. padding-bottom:10px;
    3. padding-left:10px;
    4. padding-right:10px;
    5. padding:10px 1px 2px 3px;//上，下，左，右
    6. padding:10px 4px;//上下，左右
    7. padding:10px;//上下左右
• 常用属性
  • 块级元素：可以设置宽和高，如果不设置宽度，默认填满父元素，高是由内容决定的
  • 行级元素：默认多个元素可以在一行，不可以设置宽和高，由内容决定；左右外边距/边框/内边距 都会起作用，但是上下外边距将不会起作用！
• display属性--设置元素的显示方式
  • block：块级元素的默认值
  • inline：行内元素的默认值
  • inline-block：可以同行显示，也可以设置宽高
  • none：隐藏一个元素，真的隐藏，不占用空间
    • visibility：hidden也可以隐藏一个元素，但是占用空间
• text-align属性--设置元素中文水平对齐方式
  • left：默认值，左对齐
  • right：右对齐
  • center：居中对齐
  • justify：两端对齐
• list属性
  • list-style-type:none/disc/square/circle...
• 字体属性
  • font-size:字体尺寸
  • font-weight:字体加粗
  • font-family:字体样式
  • color:字体颜色
  • line-height:行高
  • text-decoration:下划线
• 背景属性
  • background-color:背景颜色设置
  • background-image:背景图片设置
  • background-repeat:设置背景图像是否重复及如何铺排
  • background-position:设置或检索对象的背景图像位置
• 其他
  • frameset：定义一个框架集
  • frame：定义框架集中的一个窗口

css简单案例

•