css基础（简陋）学习

最新推荐文章于 2024-09-22 01:18:08 发布

流萤free

最新推荐文章于 2024-09-22 01:18:08 发布

阅读量275

点赞数 4

文章标签： css

本文链接：https://blog.csdn.net/weixin_46331127/article/details/117547711

版权

CSS实训004

一、样式
二、选择器
三、盒子模型

一、样式

CSS作为修饰，把页面做的漂亮好看，我们称之为样式，样式分为三种：内联样式，内部样式以及外部样式。下面我们介绍一下这三种样式。

（一）内联样式

设置在标签内部，但是作为CSS，这种用法不推荐使用。

<h1 style="color: purple;">今天天气很好！</h1> 
<!-- 内联样式不推荐使用 -->

（二）内部样式

适用于在同一网页内，在<head>标签内使用<style>标签

语法：选择器 + { } 大括号里面写样式内容。

注意：<style>样式表里不支持HTML语法规则，在HTML里面的注释规则与样式表里不一样，样式表里的注释语法：CTRL + /
/*  注释内容 */

（三）外部样式

外部样式就是创建一个CSS文件，后缀名为：.css

在html文件中，头部链接css文件。

<link rel="styleSheet" href="CSS简介.css">

其实就是将内部样式，<style>中的样式内容移到css文件中，在css文件中写样式内容。

以上就是三种样式类型，其中内联样式不需要选择器，直接对该位置的标签进行修饰；外部样式和内部样式都需要选择器来选择。

二、选择器

推荐你们去阅读这一篇关于选择器的blog
https://blog.csdn.net/runnerxin/article/details/61429588
我把我的笔记再分享一波，希望对你由一丢丢帮助：
在这里插入图片描述

三、盒子模型

从一个元素的内容区往外走，首先会踫到padding，然后是border，最后是margin，这3个东东就像是3层盒子套住了内容区，我们把它称为盒模型 (Box Model)。

如下图，帮助你更好的理解盒子模型

在这里插入图片描述

下面举两个例子来讲讲margin：

（1）设置外层DIV的宽、高，但未设置内层DIV的宽度：

<body style="margin:0px;">

    <div style="border:10px solid #000; margin:10px; padding:10px; background-color:#CF3; height:50px; width:50px;" >
       
        <div style="background-color:#FFF;height:50px;" ></div>
    </div>
  
  </body>

结果如下：
在这里插入图片描述
（2）设置内层DIV的宽、高，未设置外层DIV的大小。

<body style="margin:0px;">

    <div style="border:10px solid #000; margin:10px; padding:10px; background-color:#CF3; float:left;">
  
      <div style="background-color:#FFF; width: 50px; height:50px;"></div>
  
    </div>
  
  </body>

运行结果：
在这里插入图片描述
总结一哈：
a) 一个元素实际占据的横向空间宽度 = 内容区宽度 width + padding + border + margin，纵向高度类似。（对于块标签特指float时）

b) 若为元素设置一个大于 0 的margin-left值，元素会连同边框一起向右偏移，而设置一个大于 0 的padding-left值，元素内容区会相对左边框向右偏移。同样，设置大于 0 的margin-top和padding-top可令元素向下偏移。

充分利用此特性，可进行元素定位（页面布局），这也是传说中的DIV+CSS 网页布局的重要基础。

c) margin和padding可以设置为负值(小于 0 的值)，此时元素将向左/上偏移. 有时设置为负值可有意外惊喜哦！！！

最后附上一个自己写的不完全的关于css基础代码：

<style>
    .num div,h2{
        margin:0px;
        }

    div{
        border:1px solid white;
        width: 500px;
        height: 600px;
        background: white;
    }

    h2{
        font-size: 18px;
        font-weight: bold;
        color: seashell;
        line-height: 35px;
        text-indent: 2em;
        background:#0f7cbf;
    }

    h3{
        font-size: 14px;
        font-weight: bold;
        line-height: 30px;
        background:lightblue;
    }

    h3 a{
        text-decoration: mediumvioletred;
    }

    h3 a:hover{
        text-decoration: navajowhite;
        color:cornflowerblue;
    }

    p a{ 
        font-family:"宋体"; text-decoration:none;color:#666666;
        }

    p a:hover{
        text-decoration: none;text-decoration:underline;
        color:coral;
    }
</style>
<body>
    <div class="num">
        <h2>家用电器</h2>
        <h3><a href="#">大家电</a></h3>
        <p><a href="#">平板电视  洗衣机  冰箱</a></p>
        <p><a href="#">空调  烟机/灶具  热水器</a></p>
        <p><a href="#">冷柜/酒柜  消毒柜  家庭影院</a></p>

        <p><h3><a href="#">生活电器</a></h3></p>
        <p><a href="#">电风扇  净化器  吸尘器</a></p>
        <p><a href="#">净水设备  挂烫机  电话机</a></p>
        
        <h3><a href="#">厨房电器</a></h3>
        <p><a href="#">榨汁机  电压力锅  电饭煲</a></p>
        <p><a href="#">豆浆机  微波炉  电磁炉</a></p>
       
        <h3><a href="#">五金家装</a></h3>
        <p><a href="#">淋浴/水槽  电动工具  手动工具</a></p>
        <p><a href="#">仪器仪表  浴霸/排气  灯具</a></p>
        
    </div>
</body>