CSS基础-DAY2

首页 > 代码库 > CSS基础-DAY2

2024-11-15 07:42:02 203人阅读

CSS属性操作

CSS文本

文本颜色

<head>
    <style>
        p{
            /*color:#8B5742 ;色码表*/    
            color: RGBA(255,0,0,0.5);    /*调色，红绿蓝透明度*/
            /*color: blue;颜色名*/
        }
    </style>
</head>
<body>
    <p>i am p</p>
</body>

水平对齐方式：text-align 属性规定元素中的文本的水平对齐方式

<head>
    <style>
        div{
            /*background-color: wheat;*/
            /*width: 100%;*/
            /*height: 300px;*/
            /*line-height: 300px;*/
            text-align: center;     /*居中显示*/
            /*text-align: left;居左显示*/
            /*text-align: right;居右显示*/
            /*text-align:justify;两端对齐*/
        }
    </style>
</head>
<body>
    <div>Everyone has their own dreams, I am the same. But my dream is not a lawyer, not a doctor, not actors, not even an industry. Perhaps my dream big people will find it ridiculous, but this has been my pursuit! My dream is to want to have a folk life! I want it to become a beautiful painting, it is not only sharp colors, but also the colors are bleak, I do not rule out the painting is part of the black, but I will treasure these bleak colors! Not yet, how about, a colorful painting, if not bleak, add color, how can it more prominent American? Life is like painting, painting the bright red color represents life beautiful happy moments. Painting a bleak color represents life difficult, unpleasant time. You may find a flat with a beautiful road is not very good yet, but I do not think it will. If a person lives flat then what is the point? Life is only a short few decades, I want it to go Finally, Each memory is a solid.</div>
</body>

文本其他属性

<!--font-size: 10px; 　　字体大小-->

<!--line-height: 200px;   文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比，底线基线中线顶线概念-->

<!--vertical-align:－4px  设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效-->

<!--text-decoration:none       text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线-->

<!--font-family: ‘Lucida Bright‘    字体-->

<!--font-weight: lighter/bold/border/   字体宽度-->

<!--font-style: oblique 　　字体样式斜体-->

<!--text-indent: 150px;      首行缩进150px-->

<!--letter-spacing: 10px;  字母间距-->

<!--word-spacing: 20px;  单词间距-->

<!--text-transform: capitalize/uppercase/lowercase ; 　　文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写-->

背景属性

<head>
    <style>
        .c1{
            border: 1px solid red;      /*边框：1像素、实线、红色*/
            /*background-color: plum;   背景色*/
            width: 100%;
            height: 600px;
            background-image: url("http://dig.chouti.com//images/logo.png");      /*背景图片*/
            background-repeat: no-repeat;     /*平铺方式，默认横向纵向同时铺*/
            background-position:center center;     /*对齐方式，居中。right top（20px 20px）*/
            /*background: url("http://dig.chouti.com//images/logo.png") no-repeat center center;  简写方式*/
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>

边框属性

<head>
    <style>
        .c1{
            width: 100px;
            height: 200px;
            /*border-style: dashed;     类型*/
            /*border-color: red;    红色*/
            /*border-width: 5px;    宽度*/
            /*border:3px dashed red;    简写方式：宽度、类型、颜色*/
            border-right: 3px dashed red;   /*单独的方向*/
            /*border-top-style:dotted;*/
            /*border-right-style:solid;*/
            /*border-bottom-style:dotted;*/
            /*border-left-style:none;*/
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>

列表属性

<head>
    <style>
        ul{
            /*list-style-type: square;    列表项标志类型*/
            /*list-style-image: url("a.jpg");     将图像设置为列表项标志*/
            /*list-style-position：inside;   !*默认outside，设置列表中列表项标志的位置。*!*/
            list-style: none;   /*简写属性，设置为空*/
        }
    </style>
</head>
<body>
<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
</ul>
</body>

外边距和内边距

盒子模型

技术分享

margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。

padding: 用于控制内容与边框之间的距离；

Border(边框): 围绕在内边距和内容外的边框。

Content(内容): 盒子的内容，显示文本和图像。

margin属性

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

单边外边距属性

margin:10px 20px 20px 10px；

        上边距为10px
        右边距为20px
        下边距为20px
        左边距为10px

margin:10px 20px 10px;

        上边距为10px
        左右边距为20px
        下边距为10px

margin:10px 20px;

        上下边距为10px
        左右边距为20px

margin:25px;

        所有的4个边距都是25px

简写属性

margin: 0 auto;

居中

padding属性

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。

设置同margine；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .outer{
            margin: 0 auto;
            width: 80%;

        }

        .content{
            background-color: darkgrey;
            height: 500px;

        }

        a{
            text-decoration: none;
        }

        .page-area{

            text-align: center;
            padding-top: 30px;
            padding-bottom: 30px;
            background-color: #f0ad4e;

        }

        .page-area ul li{
            display: inline-block;
        }


       .page-area ul li a ,.page-area ul li span{

            display: inline-block;
            color: #369;
            height: 25px;
            width: 25px;
            text-align: center;
            line-height: 25px;

            padding: 8px;
            margin-left: 8px;

            border: 1px solid #e1e1e1;
            border-radius: 15%;

        }

       .page-area ul li .page-next{
           width: 70px;
           border-radius:0
       }


       .page-area ul li span.current_page{
           border: none;
           color: black;
           font-weight:900;
       }

       .page-area ul li a:hover{

           color: #fff;
           background-color: #2459a2;
       }


    </style>
</head>
<body>

<div class="outer">

<div class="content"></div>

<div class="page-area">

             <ul>

                 <li><span class="current_page">1</span></li>
                 <li><a href="http://www.mamicode.com/#" class="page-a">2</a></li>
                 <li><a href="http://www.mamicode.com/#" class="page-a">3</a></li>
                 <li><a href="http://www.mamicode.com/#" class="page-a">4</a></li>
                 <li><a href="http://www.mamicode.com/#" class="page-a">5</a></li>
                 <li><a href="http://www.mamicode.com/#" class="page-a">6</a></li>
                 <li><a href="http://www.mamicode.com/#" class="page-a">7</a></li>
                 <li><a href="http://www.mamicode.com/#" class="page-a">8</a></li>
                 <li><a href="http://www.mamicode.com/#" class="page-a">9</a></li>
                 <li><a href="http://www.mamicode.com/#" class="page-a">10</a></li>
                 <li><a href="http://www.mamicode.com/#" class="page-a page-next">下一页</a></li>

             </ul>

</div>

</div>


</body>
</html>

页码实例

思考1:body的外边距

边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下， body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了，为了验证这一点，加上：

body{
    border: 1px solid;
    background-color: cadetblue;
}

>>>>解决方法：

body{
    margin: 0;
}

思考2：margin collapse（边界塌陷或者说边界重叠）

1、兄弟div：
上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值

2、父子div：
if 父级div中没有border，padding，inlinecontent，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin；

<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body{
            margin: 0px;
        }

        .div1{
            background-color: rebeccapurple;
            width: 300px;
            height: 300px;
            overflow: hidden;

        }
        .div2{
            background-color: green;
            width: 100px;
            height: 100px;
            margin-bottom: 40px;
            margin-top: 20px;
        }
        .div3{
            background-color:teal;
            width: 100px;
            height: 100px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div style="background-color: bisque;width: 300px;height: 300px"></div>

<div class="div1">

   <div class="div2"></div>
   <div class="div3"></div>
</div>

</body>

</html>

View Code

>>>> 解决方法：

overflow: hidden;

CSS基础-DAY2

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > CSS基础-DAY2

CSS基础-DAY2

看完仍有疑问？有类似问题直接问程序猿