http协议与css

最新推荐文章于 2024-09-02 16:50:21 发布

小于转大暴雨

最新推荐文章于 2024-09-02 16:50:21 发布

阅读量514

点赞数

文章标签： http css 前端

本文链接：https://blog.csdn.net/qq_52783355/article/details/125873059

版权

一. HTTP协议

http(HyperText transport protocol)协议
超文本传输协议
客户端和服务器端进行交互遵循的通信协议
在这里插入图片描述

HTTP报文的分类有两种：请求报文和响应报文。顾名思义，请求报文就是客户端向服务端发送请求的信号，响应报文就是服务端响应处理后回传给客户端的信号。
请求报文:请求头请求行请求体空体
请求头: Authorization Content-Type
请求行:get url http1.1(http1.0,http1.1,http2)
请求体:get携带参数不再请求体中在url地址栏. post 携带参数在请求体中
响应报文:响应头响应行响应体
响应头:Content-Type
响应行：http1.1 200 OK(状态码描述)
响应体:{status:200,message:“更新成功”,data1.:[{name:“zhangsan”},{}]}
GET和Post方法区别?
Get:1.get携带的参数携带在url地址栏数据保密不安全 2.传输的数据大小有限制一般不超过1024个字符
Post:1.post携带的参数携带在请求体中,数据保密安全 2.传输的数据大小没有限制, 一般可以传输大量数据

二. css

什么是CSS
CSS (Cascading Style Sheets) 层叠样式表，是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。

<style>
        /* css语法 声明块 */
        /* 标签/其他选择器{
            属性名:属性值;
            属性名:属性值;
        } */
        /* 属性名和属性值之间使用:隔开
            多对属性之间使用;隔开
            最后一对属性可以不加; */
        div{
            font-size: 28px;
            background-color: red;
        }
        /* 速记写法 可能有四个属性或者是多个属性合并成一个 */
        div{
            /* border:width style color */
            border: 1px solid black;
        }
        /* 利用css绘制三角形 */
        .one{
            width: 0;
            height: 0;
            border: 100px solid white;
            border-bottom: 100px solid red;
        }
    </style>

三. css引入方式

1. 内联样式(行内样式)

    <div style="background-color: blue;">我是一个div</div>
    <div style="color:red;font-size:14px">
    设置字体颜色为红色，并且字体大小为14px
    </div>

2.内部样式表

<style type="text/css">    
  p{        
    color:red;        
    background-color:yellow;    
  }
</style>

3.外部样式表

<link rel="stylesheet" type="text/css" href="文件的路径"/>

使用@import引入css文件

<style>
        @import url(./style.css);
        div{
            font-size: 28px;
        }
    </style>

引入方式的优先级:
行内样式>内部样式/外部引入
就近原则：哪一种设置方式距离元素最近，谁的优先级更高；

四. css选择器

1. 标签选择器

格式:

<style>
        div{
            color: aqua;
            font-size: 29px;
        }
    </style>

注意点: (1). 标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签. (2). 标签选择器无论标签藏得多深都能选中. (3). 只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input…)
2. id选择器
格式:

<style>
        #one{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="one">我是一个div</div>

注意点:
1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
2.在同一个界面中id的名称是不可以重复的
3.在编写id选择器时一定要在id名称前面加上#
4.id的名称是有一定的规范的
4.1 id的名称只能由字母/数字/下划线，a-z 0-9 _
4.2 id名称不能以数字开头
4.3 id名称不能是HTML标签的名称，不能是a h1 img input …
5.在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为id是留给js使用的
3.class选择器
格式:

<style>
   .div3{
      background-color: blue;
   }
</style>
</head>
<body>
    <div class="div3">我是一个div</div>
    <!-- 设置多个类名 空格隔开 -->
    <div class="div3 div4">我是多类名div</div>
</body>

4. 后代和子元素选择器
格式:

<style>
        /* 后代(子代+其他后代)选择器 空格隔开 */
        div p{
            color: red;
        }
        /* 子代 子代元素选择器 >隔开(直接子代 不包括其他后代) */
        .div1>p{
            color: aqua;
        }
    </style>
</head>
<body>
    <div class="div1">
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <div>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
        </div>
    </div>
</body>

5.交集选择器

<style>
        p.p1{
            color: red;
        }
    </style>
</head>
<body>
    <p class="p1">第1个标签</p>

6. 并集选择器

<style>
        .p1,#p2{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <p class="p1">第1个标签</p>
    <p id="p2">第2个标签</p>
</body>

7.兄弟选择器

<style>
        /* css2选择器 相邻的被选中 */
        /* .p1+p{
            color: aquamarine;
        } */
        /* css3兄弟选择器 所有的兄弟被选中 */
        .p1~p{
            color: antiquewhite;
        }
    </style>
</head>
<body>
    <p class="p1">第1个标签</p>
    <p>第2个标签</p>
    <p>第3个标签</p>
    <p>第4个标签</p>
    <p>第5个标签</p>
</body>

8.伪类选择器

<style>
        /* 伪类选择器 适用范围:同级别 */
        p:first-child{
            color:aqua ;
        }
        p:last-child{
            color: darkorange;
        }
        p:nth-child(5){
            color: lavenderblush;
        }
        p:nth-child(odd){
            color: blue;
        }
        p:nth-child(even){
            color: brown;
        }
        p:nth-child(3n+1){
            /* 3n+1 1 4 7 */
            color: chartreuse;
        }
        /* 同级别同类型 第一个 */
        div:first-of-type{
            color: cornflowerblue;
        }
    </style>
</head>
<body>
    <p>第1个标签</p>
    <p>第2个标签</p>
    <p>第3个标签</p>
    <p>第4个标签</p>
    <p>第5个标签</p>
    <p>第6个标签</p>
    <p>第7个标签</p>
    <p>第8个标签</p>
    <!-- <div>我是一个div</div> -->
    <div>我是一个div</div>
    <div>我是一个div</div>
    <div>我是一个div</div>
</body>

9.动态伪类选择器

<style>
        /* 动态伪类 */
        /* 如果链接没被访问过 */
        a:link{
            color: black;
        }
        /* 用户已经访问过 */
        a:visited{
            color: aqua;
        }
        /* 鼠标悬浮 */
        a:hover{
            color: blue;
        }
        /* 鼠标按住不动 */
        a:active{
            color: coral;
        }
        /* 顺序:link visited hover active */
        /* 否定伪类 :not(类名) */
        p:not(.p2){
            color: palegoldenrod;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">百度一下,你就知道</a>
    <p>第1个标签</p>
    <p class="p2">第2个标签</p>
    <p>第3个标签</p>
    <p>第4个标签</p>
</body>