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

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  进行定位

    

波比源码 – 精品源码模版分享 | www.bobi11.com
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!

波比源码 » JAVAEE——css层叠样式表知识点总结

发表评论

Hi, 如果你对这款模板有疑问,可以跟我联系哦!

联系站长
赞助VIP 享更多特权,建议使用 QQ 登录
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡