1.2-CSS

最新推荐文章于 2022-07-11 16:29:54 发布

_auroras_

最新推荐文章于 2022-07-11 16:29:54 发布

阅读量111

点赞数

分类专栏： java学习之路文章标签： html css css3 html5

本文链接：https://blog.csdn.net/qq_44755621/article/details/117567152

版权

java学习之路专栏收录该内容

12 篇文章 0 订阅

订阅专栏

CSS

1.什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS 1.0

CSS 2.0 DIV(块) + CSS，HTML与CSS结构分离的思想，SEO

CSS 2.1 浮动，定位

CSS 3.0 圆角，阴影，动画。。。浏览器兼容性~

CSS优势

内容和表现分离
网页结构表现统一，可以实现复用
样式丰富
建议使用独立于HTML的CSS文件
利用SEO，容易被搜索引擎收录

3种导入方式

行内样式
```
<h1 style="color: red">标题</h1>
```

内部样式

<head>
	<style>
    	/**/
        h1{
          color: green;
        }
  	</style>
</head>

外部样式

<link rel="stylesheet" href="css/style.css">

<!-- 导入式 CSS2.1 -->
<style>
	@import url("css/style.css");
</style>

2.选择器

作用：选择页面上的某一个或某一类元素

2.1 基本选择器

标签选择器
```
h1{
    
}
```
类选择器 class
```
.class_name{
    
}
```
id选择器（id唯一）
```
#id_name{
    
}
```

不遵循就近原则

id选择器>类选择器>标签选择器

2.2 层次选择器

后代选择器
子选择器
相邻兄弟选择器
通用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*后代选择器*/
        body p{
            color: green;
        }
        /*子选择器*/
        body>p{
            background: red;
        }
        /*相邻兄弟选择器：向下 同级 一个*/
        .active+p{
            background: aqua;
        }
        /*通用选择器：向下 同级 所有*/
        .active~p{
            background: darkviolet;
        }
    </style>
</head>
<body>

<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<p>p7</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>

</body>
</html>

2.3 结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
      ul li:first-child{
        background: red;
      }
      ul li:last-child{
        background: #65087d;
      }
      /*当前p元素的父级元素，选中父级元素的第一个元素，并且是当前元素才生效*/
      p:nth-child(1){
        background: aqua;
      }
      /*p的父元素，父元素下的p元素的第二个*/
      p:nth-of-type(2){
        background: blue;
      }
      /**/
      p:hover{
        color: deepskyblue;
      }
  </style>

</head>
<body>
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <p>p7</p>
  <ul>
    <li>
      <p>p4</p>
    </li>
    <li>
      <p>p5</p>
    </li>
    <li>
      <p>p6</p>
    </li>
  </ul>

</body>
</html>

2.4 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    .demo a{
      float: left;
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 10px;
      background: deepskyblue;
      text-align: center;
      color: azure;
      text-decoration: none;
      margin-right: 5px;

    }
    /*存在id属性的元素*/
    a[id]{

    }
    /*[属性名=属性值] 属性值(正则)
    */
    a[id=first]{

    }
    /*
      = 绝对等于
      *= 包含
    */
    a[class*="link"]{
      background: green;
    }
    /*选中href属性，其值以http开头的元素
      ^= 开头等于
      $= 结尾等于
    */
    a[href^=http]{

    }

  </style>
</head>
<body>
<p class="demo">
  <a href="http://www.baidu.com" class="link item first" id="first">1</a>
  <a href="" class="link">2</a>
  <a href="" class="link" id="abc"></a>
</p>


</body>
</html>

3.美化网页元素

3.1 字体样式

字体
字体大小
字体粗细
字体颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    /*
      font-family 字体
      font-size 字体大小
      font-weight 字体粗细
      color 字体颜色
    */
    body{
      font-family:Arial, 楷体;
    }
    p:nth-of-type(2){
        font-weight: bold;
    }

    .font{
        font:oblique 100 12px 楷体;
    }
  </style>
</head>
<body>
<h1>题目</h1>
<p>第一段</p>
<p>第二段</p>
<p>What we do today</p>
<p class="font">font 设置</p>

</body>
</html>

3.2 文本样式

颜色 color
文本对齐方式 text-align: center;
首行缩进 text-indent: 2em;
行高 line-height: 20px;
装饰 text-decoration
文本，图片垂直对齐 vertical-align: middle;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*颜色 RGB
          RGBA
      排版 text-align
    */
    h1{
      color: rgba(0,255,255,0.5);
      text-align: center; /*左右居中*/
    }
    /*
      首行缩进 2个字符
    */
    .p1{
      text-indent: 2em;
    }
    /*
      行高
      行高与高度相同==>上下居中
    */
    .p2{
      background: green;
      height: 40px;
      line-height: 40px;
    }
    /*
      text-decoration: underline
                       line-through
                       overline
    */
    .p2{
      text-decoration: underline;
    }
    /*超链接去掉下划线*/
    a{
        text-decoration: none;
    }

  </style>

</head>
<body>

<h1>title</h1>

<p class="p1">p1</p>
<p class="p2">p2</p>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    /*垂直对齐
        参照物
    */
    img,span{
      vertical-align: middle;
    }
  </style>
</head>
<body>

<p>
  <img src="images/m.JPG" alt="cat" height="200px" width="300px">
  <span> 文字</span>
</p>

</body>
</html>

3.3 超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    a{
      text-decoration: none;
      color: black;
    }
    /*鼠标停在链接上时*/
    a:hover{
      color: orange;
    }
    /*鼠标按住未释放*/
    a:active{
      color: red;
    }
    /*未被访问过的链接*/
    a:link{
      color: chocolate;
    }
    /*已访问过的链接*/
    a:visited{
        color: blue;
    }

    /*text=shadow: 影阴颜色 水平偏移 垂直偏移 影阴半径*/
    #price{
        text-shadow: skyblue 10px 10px 2px;
    }
  </style>
</head>
<body>

<a href="">link</a>
<a href="">lin2</a>

<p id="price">￥99</p>

</body>
</html>

3.4 影阴

/*text=shadow: 影阴颜色 水平偏移 垂直偏移 影阴半径*/
    #price{
        text-shadow: skyblue 10px 10px 2px;
    }

3.5 列表

/*
    list-style
            none 去掉圆点
            circle 空心圆
            decimal 数字
            square 正方形
*/
ul li{
    height: 30px;
    list-style: none;
}

3.6 背景

背景颜色

背景图片

3.7 渐变

Grabient

4.盒子模型

margin 外边距
padding 内边距
border 边框

4.1 边框

粗细
样式
颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    /*body有默认外边距*/
    body{
      margin: 0px;
    }

    /*
      border 粗细 样式 颜色
    */
    #box{
      width: 300px;
      border: 1px solid red;
    }

    h2{
      font-size: 16px;
      background: #35ff93;
      /*margin: 0;*/
      line-height: 30px;
    }

    form{
      background: aqua;
    }

    div:nth-of-type(1)>input{
      border: 3px solid black;
    }
    div:nth-of-type(2) input{
      border: 3px dashed #002279;
    }
    div:nth-of-type(3) input{
      border: 2px dashed #008e01;
    }

  </style>

</head>
<body>

<div id="box">
  <h2>登录</h2>
  <form action="#">
    <div>
      <span>用户名:</span>
      <input type="text">
    </div>
    <div>
      <span>密码:</span>
      <input type="password">
    </div>
    <div>
      <span>邮箱:</span>
      <input type="email">
    </div>
  </form>
  
</div>

</body>
</html>

4.2 内外边距

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    /*body有默认外边距*/
    body{
      margin: 0px;
    }

    /*
      border 粗细 样式 颜色
    */
    #box{
      width: 300px;
      border: 1px solid red;
      margin: 0 auto;
    }

    /*
      margin 0; 上下左右
      margin 0 0; 上下 左右
      margin 0 0 0 0; 上 右 下 左（顺时针）
    */
    h2{
      font-size: 16px;
      background: #35ff93;
      /*margin: 0;*/
      margin: 0 0;
      line-height: 30px;

    }

    form{
      background: aqua;
    }
    input{
      border: 1px solid black;
    }


  </style>

</head>
<body>

<div id="box">
  <h2>登录</h2>
  <form action="#">
    <div>
      <span>用户名:</span>
      <input type="text">
    </div>
    <div>
      <span>密码:</span>
      <input type="password">
    </div>
    <div>
      <span>邮箱:</span>
      <input type="email">
    </div>
  </form>

</div>

</body>
</html>

盒子的计算：元素多大

margin + border + padding + 内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KGiNy4b3-1622797384028)(assets/1.PNG)]

4.3 圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      /*
        左上 右上 右下 左下 (顺时针)
        左上-右下 右上-左下
      */
      border-radius: 50px 50px 50px 50px;
    }

    img{
        border-radius: 135px;
    }
  </style>
</head>
<body>

<div></div>

<img src="images/tx.jpg" alt="">

</body>
</html>

4.4 阴影

  <style>
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;

      /*盒子影阴: x y 模糊半径 颜色*/
      box-shadow: 10px 10px 10px red;
    }
  </style>

vue-element-admin

飞冰

5.浮动

块级元素: 独占一行

h1~h6 p div 列表 ...

行内元素: 不独占一行

span a img strong ...

行内元素可以被包含在块级元素，反之不行

5.1 display

<style>
    /*
      display:
            block 块元素
            inline 行内元素
            inline-block 是块元素，但可以内联，在一行
            none
    */

    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline-block;
    }
    span{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline-block;
    }

  </style>

5.2 float

div{
    float: right
}

5.3 父级边框塌陷问题

clear

/*
clear: right; 右侧不允许有浮动元素
	   left;  左侧不允许有浮动元素
	   both;  两侧不允许有浮动元素
	   none;
*/

解决方案

增加父级元素高度

增加一个空的div标签，清除浮动

<div class="clear"></div>

.clear{
	clear: both;
	margin: 0;
	padding: 0;
}

overflow

在父级元素中增加 {overflow: hidden;}

父类添加一个伪类 :after

:after 选择器向选定元素的最后子元素后面插入内容。
#father:after{
    content: "";
    display: block;
    clear: both;
    /*类似方法2，但不用增加空div*/
}

小结：

浮动元素后增加空div
简单，但代码中应尽量避免空div
设置父元素高度
简单，但元素有了固定高度，会被限制
overflow
简单，但下拉的一些场景避免使用
:after
推荐使用

6.定位

6.1 相对定位 relative

相对于自己原来的位置，进行指定的偏移，仍然在标准文档流中，原来的位置被保留

div{
    position: relative; /*相对定位*/
    top: -2px; /*相对于上方 -2px*/ 
	left: 2px; /*相对于左方 2px*/
    bottom: 2px;
    right: 2px;
}

练习

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sqQYrvu0-1622797384030)(assets/捕获.PNG)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    .box{
      width: 300px; /*content 大小*/
      height: 300px;
      border: 1px solid red;
      padding: 2px;
      margin: 0 auto;
    }
    .box a{
      width: 100px;
      height: 100px;
      display: block;
      background: pink;
      text-decoration: none;
      text-align: center;
      line-height: 100px;
      color: white;
    }

    a:hover{
      background: blue;
    }
    .link2{
      position: relative;
      left: 200px;
      top: -100px;
    }
    .link4{
      position: relative;
      left: 200px;
      top: -100px;
    }
    .link5{
      position: relative;
      left: 100px;
      top: -300px;
    }
  </style>
</head>
<body>

<div class="box">
  <a class="link1" href="">链接1</a>
  <a class="link2" href="">链接2</a>
  <a class="link3" href="">链接3</a>
  <a class="link4" href="">链接4</a>
  <a class="link5" href="">链接5</a>
</div>

</body>
</html>

6.2 绝对定位 absolute

父级元素没有设置定位的前提下，相对于浏览器
父级元素设置定位，则相对于父级元素
在父级元素范围内移动

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

6.3 固定定位 fixed

相对于浏览器窗口进行定位，脱离原来的文档流

6.4 z-index

图层

z-index 默认是0，最高999

opacity 背景透明度

附

卡巴斯基

  line-height: 100px;
  color: white;
}

a:hover{
  background: blue;
}
.link2{
  position: relative;
  left: 200px;
  top: -100px;
}
.link4{
  position: relative;
  left: 200px;
  top: -100px;
}
.link5{
  position: relative;
  left: 100px;
  top: -300px;
}

链接1 链接2 链接3 链接4 链接5

```