05-17 03:55 阅读 260

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。

边框：

边框的粗细
边框的样式
边框的颜色

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

4.2内外边距

外边距的秒用：居中元素

margin:0 autopadding: 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" alt="">
  </div>
</div>
</body>
</html>

5、浮动

5.1标准文档流

块级元素：独占一行

行内元素：不独占一行

5.2display

<!--块元素block行内元素inlineinline-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" alt=""></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、动画

来源：https://www.cnblogs.com/qidai233333/p/14776881.html

服务器评测 http://www.cncsto.com/

服务器测评 http://www.cncsto.com/