CSS

最新推荐文章于 2022-05-14 16:15:00 发布

chuyuce5742

最新推荐文章于 2022-05-14 16:15:00 发布

阅读量55

点赞数

文章标签：嵌入式

原文链接：https://my.oschina.net/xia0828/blog/904009

版权

一.css:

层叠样式表，修饰html的语言，调高代码复用性，
使html内容与样式分离，便于后期维护

二.css的引入方式：

            嵌入式：css代码嵌入到html标签里去
                           <div style="color:red;font-size:10px;"></div>
            内部样式：在<head>标签中使用style标签进行css标签的引入
                            <style type="text/css">
                                   div{color:red;font-size:100px;}
                           </style>
            外部样式：将css样式单独抽取成一个css文件，谁用就让谁引用
                    1.创建css文件，将css文件属性写在里边
                    2.在<head>标签中引入css文件
                        <link rel="stylesheet" type="text/css" href="css路径"

web项目中的绝对路径：href="<%=request.getContextPath()%>/css/style.css"

三.css选择器：

            1.标签选择器
            2.id选择器（id具有唯一性）
                            #id的值{css属性}
                            <div id="div2">我是一个行级块</div>
            3.类选择器
                   .class的值{css属性}
                           <div class="div1">我是一个行级块</div>
            4.选择器的优先级：id>.class>标签

四.css属性

            1.文字属性
                font-size:大小、font-family:字体、font-color：颜色
            2.文本属性：
                   color、text-docoration：下划线
                                   属性：none underline
                   text-align:对齐方式
            3.背景属性
                   background-color
                    background-image
                    background-repeat:平铺方式（默认平铺）
                           no-repeat、repeat-y、repeat-x(横向）
            4.列表属性
                    list-style-type:列表项前的小标志
                    list-style-image:列表前的小图片 url(图片地址）
            5.尺寸属性
                   width：宽度
                    heigth：高度

div居中： margin:0 auto;

div内容居中：height:200px;

line-height:200px; 设置与行高一致

            6.显示属性
                   display:
                       none:隐藏
                        block：块级显示
                        inline：行级显示
            7.浮动属性
                       float：left、right
                           clear：清除浮动

            8.盒子模型
                    边框：border-(width、color、style（线型）
                                          （left、right、bottom、top）
                   padding:边框与内部元素之间的距离
                        padding：1px 2px 3px 4px(上右下左）
                        padding：1px 2px（上下/左右）
                        padding：1px 2px 3px（上、左右、下）
                        padding-left、top、bottom、right
                    margin:
                        与padding设置相同

转载于:https://my.oschina.net/xia0828/blog/904009