Css学习第一阶段学习_css 学习-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_73687730/article/details/132075930

优先级

内部标签大于其他

引入标签和内部标签实行就近原则

<!--内部标签-->
    <style>
        h1{
           color:red;
          }
    </style>
<!-- 引入标签-->
    <link rel="stylesheet" href="../firststyle.css">
</head>
<body>
<!-- 行内标签-->
  <h1 style=" color:green;">我是标题</h1>

2.选择器

2.1基本选择器（important）

1.标签选择器能够且必须统一修饰同一标签标签名{}

  <style>
    h1{
       color:red;
       }
  </style>
</head>
<body>
 <h1>你好呀</h1>
</body>

2.类选择器能够跨标签进行修饰格.类名{}

<!--  类选择器的格式 .class{}
      可以多个标签归类
-->
  <style>
    .hua{
         color:black;
        }
  .tian{
        color:green
       }
  </style>
</head>
<body>
 <h1 class="hua">标题一</h1>
 <h1 class="tian">标题二</h1>
 <h1 class="hua">标题三</h1>
 <p class="tian"> 你好呀 </p>

3.id选择器每一个html都只有一个id，id选择器修饰一个 #id名字{}

    <style>/*
            id选择器的格式: #id的名称{}
            */
        #hua{
             color:red;
             }
    </style>
</head>
<body>
    <h1 id="hua">标题1</h1>
    <h1>标题2</h1>
    <h1>标题3</h1>
    <h1>标题4</h1>
    <h1>标题5</h1>
</body>

当多个选择器修饰同一个时 id选择器>类选择器>标签选择器

2.2层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       /*后代选择器 body p{
              background:green;
              }
        */
        /* 子选择器  body>ul{
              background:green;
              }
        */
        /*相邻兄弟选择器
            .active+ p{
                 background:red;
                }
         */

          /*通用选择器  .active ~p{
                 background:green;
                      }
          */
    </style>
</head>
<body>
     <p class="active">p1</p>
     <p>p2</p>
     <p>p3</p>
     <ul>
         <p>p4</p>
         <p>p5</p>
         <p>p6</p>
     </ul>
     <p>p7</p>
     <p>p8</p>
</body>
</html>

2.3伪类结构选择器

<style>
  /*ul子类li最后一个元素*/
    ul li:first-child{
        background:red;
    }
    /*选中li的最后一个孩子*/
    ul li:last-child{
        background: yellow;
    }
    /*定位到p的父元素然后选中父元素的第一个*/
    p:nth-child(1){
        background:green;
    }
    /*定位到p父元素，然后选中p类型的第二个*/
    p:nth-of-type(2){
        background: wheat;
    }

</style>

2.4属性选择器（重要）

=绝对等于

*=包含于

^=以什么开头

$=以什么结尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         a
        {
            float:left;
            display:block;
            height:50px;
            width:50px;
            border-radius:10px;
            text-align: center;
            color:gainsboro;
            text-decoration:none;
            margin-right:5px;
            font:bold 20px/50px Arial;
        }
        a[href^="http"]{
            background: green;
        }
        a[class$="active"]
        {
            background:yellow;
        }
    </style>
</head>
<body>
  <p class="demo">
      <a href="https://www.baidu.com" class="links item first" id="first">1</a>
      <a href="http://sjsj.4399.com" class="links item active" target="_blank" title="test">2</a>
      <a href="https://www.baidu.com" class="links item active" >3</a>
      <a href="https://www.baidu.com" class="links item active" >4</a>
      <a href="https://www.baidu.com"  class="links item active" >5</a>
      <a href="https://www.baidu.com" class="links item active" >6</a>
      <a href="https://www.baidu.com" class="links item active" >7</a>
  </p>
</body>
</html>

3.美化网页

3.1 span标签

将突出的文字用span包裹起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <style>
    #first {
    font-size:50px;
    }
  </style>
    <title>Title</title>
</head>
<body>
欢迎学习
 <span id="first">Java</span>
</body>
</html>

3.2字体样式

font-size（字体大小）

font-width（字体粗细）

font-style 字体风格（斜体，楷体）

font-family 字体大礼包里面包含了所有

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body h1
        {
         font-family: "微软雅黑 Light";
         color: red;
         font-size:50px;
         font-style: normal;
         font-weight: bolder;
        }
    </style>
    <title>Title</title>
</head>
<body>
   <h1>客货邮一体化发展的问题主要包括以下几点：</h1>
   <p>1. 航班资源分配不合理：目前，国内很多航空公司都是以客运为主，货运和邮件物流的航班资源较少，导致货物和邮件运输的时间和效率无法得到保障</p>
   <p>2. 运输网络不完善：客货邮一体化需要建立一个完善的运输网络，包括覆盖全国各地的航线和物流渠道，而目前大部分地区的物流基础设施和运输网络都还不够完备，导致物流效率低下。</p>
</body>
</html>

3.3文本样式

1.颜色 color

2.装饰 line-decoration

3.文本对其方式 text-align

4.首行缩进方式 text-indent

5.行高 line-height

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    body h1
    {
      color: red;
      /*左右居中*/
      text-align: center;
      /*块高*/
      height:200px;
      /*行高，当行高和块高一样时就可以上下居中*/
      line-height:200px;
    }
    p
    {
      /*段落首行缩进*/
      text-indent: 2em;
    }
    .p2
    {
      /*下划线，中划线，上划线*/
      /*text-decoration:underline;*/
      /*text-decoration:line-through ;*/
      text-decoration: overline;
    }
  </style>
  <title>Title</title>
</head>
<body>
<h1>客货邮一体化发展的问题主要包括以下几点：</h1>
<p class="p1">1. 航班资源分配不合理：目前，国内很多航空公司都是以客运为主，货运和邮件物流的航班资源较少，导致货物和邮件运输的时间和效率无法得到保障</p>
<p>2. 运输网络不完善：客货邮一体化需要建立一个完善的运输网络，包括覆盖全国各地的航线和物流渠道，而目前大部分地区的物流基础设施和运输网络都还不够完备，导致物流效率低下。</p>
<p class="p2">12345</p>
<p class="p3">12345</p>
<p class="p4">12345</p>
</body>
</html>

3.3 文本样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    body h1
    {
      color: red;
      /*左右居中*/
      text-align: center;
      /*块高*/
      height:200px;
      /*行高，当行高和块高一样时就可以上下居中*/
      line-height:200px;
    }
    p
    {
      /*段落首行缩进*/
      text-indent: 2em;
    }
    .p2
    {
      /*下划线，中划线，上划线*/
      /*text-decoration:underline;*/
      /*text-decoration:line-through ;*/
      text-decoration: overline;
    }
  </style>
  <title>Title</title>
</head>
<body>
<h1>客货邮一体化发展的问题主要包括以下几点：</h1>
<p class="p1">1. 航班资源分配不合理：目前，国内很多航空公司都是以客运为主，货运和邮件物流的航班资源较少，导致货物和邮件运输的时间和效率无法得到保障</p>
<p>2. 运输网络不完善：客货邮一体化需要建立一个完善的运输网络，包括覆盖全国各地的航线和物流渠道，而目前大部分地区的物流基础设施和运输网络都还不够完备，导致物流效率低下。</p>
<p class="p2">12345</p>
<p class="p3">12345</p>
<p class="p4">12345</p>
</body>
</html>

3.4超链接伪类

hover就是悬停的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hi
        {
          text-decoration: none;
        }
        .hi:hover
        {
            color:orange;
            font-size:50px;
        }
    </style>
</head>
<body>
<p>
<a href="https://www.baidu.com">
    <img src="kaishi.jpg" alt="帅气的华" title="点击领取大帅哥">
</a>
</p>
<p>
    <a href="#" class="hi">刘中天</a>
</p>
<p>
    <a href="#" class="hi">价格:无价</a>
</p>
</body>
</html>

3.5列表

list-style

decimal数字
circle空心圆

none什么也没有

square正方形 */

#name
{
    width:300px;
}
.title
{
 font-size:18px;
 font-weight:bold;
 text-indent:40px;
 line-height:35px;
}
/*

circle空心圆
none什么也没有
square正方形

*/
ul li
{
    height:30px;
    list-style:none;
    text-indent:2px ;
}
ul
{
    background:grey;
}
a
{
    text-decoration: black;
    color: black;
}
a:hover
{
    color: orange;
    text-decoration: underline;
}

3.7背景

背景颜色

背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1600px;
            height: 1000px;
            border: 1px solid red;
            background-image:url("../kaishi.jpg");
            /*默认是全部平铺的*/
        }
        .div1{
            background-repeat: repeat-x;
        /*水平平铺*/
        }
        .div2{
            background-repeat: repeat-y;
        /*垂直平铺*/
        }
        .div3{
            background-repeat: no-repeat;
        /*没有平铺，只有一个图片*/
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

4.盒子模型

4.1什么是盒子模型

margin：外边距

padding：内边距

border：边框

4.2

边框的颜色

边框的粗细

边框的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*box三个属性 大小，样式，颜色*/
        body{
            /*body总是有一个默认的外边距*/
            margin:0;
            padding: 0;
            text-decoration: none;
        }
        #box
        {
            width: 300px;
            border: 1px solid red;
        }
        form
        {
            background: green;
        }
        div:nth-of-type(1)input{
            border:3px solid black;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
       <span>姓名：</span>
        <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>
</body>
</html>

4.3内外边框

margin，padding:里面由四个参数(上右下左（顺时针）)，分别为上下左右，如果只输入一个就代表上下左右都为该数，如果输入两个，上下为第一个，左右为第二个

上面中的大小由margin+padding+border+内容

4.3 圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:50px;
            height:50px;
            margin: 30px;
            background: black;
            border-radius: 50px 0px 0px 0px ;
        }
    </style>
</head>
<body>
    <div>

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

5.浮动

块元素可以包含行元素，但是行元素不能包含块元素

一般排版都在标准文本流，有些图片文本不想按照标准文本流，就需要用浮动来实现

display：inline-block，block

float：right（右浮），left（左浮），none（啥都没有）

6.父级原框坍塌

7.定位

1.相对定位相对于原来的位置（他任然在标准文档流中）

position：relative；

top上

left左

bottom下

right右

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #father{
      width: 300px;
      height: 300px;
      border: 2px solid red;
    }
    div a
    {
     text-decoration: none;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      background: #f1c0d6;
      color: white;
      display: block;
    }
    a:hover
    {
      background: blue;
    }
    .a2,.a4
    {
      position: relative;
      left: 200px;
      bottom: 100px;
    }
    .a5
    {
      position: relative;
      left: 100px;
      bottom: 300px;
    }
  </style>
</head>
<body>
<div id="father">
<a href="#" class="a1">链接1</a>
<a href="#" class="a2">链接2</a>
<a href="#" class="a3">链接3</a>
<a href="#" class="a4">链接4</a>
<a href="#" class="a5">链接5</a>
</div>
</body>
</html>

2.绝对定位

1.没有父级元素定位的前提下，相对于浏览器定位

2.有父级元素的时候，根据父级元素进行定位

3.在父级范围内移动

相对于父级或浏览器的位置进行定位，不在标准文档流内，原来的位置不被保留

3.固定定位

3.层级

z-index