前端学习第五天小白进

NEWYORK4

已于 2022-07-25 11:50:00 修改

阅读量95

点赞数 2

文章标签： css html css3

于 2022-07-23 15:48:53 首次发布

本文链接：https://blog.csdn.net/a2237464569/article/details/125948422

版权

前端学习第五天小白进

一.边框边距内补写法
二.样式引入
三.选择器

今天是学习前端的第五天，为大家带来本人今天学习的内容，主要如下：

一.边框边距内补写法

1.主要内容

margin 支持四种写法
只有一个数代表上下左右
两个数第一个代表上下第二个代表左右
只有三个数第一个代表上第二个代表左右第三个代表下
有四个数上右下左
padding 支持4种写法
只有一个数代表上下左右
两个数第一个代表上下第二个代表左右
三个数第一个代表上第二个代表左右第三个代表下
四个数上右下左

2.代码示例

<!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>Document</title>
    <style>
    *{
        margin: 0%;
        padding: 0;
        background-color: lightgreen;


    }
    .target{
        width: 100px;
        height: 100px;
        background-color: lightblue;
        border-top: 10px solid red;
        border-bottom: 20px solid lightcyan;
        border-left: 30px solid lightsalmon;
        border-right: 40px solid lightseagreen;
        border-radius: 20%;
        margin: 10px 20px 30px 40px;
        padding: 10px 20px 30px 40px;

        /* margin 支持四种写法
         只有一个数 代表上下左右
         两个数   第一个代表上下  第二个代表左右
         只有三个数 第一个代表上 第二个代表左右 第三个代表下
         有四个数   上右下左

        */
         /* 
         padding 支持4种写法
         只有一个数 代表上下左右
         两个数  第一个代表上下  第二个代表左右
         三个数  第一个代表上 第二个代表左右 第三个代表下
         四个数   上右下左

          */
    }
    .item  {
        width: 100px;
        height: 100px;

    }
    </style>
</head>

<body>
    <div class="target">
        <img class="item" src="./img/二维码2.png" alt="">

    </div>
</body>
</html>

3.运行效果

在这里插入图片描述

二.样式引入

1.主要内容

如何使用

内联属性。行内样式，属性样式
写在开始标签内部，只针对当前标签有效
style=“”
内部样式表
只针对当前html有效
把style标签写在head中
style标签中写入选择器{}
在{}中写入选择器{属性名：属性值；属性名；属性值；}
外部样式表
在css文件中编写
在css文件中写入选择器{}
在{}中写入选择器{属性名：属性值；属性名：属性值；}
在需要使用的页面内使用link标签引入在style标签上面
优先级：内联>内补>外部

2.最常用样式

颜色：color：颜色
background-color：背景色
字体：font-sise 字体大小
font-weight 字体粗细
边框：border：1px solid red 边框
：border0 radius ：圆角
外边距：margin maigin-* 外边距
内补：padding padding—-* 内补
宽高：width height 宽高
文本：text-align 水平居中 center
height=line height 垂直居中
text-decoration none 去除下划线
显示：dispaly inline 不换行
bblock 换行
inline-block 行内块
列表：list-style none去除列表样式（小圆点）

三.选择器

1.主要内容

（1）大致分类

1.* 通配符能够适配所有元素，从样式来看标签可以任意转换。
2. 标签选择器
3. class类名选择器
4. id选择器优先级最高

（2）优先级

优先级 id选择器>类名选择器>标签选择器>通配符选择器

2.代码示例

<!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>Document</title>
    <style>
        /* 通配符  能够适配所有元素*/
        /* 从样式来看 标签可以任意转换 */
        *{

            color: brown;
            margin: 0px;
            font-weight: 400;
            font-size: medium;
            text-decoration: underline;
            cursor: pointer;
        }
        /* 标签选择器 */
        h1{
            color:green;
        }
        /* class类名选择器 */
        .item{
            background-color: pink;
            margin-bottom: 10px;
        }
        /* id选择器 优先级最高*/
        #p{
            background-color: blue;
        }

        /* 
        优先级 id选择器>类名选择器>标签选择器>通配符选择器
        */
    </style>
</head>
<body>
    <h1 class="item">一级标题</h1>
    <p class="item"id="p">段落</p>
    <div class="item">一个块</div>
   
</body>
</html>