文章目录
1.css引入方式
（1）内联样式
<标记名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;..."> 内容 </标记名>
（2）内部样式
<head>
<style type="text/css">
选择器{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
....
}
</style>
</head>
（3）外部样式
<head>
<like href="CSS文件的路径" type="text/css" rel="stylesheet"/>
</head>
2. css选择器
（1）基本选择器
id选择器
<style>
#box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div id="box"></div>
类选择器
<style>
.box{
width: 150px;
height: 150px;
background-color: pink;
}
//选择div中class为box的元素
div.box{
width:100px;
height:200px;
background-color:red;
}
</style>
<div class="box"></div>
通用选择器
*{
margin: 0;
padding: 0;
}
分组选择器
h1,p,div,a{
font-size: 25px;
}
（2）组合选择器
后代选择器
div p {
//div中所有p标签
background-color: yellow;
}
子代选择器
div > p {
//div元素中的子元素且为p标签的元素
background-color: red;
}
相邻兄弟选择器
div + p {
//同一个父元素的，后面的一个兄弟元素
background-color: green;
}
后续兄弟选择器
div ~ p {
//同一个父元素的，后面的所有兄弟元素
background-color: orange;
}
属性选择器
1. [attribute] 选择器
a [target] {
//选择有target属性的a标签
background-color: yellow;
}
2. [attribute=“value”] 选择器
a [target="_blank"] {
//选择target属性值为value的a标签
background-color: red;
}
3. css三大机制
（1）特殊性
特殊性：css样式计算声明权重的规则
内联：style，权值1000
ID选择器：#box 权值：0100
类、伪类、属性选择器 权值：0010
元素、伪元素选择器 div p 权值：0001
通配符、子选择器等 “>、+” 权值：0000
！important 提权 权值1000 color：red ！important;
（2）继承性
父元素的一些样式会给子元素继承
可继承的属性：字体系列（font-）、文本系列（text-）、光标属性（cursor）
（3）层叠性
当一个元素被多个选择器选中，权重高的会覆盖权重低的，权重相同的，后写的会覆盖先写的
4. 文本
（1）文本颜色
英文颜色名称 列如color：red
十六进制 color：#fff
RGB模式 color：rgb(255,0,255)
（2）文本对齐 text-align
文本对齐方式 text-align，在元素中的行内元素和行内块元素也可以对齐
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
（3）垂直对齐 vertical-align
vertical-align属性设置元素的垂直对齐方式（）
//baseline 默认值
img.top {
//顶部对齐
vertical-align: top;
}
img.middle {
//中部对齐
vertical-align: middle;
}
img.bottom {
//底部对齐
vertical-align: bottom;
}
效果:
（5）文本装饰 text-decoration
给文本添加上划线或下划线等
a {
//清除下划线
text-decoration: none;
}
h1 {
//上划线
text-decoration: overline;
}
h2 {
//中划线
text-decoration: line-through;
}
h3 {
//下划线
text-decoration: underline;
}
（6）文本缩进 text-indent
指定文本第一行缩进
p {
//缩进2em
text-indent: 2em;
}
（7）文本字符间距 letter-spacing
给文本的字符设置间距
h2 {
//文本间的间距
letter-spacing: 12px;
}
（8）文本阴影 text-shadow
为文本添加阴影
h1.blur {
//水平阴影 垂直阴影 阴影模糊 阴影颜色 (前两个必填)
text-shadow: 2px 2px 5px red;
}
（9）文本字体 font-family
给文本添加字体
.p1 {
font-family: '楷体';
}
（10）文本字体样式 font-style
p.normal {
//正常显示 不倾斜
font-style: normal;
}
p.italic {
//字体倾斜
font-style: italic;
}
（11）文本字体粗细 font-weight
p.normal {
//不加粗 正常显示
font-weight: normal;
}
p.thick {
//字体加粗
font-weight: bold;
}
5. 盒模型
（1）盒模型概述
CSS 盒模型实质上是一个包围每个 HTML 元素的盒子。它包括：外边距、边框、内边距以及实际的内容。
内容 - 盒的内容，其中显示文本和图像。
内边距 - 清除内容周围的区域。内边距是透明的，可以呈现元素的背景。
边框 - 围绕内边距和内容的边框。
外边距 - 清除边界外的区域。外边距是透明的，不会遮挡其后的任何元素。内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
重点： 外边距可以是负值，而且在很多情况下都要使用负值的外边距。
（2）标准盒模型和IE（怪异）盒模型
标准盒模型：width=content（内容）
IE(怪异)盒模型:width=padding + border + content(内容)
因此通过box-sizing: border-box;来将标准盒模型转为怪异盒模型
作用：设置固定width时 加padding不会撑大盒子
标准盒模型：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QnZhPVDQ-1689996350732)(D:\1\A-华杉学习笔记\html+css\css.assets\image-20230720201927509.png)]
怪异盒模型：
（3）边框类型
border-style 属性指定要显示的边框类型。
p.dotted {
//点状边框
border-style: dotted;
}
p.dashed {
//虚线边框
border-style: dashed;
}
p.solid {
//实线边框
border-style: solid;
}
p.double {
//双线边框
border-style: double;
}
p.none {
//无边框
border-style: none;
}
p.mix {
//混合边框
border-style: dotted dashed solid double;
}
（4）BFC——块级格式化上下文
概念
BFC：块级格式化上下文，把BFC理解成一块独立的渲染区域，可以理解成一种属性，触发之后形成独立容器，容器内的元素不会影响容器外的元素
触发BFC
- 浮动元素：float设置为none以外的值
- 定位元素，position的值不为static和relative
- display为inline-block、table-cell等
- overflow 除了visible以外的值（hidden，auto，scroll）
- 根元素 html就是一个BFC
BFC的作用
（1）避免了外边距重叠（防止margin塌陷）
操作：给父元素加上一个div，触发BFC
（2）清除浮动（高度塌陷）
给父元素触发BFC
（3）阻止元素被浮动元素覆盖
给被影响的元素设置触发BFC
（5）解决外边距塌陷
满足以下条件就会产生外边距塌陷现象：
子元素在父元素里面
子元素中有margin-top或者margin-bottom值
解决方案：
第一种：给父元素增加内边距padding值
第二种方式：父元素增加边框border值
第三种方式：父元素增加overflow：hidden
第四种方式：给父元素或者子元素增加浮动，让其脱离标准流都可以
第五种：将父元素转变为行内块元素，display：inline-block
第六种：给父元素或者子元素定位都可以，原理同样是使其脱离标准流，不过只能用绝对定位和固定定位
第七种：给父盒子增加flex或者inline-flex
6. 定位-position
1. 相对定位
**相对定位不脱离文档流，定位之前的位置还会被占用，相对于自身的位置定位 **
div.relative {
position: relative;
left: -20px;
}
2 绝对定位
绝对定位脱离文档流，定位之前的位置会空出来，相对于最接近的有定位的父元素
div.absolute {
position: absolute;
top: 80px;
right: 0;
}
3 固定定位
固定定位脱离文档流，定位之前的位置会空出来，相对于文档定位
div.fixed {
position: fixed;
right: 30px;
top:0px
}
4 position:sticky（粘性元素）
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为
止，然后将其“粘贴”在适当的位置。
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
7. 重叠元素
在对元素进行定位时，它们可以与其他元素重叠。
z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。
元素可以设置正或负的堆叠顺序。
示例代码：
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
8. 背景图片
（1）添加背景图像
background-image 属性指定用作元素背景的图像。
默认情况下，图像会重复，以覆盖整个元素。
div {
background-image: url('img/paper.jpg');
}
（2）背景是否平铺
在默认情况下背景会在水平和垂直方向上平铺整个元素
div.repeat-x {
width: 440px;
height: 290px;
padding: 6px 12px;
background-image: url('img/gradient_bg.png');
//水平方向上平铺
background-repeat: repeat-x;
//垂直方向上平铺
background-repeat: repeat-y;
}
（3）背景位置
设置不平铺之后图像可能很小，可以通过background-position；来指定元素的位置
div.right-top {
width: 440px;
height: 290px;
box-sizing: border-box;
padding: 5px 15px 5px 55px;
background-image: url('img/objective_bg.png');
background-repeat: no-repeat;
//设置背景图片位置为 右上
background-position: right top;
}
（4）背景简写与设置大小
div {
//设置背景图片简写形式
background: #ececec url("objective_bg.png") no-repeat right top;
}
//设置图片大小
background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比）；
background-size ：cover; // 扩展图片来填满元素（保持像素的长宽比）；
background-size ：100px 100px; // 调整图片到指定大小；
background-size ：50% 100%; // 调整图片到指定大小，百分比相对于包含元素的尺寸。
``
## 10 出现省略号
### 单行文本出现省略号
```javascript
div {
height: 30px;
width: 100px;
border: 1px solid red;
//出现省略号
text-overflow: ellipsis;
//不换行
white-space: nowrap;
//溢出隐藏
overflow: hidden;
}
多行文本出现省略号
div {
position:relative;
line-height:1.4em;
height:4.2em;
overflow:hidden;
}
div::after{
//在尾部添加一个伪元素 ...
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
}
11 css对齐方式
元素对齐方式
.center {
//元素水平对齐
margin: auto;
}
.right {
//使用定位 左右对齐
position: absolute;
right: 0px;
//使用 float 左右对齐
float: right;
//使用position和transform居中垂直对齐
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
文本对齐方式
.center {
// 使用text-align 使文本水平对齐
text-align: center;
//使用padding 可以实现水平垂直对齐
padding: 70px 0;
//使用line-height 使文本垂直对齐
line-height: 200px;
height: 200px;
}
12 display
将元素移除：display：none
将元素移回：display：block
将元素隐藏：visibility：hidden
将元素显示：visibility: visible;
区别：display元素不会占位置了 visibility会
13 伪类
伪类用于定义元素的特殊状态。
例如，它可以用于：
设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式
/* 未访问的链接 */
a:link {
color: #FF0000;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
/* 已选择的链接 */
a:active {
color: #0000FF;
}
14 伪元素
::before 伪元素可用于在元素内容之前插入一些内容。
::after 伪元素可用于在元素内容之后插入一些内容。
h1::before {
content: url('img/smiley.png');
vertical-align: middle;
margin-right: 12px;
}
15 表格
border-collapse 属性设置是否将表格边框折叠为单一边框
为了实现斑马纹表格效果，请使用 nth-child() 选择器，odd为奇数 even为偶数
table,td,th{
border: 1px solid black;
//折叠边框为单一边框
border-collapse: collapse;
}
效果：
16 表单
获得焦点的输入框
默认情况下，某些浏览器在获得焦点（单击）时会在输入框周围添加蓝色轮廓。你可以通过向输入框添加 outline: none; 来消
除此行为。
input[type="text"]:focus {
//使用 :focus 选择器可以在输入字段获得焦点时为其设置样式：
background-color: lightblue;
border: 3px solid #555;
}
17 css轮廓
// css 轮廓的简写方式 与border类似
p.ex1 { outline: dashed; }
p.ex2 { outline: dotted red; }
p.ex3 { outline: 5px solid yellow; }
p.ex4 { outline: thick ridge pink; }
18 媒体查询
css引入媒体
//当屏幕小于800px时 引用 index.css screen (屏幕宽度)
<link rel="stylesheet" media="screen and (min-width:800px)" href="css/index.css">
//当屏幕宽度大于480时使用
@media screen and (min-width: 480px) {
#leftsidebar { width: 200px; float: left; }
#main { margin-left: 216px; }
}
19 css3选择器
//第一个
p:first-child
{
background-color:yellow;
}
//最后一个
p:last-child
{
background:#ff0000;
}
//::selection 选中变高亮
::selection
{
color:#ff0000;
}
20 盒阴影
css3中的box-shadow属性用来添加阴影
div.shadow {
//可以写多个盒子阴影 用逗号隔开
border: 1px solid gray;
// 前两个值表示阴影位置可以为负值 第三个表示模拟的距离 第四个表示阴影颜色
box-shadow: 10px 10px 5px #888888;
}
21 边界图片
border-img属性，你可以使用图像创建一个边框
div.round {
border: 15px solid transparent;
border-image: url('img/border.png') 30 30 round;
-webkit-border-image: url('img/border.png') 30 30 round;
-o-border-image: url('img/border.png') 30 30 round;
}
22 background
background-origin 属性
background-origin 属性指定了背景图像的位置区域。
content-box、padding-box 和 border-box 区域内可以放置背景图像。
.example3-padding {
background-origin: padding-box; // 默认值
}
.example3-content {
background-origin: content-box;
}
.example3-border {
background-origin: border-box;
}
background-clip 属性
CSS3 中 background-clip 背景剪裁属性是从指定位置开始绘制。
.example4-border {
background-clip: border-box; // 默认值
}
.example4-content {
background-clip: content-box;
}
.example4-padding {
background-clip: padding-box;
}
23 css3渐变
（1）线性渐变 - 从上到下（默认情况下）
下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：
#grad {
background-image: linear-gradient(#e66465, #9198e5);
}
（2）线性渐变 - 从左到右
下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：
#grad {
height: 200px;
background-image: linear-gradient(to right, red , yellow);
}
（3）线性渐变 - 对角
你可以通过指定水平和垂直的起始位置来制作一个对角渐变。
#grad {
height: 200px;
background-image: linear-gradient(to bottom right, red, yellow);
}
（4）使用角度
#grad {
background-image: linear-gradient(-90deg, red, yellow);
}
（5）使用多个颜色结点(可以设置值改变占据大小)
下面的实例演示了如何创建一个带有彩虹颜色和文本的线性渐变：
#grad {
/* 标准的语法 */
background-image: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
}
（6）使用透明度（transparent）
下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
24 动画
（1）过渡动画（transforms）
/* 设置运动动画的属性 all 所有 */
transition-property:width,height，opacity;
/* 动画所需要的时间 */
transition-duration: 1s;
/* 动画的延迟时间 */
transition-delay: 0s;
/* 动画的运动方式：
linear 匀速
ease 逐渐变慢
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
*/
transition-timing-function: linear;
//简写
transition: all 1s 0s linear;
| 方法 | 描述 |
|---|---|
| translate() | 从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。 |
| rotate() | 根据给定的角度顺时针或逆时针旋转元素。（360deg） |
| scale() | 增加或减少元素的大小（根据给定的宽度和高度参数）。 |
| scaleX() | 增加或减少元素的宽度。 |
| scaleY() | 增加或减少元素的高度。 |
| skewX() | 使元素沿 X 轴倾斜给定角度。 |
| skewY() | 使元素沿 Y 轴倾斜给定角度。 |
| skew() | 使元素沿 X 和 Y 轴倾斜给定角度。 |
| matrix() | 把所有 2D 变换方法组合为一个。 |
透视
div{
//perspective：none | <length>
perspective：600px
}
perspective 指定了观察者与 z = 0 平面的距离，使具有三维位置变换的元素产生透视效果。
简单理解就是将电脑屏幕当做一个平面，用户眼睛到屏幕的垂直方向。值越大用户与屏幕距离越远，视觉效果很小；
值越小，3D 效果就越明显。
3D舞台
给父元素上面添加transform-style:具有3D的效果
切换变形原点 transform-origin: right top;
transform-style:
flat 2d (平面)默认值
preserve-3d ： 它可以是指定嵌套子元素如何在三维空间进行呈现
父元素有变形属性，子元素也有变形属性，父元素搭建一个3D舞台，子元素就会三维空间进行呈现，尤其旋转属性特别明显
备注:preserve-3d 不能和 overflow属性搭配使用，如果是 overflow属性 结果就是flat（2d）
（2）帧动画（@keyframes）
如果你在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。
要使动画生效，必须将动画绑定到某个元素。
/* 动画代码 */
@keyframes example3 {
0% {
background-color: red;
left: 0px;
top: 0px;
}
100% {
background-color: red;
left: 0px;
top: 0px;
}
}
/* 应用动画的元素 */
.example3 {
/* 1.动画的名称 */
animation-name: move;
/* 2.动画所需要的时间 */
animation-duration: 2s;
/* 3.动画的运动方式
linear 匀速
ease 逐渐变慢
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
step-start 马上跳到动画某一帧结束帧的状态
贝塞尔曲线
*/
animation-timing-function: linear;
/* 4.动画的延迟时间 */
animation-delay: 0s;
/* 5.animation-iteration-count 检索或设置对象动画的循环次数
：number | infinite (无限次)
*/
animation-iteration-count: infinite;
/* 6. 动画的运动方向
animation-direction
mormal：正常方向
recerse: 反方向
alternate：先正常运动在反方向运动 并持续
alternate-reverse ：先反方向运动在正常运动 并持续
*/
animation-direction: alternate;
/* animation-play-state,检索或设置对象动画的状态
running 运动
paused：暂停
*/
/* 保留最后一帧的状态 */
animation-fill-mode: forwards;
//最简写法
animation: move 1s;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
