css

2021-11-21 13:12:34

CSS

1、什么是CSS：

Cascading Style Sheet层叠级样式表

Css:表现（美化网页）

字体，颜色，边距，宽度，背景图片，网页定位，网页浮动。

css发展史：

css1.0

css2.0 DIV(块) + css、html与css结构分离的思想，网页变得简单，SEO

css2.1 浮动，定位

css3.0圆角，阴影，动画...浏览器兼容性

快速入门

style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  style  可以编写css的代码，每一个声明，最好使用分好结尾
    语法：
        选择器{
        声明1；
        声明2；
        声明3；
        }
-->
  <style>
    h1{
        color: antiquewhite;
    }
  </style>
</head>
<body>

<h1>我是标题</h1>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ne0BReyM-1621059502998)(/Users/yanxiao/Desktop/eee.png)]

css的优势：

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

css的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <!--内部样式-->
  <style>
    h1 {
        color: aquamarine;
    }
  </style>
<!--    外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<!--优先级：行内样式>内部样式>外部样式-->

<!--行内样式，在标签元素中，编写一个style属性，表写样式即可-->
<h1 style="color: antiquewhite">我是标题</h1>

</body>
</html>

扩展：外部样式两种写法

链接式

html

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

导入式

@import 是css2.1特有的

<style>
  @import url("css/style/e/css")
</style>

2、选择器

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

2.1、基本选择器

1、标签选择器：选择一类标签标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
<!--    标签选择器，会选择到页面上所有的这个标签元素-->
    h1{
      color: #23c97e;
      background: #3cbda6;
      border-radius: 24px;
    }
    p{
      fout-size: 40px;
    }
  </style>
</head>
<body>

<h1>学java</h1>
<h1>学java</h1>
<p>听狂神说</p>
</body>

</html>

2、类选择器class：选择所有class属性一致的标签，跨标签，.类名{}

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

  <style>
<!--    类选择器的格式，.class的名称-
        好处，可以多个标签归类，是同一个class。可以复用

->
    .qinjiang{
      color: #1168c6;
    }
    .kuang{
      color: #891515;
    }
  </style>
</head>
<body>
<h1 class="qinjiang">标题1</h1>
<h1 class="kuang">标题2</h1>
<h1 class="qinjiang">标题3</h1>
<p class="kuang">p标签</p>
</body>
</html>

3、id选择器：全局唯一！ #id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*id选择器 :id必须保证全局唯一！
    #id名字
    */
    #qinjiang1{
      color: #ad0a0a;
    }
  </style>
</head>
<body>
<h1 id="qinjiang1">大武当</h1>
<h1>大我都没看</h1>
<h1>大我都没看饭卡</h1>
</body>
</html>

优先级：

不遵循就近原则，固定的

id选择器>class选择器>标签选择器

2.2层次选择器

后代选择器：在某个元素的后面所有的元素相当于祖爷爷-爷爷-爸爸-你

    /**  后代选择器*/
    body p{
        background: red;
    }

2.子选择器下面的第一代儿子

body>p{
    background: red;
}

3、相邻兄弟选择器同类

.active + p{
    background: aliceblue;
}

4.通用选择器

.active~p{
    background: red;
}

2.3结构伪类选择器

/*ul的第一个子元素*/
 ul li:first-child {
   background: red;
 }
/*ul的最后一个元素*/
ul li:last-child{
  background: green;
}
/*选中p1:定位到父元素，选择当前的第一个元素
 选择当前p元素的父级元素。选中父集元素的第一个。并且是当前元素才生效*/
p:nth-child(1){
  background: green;
}
p:nth-of-type(2){
  background: red;
}

2.4属性选择器（常用）

/* 属性名  属性名 = 属性值（正则表达式）
=绝对等于
*=包含这个元素
^=以这个开头
$=以这个结尾
*/


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

/*id=first的元素*/
/*a[id=first]{
		background：red；
}*/

class中有links的元素
a[class*="links"]{
  breakground:red;
}

选中href以http开头的元素
a[href^=thhp]{
  breakground:red
}

选中href以doc结尾的元素
a[href$=doc]{
  breakground:red;
}

3、美化网页元素

3.1为什么要美化网页

有效的传递页面信息
美化网页，页面漂亮才能吸引用户
凸显页面的主题
提高用户的体验

span标签：重点突出的字适用span套起来

3.2字体样式

<!--
  font-family字体
  font-size字体大小
  font-weight字体粗细
  color: red
-->
  <style>
    body{
      font-family:"Al Bayan", 黑体;
      color: red;
    }
    h1{
      font-size: 2em;
    }
    .p1{;
      font-weight: 9000;
    }

3.3文本样式

颜色color rgb reba
文本对齐方式 text-align=center
首行缩进text-indent
行高line-height
装饰 text-decoration下划线
文本图片水平对齐 vertical-align:middle

3.4阴影

/*第一个颜色阴影颜色，2水平偏移，3垂直偏移，4阴影半径*/
#price{
    text-shadow: #1f78b3 10px 0px 10px;
}

3.5超链接伪类

正常情况下，a，a:hover

<!--     默认的颜色-->
    a{
        text-decoration: none;
        color: #000000;
    }
    /*鼠标悬浮的状态* 只需要记住hoxer*/
    a:hover{
        color: red;
        font-size: 50px;
    }

3.6 列表

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

3.7背景

背景颜色

背景图片：

backgrount-rapeat里面的属性：
- rapeat-x平铺x轴
- rapeat-y平铺y轴
- 如果不设置rapeat是默认平铺的
- no-rapeat不平铺，原来什么样子，就是什么样子

<style>
    div{
        width: 1000px;
        height: 700px;
        /*粗细 样式 颜色*/
        border: 1px solid red;
        background-image: url("eee副本.png");
    }
    .div1{
        background-repeat: repeat-x;
    }
    .div2{
        background-repeat: repeat-y;
    }
    .div3{
        background-repeat: no-repeat;
    }
</style>

3.8渐变

https://www.grabient.com

4、盒子模型

4.1盒子

margin：外边距

padding：内边距

border边框

注：body和一些原始的数据总有一些默认外边距，要在开始的时候将他们清空，归0。

边框：

1. 边框的粗细
2. 边框的样式
3. 边框的颜色
用border设置边框，border的三个属性分别是：粗细，样式，颜色
solid实线边框 dashed虚线边框

4.2内外边距

外边距的秒用：居中元素

margin:0 auto
padding: 0 auto

盒子的计算方式：这个元素到底多大？

margin+padding+border+内容宽度

4.3圆角边框

  <style>
/*<!-- 左上   右上  右下  左下  顺时针方向
圆圈"  圆角=半径

-->*/
    div{
      width: 50px;
      height: 30px;
      border: 10px solid red;
      border-radius: 50px 50px 0px 0px;
    }
  </style>

4.4盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    img{
      border-radius: 50px;
      box-shadow: 1px 1px 50px rgba(227, 216, 19, 0.97);
    }
  </style>
</head>
<body>

<div style="width: 1000px;display: block;text-align: center">
  <div style="width: 1000px;height: 1000px">
    <img src="eee副本.png" >
  </div>
</div>
</body>
</html>

5、浮动

5.1标准文档流

块级元素：独占一行

行内元素：不独占一行

5.2display

<!--
块元素block
行内元素inline
inline-block是块元素，但是可以内联在一起
none
-->
  <style>
    div{
      width: 100px;
      height: 100px;
      border:1px solid red;
      display:inline;
    }
    span{
      width: 100px;
      height: 100px;
      border:1px solid red;
      display: inline-block;
    }
  </style>

display：三个常用属性

inline行内
block块
none隐藏

1,这个也是一种实线行内元素排列的方式，但是我们很多情况都是用float

5.3float

float左浮右浮

float left
float right

5.4父级边框塌陷的问题

clear

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

解决方案：

1、增加父级元素的高度

2、增加一个空的div，清除浮动

3、overflow

在父级元素中增加一个 overflow：hidden；

4、父类添加一个伪类：after

#father:after{
  content:’ ‘;
  display：block;
  clear:both;
}

小结：

浮动元素后面增加空的div 简单，代码中尽量避免空div
设计父元素高度简单，元素假设有了固定的高度，就会被限制
overflow 简单，下拉的一些场景避免使用
父类添，加一个伪类：after 写法稍微复杂，但是没有副作用，这个解决更好

6、定位

6.1相对定位：

先设置一个盒子，然后在css里输入position: relative决定定位，最后通过上下左右来使盒子动起来。
相对于原来的位置进行移动。相对定位的话，他仍然在标准文档流中，原来的位置会保留

top: -20px;
left: 20px;
bottom: 10px;
right: 20px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    相对定位
        相对于自己原来的位置进行偏移
-->
  <style>
      body{
          padding: 20px;
      }
        div{
          margin: 10px;
          padding: 5px;
          font-size: 12px;
          line-height: 25px;
        }
        #father{
          border: 1px solid #666;
          padding: 0;
        }
        #first{
          background-color: #094f55;
          border: 1px dashed #cd4848;
          position: relative  ;/*相对定位  上下左右*/
            top: -20px;
            left: 20px;
        }
        #second{
          background-color: #1f78b3;
          border: 1px dashed #084018;
        }
        #third{
          background-color: #9a0b1b;
          border: 1px dashed #910eaa;
            position: relative;
            bottom: 10px;
            right: 20px;
        }
  </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

练习题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #box{
      height: 300px;
      width: 300px;
      padding: 10px;
      border: 1px  solid red;
    }
    a{
      width: 100px;
      height: 100px;
      background: #db34e7;
      text-decoration: none;
      text-align: center;
      line-height: 100px;
      display: block;
      color: red;
    }
    a:hover{
      background: blue;
    }
    #lianjie2,#lianjie4{
      position: relative;
      left: 200px;
      top: -100px;
    }
    #lianjie5{
      position: relative;
      left: 100px;
      top: -300px;
    }
  </style>
</head>
<body>
  <div id="box">
    <a href="#" id="lianjie1">链接1</a>
    <a href="#" id="lianjie2">链接2</a>
    <a href="#" id="lainjie3">链接3</a>
    <a href="#" id="lianjie4">链接4</a>
    <a href="#" id="lianjie5">链接5</a>
  </div>
</body>
</html>

6.2绝对定位

定义：基于xxx定位，根据这个xxx来进行上下左右移动

1、没有父级元素定位的时候，根据浏览器来进行定位移动

2、假设根据父级元素定位，就会根据父级元素的范围内来进行定位移动

3、他不在标准文档流中，原来的位置不会保留

position：absolute

6.3固定定位

position: fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body {
      height: 1000px;
    }
    div:nth-of-type(1){   /* 绝对定位*/
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      right: 0;
      bottom: 0;
    }
    div:nth-of-type(2){     /*固定定位*/
      width: 50px;
      height: 20px;
      background: yellow;
      position: fixed;
      right: 0;
      bottom: 0;
    }
  </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

6.4z-index

图层

z-index 0~无限

opacity: 0.5; /*背景透明度*/

.tipText{
    z-index: 999;
    color: white;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
  <ul>
    <li><img src="截图.png" ></li>
    <li class="tipText">学习微服务</li>
    <li class="tipBg"></li>
    <li>时间：1999-2-2-</li>
    <li>地点：火星</li>
  </ul>
</div>
</body>
</html>

#content{
    width: 220px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid #000;
}
ul,li{
    padding: 0;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;

}
.tipText,.tipBg{
    position: absolute;
    width: 220px;
    height: 25px;
    top: 180px;
}
.tipText{
    z-index: 999;
    color: white;
}
.tipBg{
    background: #000;
    opacity: 0.5; /*背景透明度*/
    filter:alpha(opacity=50) ;
}

7、动画

css

码农公寓

CSS