3 CSS-CSDN博客

本文链接：https://blog.csdn.net/yc_Cabbage/article/details/126295346

第一节/介绍

CSS 全称层叠样式表，给网页标签添加显示效果的技术，也是网页美化的技术，web2.0建议把一个网页拆分成3个技术来编写，其中HTML负责网页的结构(清水房), 其中CSS负责美化(装修)，其中JavaScript负责交互(智能家居)。

第二节/语法

**选择器 { ** **样式名 **: **值 **; …；样式名 : 值 }

引入样式的方式 行内样式

<img src="images/jt.jpg"  style="width:200px;height:100px" >

在开始标签中编写。不可重用样式，但是便捷。

**内部样式 **

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         img{
             width: 300px;
             height: 200px;
         }
    </style>
</head>
<body>
   <!--<img src="images/jt.jpg"  style="width:200px;height:100px" > -->
   <img src="images/jt.jpg">
   <img src="images/jt.jpg">
</body>
</html>

head 嵌套 style 标签。

外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/style.css" rel="stylesheet" >  引入外部的单独的样式控制文件
</head> 
<body>
   <img src="images/jt.jpg">  要美化的元素
</body>
</html>

css/style.css

img{
    width: 300px;
    height: 200px;
}

样式和标签代码分离开。

第三节/选择器

3.1 基本选择器

a) 元素选择器

根据标签的单词名称来选择

img {
    width: 100px;
    height: 200px;
}

b) ID 选择器

根据 id 属性值来选择

#abc{
    width: 200px;
    height: 100px;
}

c) 类选择器

class 属性值拉选择

.ccc{
    width: 120px;
    height: 200px;
}

.ddd{
    border: 10px solid red;
}

3.2 层级选择器

a) 后代

指定选择器下级选择器元素

#pics img{
    width: 200px;
    height: 200px;
}

b) 父子

指定选择器 下一级选择器元素


#pics > img{
    width: 200px;
    height: 200px;
}

c) 紧邻

指定选择器后面一个选择器元素

.hz + img{
    width: 100px;
    height: 100px;
}

3.3 伪类选择器

a:link{   新链接没有访问过时运用这个选择器
   color: orangered;
}
a:visited{  访问过的链接运用这个选择器
    color: grey;
}
a:hover{   关标悬浮时 运用这个选择器
    color: red;
}
a:active{  鼠标点击时 运用这个选择器
    color: blueviolet;
}

*{ } 表示全选，*是一个通配符，表示全部选择器。

第四节/样式控制

大小

width : 16 单位
height: 34 单位

关于长度衡量，网页中可以使用** px **像素 ** %**百分百 ** rem **比例

显示

display: none 隐藏
display: inline 显示(当作 内联元素显示)
display: block  显示( 当中 块显示 )
display: inline-block( 行内块 )

可以改变元素性质。

溢出

overflow: hidden 溢出隐藏
overflow: scroll 滚动

颜色

color: 颜色值;                  字体色
backgorund-color: 颜色值；        背景色

颜色赋值 1. 单词(red) 2.#xxxxxx(#ff0000) 3.rbg/rgba()(rgba(0,0,0,0.4))

背景

backgorund-color: 颜色
backgorund-image: url(图片路径)
backgorund-repeat: no-repeat|repeat-x | repeat-y
backgorund-size: 大小值
backgorund-position: 值1  值2

字体

font-family: 字体名
font-size: 字体大小
color: 颜色
font-weight: (100-800) | bold
font-style: 斜体风格

.font{
  color: red;
  font-family: 楷体;
  font-weight: bold;
  font-style: italic;
  font-size: 20px;
}

盒模型

margin: 值 [值] [值] [值]
boder: 粗细 样式 颜色
padding: 值 [值] [值] [值]
box-sizing: content-box (默认) | border-box (边框盒子)

#box{
  width: 200px;
  height: 200px;
  background-color: chocolate;
   margin: 50px 100px 40px 20px; 
   border: 10px solid red; 
   padding: 10px;
   box-sizing: border-box; 
}

圆角

  border-radius:10px;

四个角可以单独设置例如： border-top-right

投影

 box-shadow: 4px 4px 10px 2px rgba(0,0,0,.3) ;

box-shadow: x y 模糊度大小颜色 ;

动画

transition: all 1s;  让全部有变化的 样式改变 在1s中完成过渡。

transform: translateY(-100px);
transform: rotateX(360deg);

还是需要 transition 配合使用

定义关键帧动画
@keyframes zhuan{
  0% { transform: rotate(0deg);   }
  100% { transform: rotate(360deg);   }
}

 调用         动画名  时间    线性动画   次数循环
 animation: zhuan    2s    linear     infinite;

#box{
  width: 300px;
  height: 100px;
  background-color: black;
  margin: 100px 0px 0px 50px;
  border: 2px solid orangered;
  color: white;
  text-align: center ; /*让文字在容器中水平居中*/
  line-height: 100px;  /*让文字在容器中国垂直居中*/
  border-radius:10px;
  box-shadow: 6px 4px 10px 2px rgba(0,0,0,.3) ;

  transition: all 1s;
  animation: zhuan 2s linear infinite;
}

#box:hover{
  /*background-color: red;
  height: 140px;
  width: 400px;*/

  /*transform: translateY(-100px);*/
  /*transform: rotateX(360deg);*/

}

@keyframes zhuan{
  0% { transform: rotate(0deg);   }
  100% { transform: rotate(360deg);   }
}

sfwefwfe

第五节/布局

浮动

float : left | right
clear : both | left | right

a. 浮动可以实现让两个块平排，一个块元素浮动，这块儿脱离文档流，释放行margin空间。
b. 一个元素浮动后，后面的元素就会钻空。一个元素浮动后，可能引发父容器高度坍塌。
c. 如果不希望一个元素左边或者右边出现浮动的元素，就通过 clear 清理。

定位

a）相对定位

position: relative
top: xx px;

让一个元素相对于自己本身的位置来偏移，偏移需要借助方位词，top bottom left right。不会释放原来的空间。

b) 绝对定位

position: absolute
top: xx px;

让一个元素相对于父级为relative定位的元素来偏移，如果没有父级为relative的父级，那么会选取body来当参考。经验: 通常对要移动的元素做决定定位，移动范围元素作为相对定位。

c) 固定定位

position: fixed
top: xx px;

让一个元素始终参考浏览器窗口来移动。

弹性盒子

https://www.w3cschool.cn/css3/2h6g5xoy.html