CSS

时间：2021-01-24 18:24:36 收藏：0 阅读：44

HTML创造世界，CSS让世界更美丽

①：CSS与HTML结合方式

三种样式表优先级服从就近原则

1.内联样式

<h1 style="color: #b3d4fc;">i like you</h1>

2.内部样式表

<style>
  h2{
  color: aqua;
   <!-- 属性:属性值; -->
  }
</style>

3.外部样式表

外部单独的css文件。

<!--在<head>中使用<link>引入外部的css文件 -->
<link href="css/task01.css" rel="stylesheet">
<!--使用此方式，会先加载样式表（直接看到修饰后的页面）-->

<!--在<style>便签导入 -->
<style>
  @import "css/task01.css";
</style>
<!--
使用此方式，会先加载html再加载css，网不好时会先看到未使用css的页面
不支持js动态修改，link支持
-->

②：CSS的使用

1.选择器

1.元素选择器

对页面相同标签的统一描述。

2.类选择器与D选择器

使用class修饰；使用.来描述
使用id修饰；#描述。更具唯一性

 <style> 
  .h31{}
  #h32{}
</style>
	……
  <h3 class="h31">i like you</h3>
  <h3 id="h32">i like you too</h3>

3.选择器组(,)

<style>
  .h31,#h32{ color: #b3d4fc}  
</style>

4.派生选择器

子代选择：空格隔开（只选子代）
后代选择器：>隔开（全选）

 div p{color: #b3d4fc} <!--忽略层级--> 
 div>p{color: #b3d4fc} /* 只选取一级 */

5.css中的伪类

css中伪类可以对选择器加一些效果
- :link 未被访问
- :visited 已被访问
- :hover 鼠标悬浮时添加样式
- :active 鼠标选中时
- :first-child 向元素的第一个子元素添加样式

超链接中要遵循LVHA(爱恨原则)顺序。

<style> 
a:link{color: aqua} /*未被访问*/
a:visited{color: blueviolet}/*已被访问*/
a:hover{font-size: 20px}/*鼠标悬浮时添加样式*/
a:active{font-size: 50px}/*鼠标选中时*/
</style>

技术分享图片

2.CSS中的基本属性

1.文本属性

<style>
  p {
    font-family: "隶书"; /*指定字体*/
    font-size: 2em; /*字体大小*/
    font-weight: bold; /*字体加粗*/
    color: #b3d4fc; /*文本颜色*/
    text-align: center; /*文本排列： left/right/center*/
    text-decoration: underline; /*文字修饰 下划线*/
    line-height: 50px; /*行高*/
   	text-indent : value （2em）; /*首行文本缩进 这里未用上*/
  }
</style> ……
<p>i like you 你好</p>

技术分享图片

2.背景属性

<style>
  div{
    width: 100%;
    height: 800px;
    background-color: pink;
    background-image: url("../imgs/zoe.jpg");/*背景图*/
    background-repeat:no-repeat;/*设置平铺方式（x or y）*/
    background-position: 0 200px;/*设置背景图像的起始位置*/
    background-attachment: fixed; /*设置背景图相较于页面固定*/
  }
</style>

技术分享图片

3.列表属性

无序列表(ul)可以标记特殊图型
有序列表(ol)可以标记数字或字母

可设置为图像

<style>
.u1{list-style-type: circle}/*设置无序项为圆形（none、square）*/
 /*设置有序列表项为大写字母（罗马大写：upper-roman）*/    
 .o1{list-style-type: upper-alpha}
 /*设为图像*/
 u3{list-style-image: url("../imgs/list-img-1.gif")}     
</style>

技术分享图片

4.边框属性(border)

<style>
  div {
    /*border: 10px red solid;/*实线*/
    border: 10px blue dashed; /*虚线*/
    /*border: 10px red none; /*无边框*/
   /*border-bottom: dashed #b3d4fc 10px; /*设置底边框的样式*/
   /* border-left: red solid; /*设置右边框的样式*/
      outline: red 2px solid;/*轮廓*/ 
  }
</style>

5.轮廓属性(outline)

轮廓位于边框之外。边框是围绕元素绘制、轮廓围绕边框绘制

![](https://img.imgdb.cn/item/600be6dd3ffa7d37b3b2a283.jpg title="边框与轮廓")

6.盒子属性

技术分享图片

3.CSS定位

1.默认定位

块级元素：h、p、div等，自动换行（垂直排列）。可以设定宽高
行内元素：a、b、span。不会换行（水平排列）。不可改变宽高
行内块元素：input,img等，从左向右，水平排列（自动换行）；可以改变宽高
- 加：display: inline-block;可变为行内块元素

2.浮动定位(float)

让元素“飞”起来，并可以消除“块级”的霸道属性（独占一行）

<style>
  .a{
    width: 100px;
    height: 100px;
    background: #b3d4fc;
   float: left;
    /*display: inline-block; 方式二：变成行内块元素消除独占一行属性*/
  }
  .b{
    width: 100px;
    height: 100px;
    background: pink;
    float:right;
    /*相对定位
    position: relative;
    right: 200px; 
    */
  }
</style>

![](https://img.imgdb.cn/item/600ce8423ffa7d37b3253413.jpg title="浮动")

3.相对定位(relative)

和原来的位置进行比较，进行偏移

![](https://img.imgdb.cn/item/600ce8173ffa7d37b3252818.jpg title="相对定位")

4.绝对定位(absolute)

本元素与已定位的祖先元素的距离。一级一级的往上找，如果最终的没找到就以body为最终选择

![](https://img.imgdb.cn/item/600cef533ffa7d37b327e0f2.jpg title="a与父元素的绝对定位")

5.固定定位(fixed)

<style>
	postion:fixed;/*固定于页面，不随页面滚动*/
</style>

6.z-index

定义重叠元素的优先级，要配合定位使用。

技术分享图片

③：CSS3新特性

1.圆角与盒子阴影

border-radius：左上右上右下左下;
box-shadow: 水平偏移、垂直偏移、模糊半径、扩张半径、颜色;

<style>
  div {
    width: 300px;
    height: 300px;
    background-color: pink;
    /* border-radius: 1px 20px 30px 50px;/*左上、右上、右下、左下（顺时针）*/
    border-radius: 50px; /*圆角*/
    /*盒子阴影：依次代表：水平偏移、垂直偏移、模糊半径、扩张半径、颜色*/
    box-shadow: 20px 20px 50px 10px gray;
  }
</style>

2.渐变属性

线性渐变：background:linear-gradient([方向/角度]，颜色列表)；
径向渐变：radial-gradient(颜色列表);

<style>
 /*线性渐变*/   
background: linear-gradient(red, yellow);
background: linear-gradient(to right bottom, black, white);
background: linear-gradient(30deg, black, white); /*角度*/
/*径向渐变*/      
background: radial-gradient(black, white);
border-radius: 50px;
background: radial-gradient(black, white);
</style>

技术分享图片

4.背景

背景的位置与大小
- 位置：background-origin(border、padding、content)
- 大小：background-size(cover完全覆盖、contain完全适应)

![](https://img.imgdb.cn/item/600d07233ffa7d37b33371ec.jpg title="大小使用的contain")

背景的裁切
- background-clip:(border-box 、padding-box、content-box)

技术分享图片

4.过渡动画

过渡：从一个状态到另一个状态的缓慢过程(中间不可控制)
- transition｛过渡的属性完成时间过度函数开始时间｝
- ```
<style>
  div{
    width: 200px;
    height: 50px;
    border: black solid 1px;
    transition:font-size 4s linear ,width 4s linear;
  }
  div:hover{width: 400px;font-size: 30px}
</style>
```
- ![](https://img.imgdb.cn/item/600d0d6c3ffa7d37b3367e55.gif title="效果图")

动画：可控制每个时间。

动画属性：animation{ 动画帧 , 执行时间 , 过渡函数 , 动画执行的延迟（可省略）, 动画执行的次数 }

<style>  
.b{
      width: 200px;
      height: 100px;
      background: pink;
      animation: x 5s linear infinite alternate;/*动画属性*/

    }
    @keyframes x {/*动画帧*/
      0%{ margin-left: 0px;}
      25%{background-color: grey}
      50%{ background-color:red}
      75%{  background-color: black}
      100%{ margin-left: 600px}
    }
  </style>

![](https://img.imgdb.cn/item/600d19f33ffa7d37b33be69f.gif title="运行效果图")

原文：https://www.cnblogs.com/zoezza/p/14321279.html