JAVAEE------css层叠样式表知识点总结

发布时间：2020-12-13 20:04:13 所属栏目：PHP教程来源：网络整理

导读：CSS 1、css概述 * Cascading Style Sheets：层叠样式表 ** 层叠：1层1层（优先级，终究以哪一个样式为准） ** 样式表：很多的属性和属性 *** 增强页面的显示效果 *** CSS将网页内容和显示样式进行分离，提高了显示功能 * 要想使用css，必须要和html在1起使用

CSS

1、css概述
   * Cascading Style Sheets：层叠样式表
   ** 层叠：1层1层（优先级，终究以哪一个样式为准）
   ** 样式表：很多的属性和属性值
   *** 增强页面的显示效果

   *** CSS将网页内容和显示样式进行分离，提高了显示功能

   * 要想使用css，必须要和html在1起使用

2、css和html的结合方式
   （1）每一个html标签都有1个属性 style，在style里面设置样式
       * <div style="background-color:red;color:green;">天之道，损有余而补不足，是故虚胜实，不足胜有余。</div>
       * 格式 style="属性名1:属性值1;属性名2:属性值2"
   （2）使用html的1个标签 <style type="text/css"> css代码 </style>
       * 1般style标签写在头标签里面
       * div {
           background-color:black;
           color:white;
       }
       * 利用场景：只是在1个页面设置这个样式，其他页面设置其他的样式

   （3）在style标签里面使用语句
       * 首先创建1个css文件
       * <style type="text/css"> @import url(css文件路径); </style>
       * <style type="text/css">
           @import url(div.css);
       </style>
       * 注意：在某些阅读器下不支持

   （4）引入外部的css文件
       * 使用头标签 link
       * <link rel="stylesheet" type="text/css" href="css_3.css" />
       * 利用场景：比如现在有1万个页面，1万个页面需要相同的样式

   ** css优先级
       * html代码加载顺序：从上到下加载
       * 1般情况下，后加载的优先级高

   ** 格式：属性名:属性值 ; 属性名:属性值;

3、css的基本选择器
   * 在哪一个标签上设置样式
   （1）标签选择器
       * 使用标签名作为选择器
       * p {
           background-color:green;
       }
   （2）class选择器
       * 每一个html标签都有1个属性class
       * .haha {
           background-color:red;
           color:green;
       }

   （3）id选择器
       * 每一个html标签都有1个属性id
       * #hehe {
           background-color:#990099;
           color:#ccff99;
       }
       * id建议不要相同，后面js获得值

   ** 优先级
       style > id > class > 标签选择器

4、css的扩大选择器
   （1）关联选择器(设置嵌套标签里面的样式)
       * <div><p>aaaaa</p></div>
       * <p>bbbbb</p>
       ** 设置div里面的p标签里面的内容

       * div p {
           background-color:blue;
       }

   （2）组合选择器（设置不同的标签具有相同的样式）
       * <div>qqqqqq</div>
       * <p>wwwwww</p>
       ** 设置div和p具有相同的样式

       * div,p {
           background-color:orange;
       }

   （3）伪类元素选择器(了解)
       * 实现1些简单的动态效果
       * 不是1个真实的选择器，css里面提供的1些选择器，可以直接使用
       ** 超链接的状态
       * 原始状态    鼠标放上去（悬停）   点击（瞬间）点击以后
           :link        :hover              :active        :visited
       * 如何记忆：
       lv ha

5、CSS的盒子模型
   * 要进行布局，首先要把数据封装到1块区域里面去（div）
   * 边框 border : border-width || border-style || border-color
       ** 上下左右 border-top border-bottom border-left border-right
   * 内边距：padding：length
       ** 有上下左右4个内边距
   * 外边距：margin：length
       ** 有上下左右4个外边距

6、css的布局（漂浮）
   * float属性:left right

7、案例：实现图文混排效果

8、css布局（定位）
   * position：absolute relative
   ** absolute：将对象从文档流中拖出，使用 left ， right ， top ， bottom 进行定位
   ** relative: 不会把对象从文档流中拖出，使用 left ， right ， top ， bottom 进行定位

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!