前端课堂(三)

css的基本样式

 font-size: 设置元素的字体大小

         单位:px,像素

 text-align:设置文本在元素内水平方向的位置

              值:center:水平居中

                      left / start:水平居左

                      right / end:水平居右

font-weight:设置字体加粗

                值: normal:默认值,定义标准字体

                        bold:定义加粗文本

                        bolder:特粗体,相当于strong和b的作用

                        lighter:定义细体文本

                        100-900:定义字符的粗细,400相等于默认值normal,700等同与粗体文本

text-decoration:文本装饰

                       值:none:去除文本装饰,比如a标签的下划线

                              line-through:  添加删除线

                              underline:添加下划线

                              overline:添加顶部线

text-indent:  设置段落首行缩进距离

           单位:em:相当于当前元素的字体大小

 font-family:  设置字体类型,字体家族

font-style:  设置元素字体风格

             值:normal:默认值,标准的字体样式

                    italic:定义斜体文本

                    inherit:规定当前元素继承父元素的字体样式

                    oblique:文本为倾斜的状态

width   :   宽度

     单位:px,像素

  百分比:%,占父元素宽度的百分之多少

      注意:当元素没有设置宽度时,块元素宽度时父元素的100%,行内元素宽度靠文本内容撑开

height :  高度

     单位:px,像素

  百分比:%,占父元素宽度的百分之多少(要父元素在有固定高度的情况下使用)

     注意:单元素没有设置宽度时,靠内容撑出高度,内容是浮动元素/绝对定位/固定定位除外

background-color :  设置元素的背景颜色

line-height: 设置行高,行间距

           作用:让文本在行间距内垂直居中,不允许使用负值

             值:numal:设置合理的行间距

                    numder:设置数字,此数字会与字体大小相乘来设置行间距

                    百分比:相当于当前文字大小的百分比进行行间距

 letter-spacing :  字间距,设置字符与字符之间的间距

text-transform :  字体转换

                     值:uppercase:大写英文

                            lowercase:小写英文

                            capitalize:单词首字母大写

 参考代码(自由复制)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css的基本样式</title>
    <style>
            font-size: 30px;          
            text-align: center;
            text-align: left;
            text-align: right;
            
        }
        a{
            font-weight:normal;
            text-decoration:underline;
        }
        p{
            text-indent: 2em;
            font-family: "宋体";
            font-style: normal;
            line-height: 2;
        }
        span{
            font-size: 30px;
            color: fuchsia;
        }
        div{
            width: 100%;
            height: 100px;
            background-color: deepskyblue;
        }
        .div1{
            width: 200px;
            height: 400px;
            background-color: aquamarine;
            line-height: 400px;
            /* line-height: numal; */
            /* line-height: 130%; */

        }
        h3{
            letter-spacing: 20px;
            text-transform: uppercase;
        }

    </style>
</head>
<body>
    <h1>css文本样式</h1>
    <a href="https://www.baidu.com/">百度一下</a>
    <p>&emsp;&emsp;所幸皆为美好,所行不负年少。</p>
    <p>&emsp;&emsp;你的生活中,有清晨灿烂的朝阳,傍晚辉煌的<span>暮光</span>,有真心待你的好友,有爱你至深的亲人,有第一场雪时吃的一碗麻辣烫,也有捂在掌心温热的奶茶。你看,这些都是生活赋予你的,简简单单又实实在在的美好</p>
    <div>
    &emsp;&emsp;走到生命的哪一个阶段,都该喜欢那一段时光,完成那一阶段该完成的职责,顺生而行,不沉迷过去,不狂热地期待着未来,生命这样就好。不管正经历着怎样的挣扎与挑战,或许我们都只有一个选择:虽然痛苦,却依然要快乐,并相信未来
    </div>
    <div class="div1">想开一间杂货铺</div>
    <h3>第一行</h3>
    <h3>第二行</h3>
    <h3>want you to be happy. But I want to be the reason.</h3>
</body>
</html>

盒子模型

1 . 什么是盒子模型

   盒子模型(Box Model)就是把html元素本身看作是一个矩形盒子,每个矩形都是由内容(content),内边距(padding),边框(border),外边距(margin)组成,每个盒子除了有自己的大小之外,还会影响其他盒子的位置

2 . 盒子的特性:

   每个盒子都有四部分组成:内容(content),内边距(padding),边框(border),外边距(margin)

   每个属性都包括四部分:上,下,左,右

3 . 标准盒子和怪异盒子模型的表现效果的区别:

  ( 1. 标准盒子中的width值的是内容区域(content)的宽度,高值的也是内容区域(content)的高度

           标准盒子模型的大小=content+padding+border+margin

  ( 2. 怪异盒子模型中width指的内容content+内边距padding+边框border

           怪异盒子模型的大小=width(content+padding+border)+margin

元素盒子模型 

box-sizing: 盒子模型尺寸的计算;

content-box:默认值,按照标准盒子进行计算。

border-box:计算宽高时按照IE盒模型进行计算。

参考代码(自由复制)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素盒模型</title>
    <style>
        #d1{
            width: 50px;
            height: 50px;
            border: 10px solid;
            padding: 10px;
        }
        #d2{
            width: 50px;
            height: 50px;
            border: 10px solid;
            padding: 20px;
            box-sizing: border-box;
        }
        section{
            width: 100%;
            height: 50px;
            border: 5px solid red;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <br>
    <div id="d2"></div>

    <section></section>
</body>
</html>

内边距和外边距 

1. padding:内边距

      作用:能撑大盒子,调整元素内容的位置。

      距离:从元素的边框(border)开始到内部的内容(content)之间的距离。

      语法结构:

                一、属性为padding,通过值控制不同边的内边距。

                    1.一个值:同时设置四个边的内边距;

                    2.两个值:分别表示上下、左右内边距;

                    3.三个值:分别表示上,左右,下内边距;

                    4.四个值:分别表示上右下左内边距。

                二、通过属性 padding-方向 控制四个边的内边距,设置单方向内边距。

                    padding-top: 50px;

                    padding-right: 50px;

                    padding-bottom: 50px;

                    padding-left: 50px;

2. margin:外边距

         作用:元素添加外边距后会移动元素的位置,调整元素与元素之间的距离。

         距离:从自身的边框开始,到另一个元素边框之间的距离。

         语法结构:

            一、属性为margin,通过值控制不同边的外边距。

                1.一个值:同时设置四个边的外边距;

                2.两个值:分别表示上下、左右外边距;

                3.三个值:分别表示上,左右,下外边距;

                4.四个值:分别表示上右下左外边距。

            二、通过属性 margin-方向 控制四个边的外边距,设置单方向外边距。

                margin-top: 50px;

                margin-right: 50px;

                margin-bottom: 50px;

                margin-left: 50px;

 参考代码(自由复制)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内边距和外边距</title>
    <style>
        /* div{
            padding: 50px;
            width: 50px;
            background-color: #ccdf;
        } */

        #div1{
            background-color: #fcf;
            border: solid 1px;
            /* padding: 20px; */
            /* padding: 20px 40px; */
            /* padding: 20px 40px 80px; */
            /* padding: 20px 40px 80px 120px; */
            /* padding-top: 50px;
            padding-right: 50px;
            padding-bottom: 50px;
            padding-left: 50px; */
            /* margin: 50px;
            margin: 50px 100px;
            margin: 50px 100px 150px;
            margin: 50px 100px 150px 200px; */
            margin-top: 50px;
            margin-right: 50px;
            margin-bottom: 50px;
            margin-left: 50px;
        }
        .item{
            margin: 10px;
            background-color: #ccf;
            border: #fcf 1px solid;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="div1">123</div>
    <span class="item">第一块</span>
    <span class="item">第二块</span>
</body>
</html>

颜色的取值

 1 . 使用颜色名(不建议大规模使用,避免有些颜色浏览器不被解析,不同浏览器对颜色的解析有差异)

2 . 使用百分比:

     rgb:三种颜色

     三个值为最大值表示白色

     三个值为最小值表示黑色

     三个值相等显示灰色

3 . 使用数值 :

      取值范围:0~255

4 . 十六进制 :最常用的方法
 

5 . rgba : 最后一个值控制颜色的透明度

     a的取值范围:0-1,0为完全透视,1为完全不透视

 参考代码(自由复制)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色的取值</title>
</head>
<style>
    .color_neme{
        color: blue;
    }
    .percentage{
         color: rgb(5%, 99%, 99%);
    }
    .number{
        color: rgb(255, 34, 255);
    }
    .system{
        color: #0000ff;
    }
    .box{
        height: 400px;
        background-color: rgba(255, 0, 0, 1);
    }

</style>
<body>
    <div class="color_name">颜色名</div>
    <div class="percentage">百分比</div>
    <div class="numder">数值</div>
    <div class="system">十进制</div>
    <div class="box">色盘</div>
    
</body>
</html>

元素转换

1 . display : 改变元素的布局方式。

               值:

                        block:将元素转换为块元素。

                        inline:将元素转换为行元素。

                        inline-block:将元素转换为行内块元素。

                        none:隐藏一个元素,隐藏后不会显示。

2 . html标签按照布局方式可分为:

            块元素,行元素,行内块元素。

3 . 块元素特点:

            1.独占一行;

            2.可以设置宽高,

               如果不设置宽高,则显示默认宽高,如果也没有默认宽高,这显示为内容的宽高。

            3.布局方式默认为块元素:p,h1-h6等。

4 . 行元素特点:

            1.不独占一行;

            2.不能设置宽高;宽高取决于自身的内容;

                多个行元素之间会左右排列;

                一行到最后显示不下时会自动换行。

           3.布局方式默认为行元素:b,a等。

5.行内块元素特点:

            1.不独占一行;

            2.可以设置宽高;

            3.多个行内块元素之间会左右排列;

            4.一行到最后显示不下时会自动换行。

            5.布局方式默认为行内块:img,input等。

 参考代码(自由复制)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素转换</title>
    <style>
        #d1{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        #d2{
            width: 50px;
            height: 50px;
            background-color: rgb(89, 255, 0);
        }
        .bg{
            background-color: aquamarine;
            /* width: 100px;
            height: 100px; */
        }
        button{
            width: 100px;
            height: 100px;
        }

        #d3{
            width: 100px;
            height: 100px;
            background-color: #ccdf;
            margin: 0 auto;
        }
        .container{
            text-align: center;
        }

        .box{
            background-color: cadetblue;
            display: block;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="d1">qwerqwer</div>
    <div id="d2"></div>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <span class="bg">多个行元素之间会左右排列</span>
    <button>确定</button>
    <button>取消</button>

    <div id="d3"></div>

    <p class="container">
        <span class="bg">水平居中</span>
    </p>

    <span class="box">显示为块元素</span>
    <span class="box">显示为块元素</span>
    <span>山东人富商大贾</span>
</body>
</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值