CSS笔记-CSDN博客

本文链接：https://blog.csdn.net/m0_73844340/article/details/140558030

1 样式分类和语法

1.1 内联样式

1.2 内部样式表（常用）

2 选择器

2.1 基本选择器

2.1.1 标签选择器

2.1.2 类选择器

2.1.3 id选择器

2.2复合选择器

2.2.1交集选择器

<style>
p.one{
color: red;
}
</style>
<body>
<p class="one">
这个元素会被应用样式
</p>
<p>
这个元素不会被应用样式
</p>
</body>

2.2.2并集选择器

<style>
p,div{
color: red;
}
</style>
<body>
<p>
这个元素会被应用样式
</p>
<div>
这个元素也会被应用样式
</div>
</body>

2.3关系选择器

用法：

父亲>儿子	儿子中的个别选择	选择器之间有大于号
祖先后代	后代全部选择	选择器之间用空格隔开
兄+弟	哥哥的弟弟被选择(弟弟必须严格相邻哥哥)	选择器之间用+隔开
兄~弟	哥哥的符合条件的所有弟弟被选择	选择器之间用波浪线隔开

演示：

body部分：

父亲>儿子：

祖先后代：

兄+弟，哥哥的弟弟被选择(弟弟必须严格相邻哥哥)

兄~弟，哥哥的符合条件的所有弟弟被选择

2.4属性选择器

语法	用法
[属性]	选中含有指定属性的元素
[属性=属性值]	选中含有指定属性和指定属性值的元素
[属性^=属性值]	选中含有指定属性和指定属性值开头的元素
[属性$=属性值]	选中含有指定属性和指定属性值结尾的元素
[属性*=属性值]	选中指定属性名和含有指定属性值的元素

2.5伪类选择器

CSS 伪类是用来添加一些选择器的特殊效果。

伪类的语法：

selector:pseudo-class {property:value;}

CSS 类也可以使用伪类：

selector.class:pseudo-class {property:value;}

:first-child	选择某个元素下的第一个子元素
:last-child	选择某个元素下的最后一个子元素
:nth-child()	选择某个元素下的一个或多个特定的子元素
:nth-last-child()	选择某个元素的一个或多个特定的子元素，从后往前数
:nth-of-type()	选择指定的元素
:nth-last-of-type()	选择指定的元素，从后往前数
:first-of-type	选择一个父级元素下的第一个同类型子元素
:last-of-type	选择一个父级元素下的第一个同类型子元素，从后往前数
:only-child	选择的元素是它父元素的唯一一个子元素
:only-of-type	选择一个元素是上级元素下唯一相同类型的子元素
:empty	选择的元素里面没有任何内容（空标

3.盒子

3.1 盒子的边框border

边框高度：border-width
边框颜色：border-color
边框样式：border-style（实线：solid，虚线：dashed）

3.2盒子的外边距margin

margin(外边距)属性定义元素周围的空间

margin-top :上外边距
margin-right ：右外边距
margin-bottom ：下外边距
margin-left ：左外边距

3.3盒子的内边距padding

padding，定义了内容区距离边框的这一片区域，该区域是透明的，没有颜色。

padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距

3.4盒子的内容区域content

该区域可以放入文本，以及子元素。
样式属性width，height，background-color就是对该区域进行设置的

3.5盒子的圆角

border-radius：数值或者百分比；

圆形：

写法一：border-radius：100px：

写法二：border-radius：50%

3.6盒子的阴影

box-shadown：水平阴影位置垂直阴影位置模糊程度阴影尺寸阴影颜色

刚开始没有影子，当鼠标放入则出现影子：

div:hover{ }

4.浮动

4.1浮动的语法

通过浮动可以使一个元素向其父元素的左侧或右侧移动，
使用 float 属性来设置于元素的浮动。
可选值：
float : left 元素向左浮动
float : right 元素向右浮动

4.2浮动的特点

浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果。
元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化。

4.3清除浮动clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

例如使用 clear 属性往文本中添加图片廊：

.text_line
{
clear:both;
}

4.4高度坍塌及解决方案

有的时候，父元素的高度不需要设置具体值，而是由子元素撑开的。这样的好处就是，不会因为子元素的内容减少，而出现大量的空白区域，也不会因为子元素的内容过多发生溢出现象。但是，如果子元素设置了浮动效果，那么就会出现一个问题。这个问题是高度塌陷的问题，必须要解决的，否则会影响网页的美观。

解决方案：

1、给父元素一个固定的高度

缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，当不知道父元素的具体高度时没办法设置，不推荐使用。

2、给父元素添加属性：overflow：hidden

缺点：当子元素定位到父元素外的时候，不希望溢出部分隐藏，此方法不适合使用。

3、在最后一个浮动的元素后面添加一个空的div并给该元素添加属性： clear:both;
缺点：在页面中添加无意义的div，形成冗余代码。

4、万能清除浮动法：
在父元素中内容的最后添加一个伪元素来实现       
父元素选择符::after{
content:"";
display:block;
clear:both;
}
最合适的方法推荐使用

5.元素的定位

5.1static（静态定位）

例如，<div style="position:static;">这是一个静态定位的元素</div> 会按照页面的正常布局显示。

5.2relative（相对定位）

比如，<div style="position:relative; top:5px; left:5px;">会在其原始位置的基础上向上和向左各偏移5像素，但原来的位置依然会被保留下

5.3 absolute（绝对定位）

元素相对于最近的已经完成定位的初始元素进行定位，如果没有已定位的初始元素，则相对于文档的 body 元素进行定位。
例如<div style="position:absolute; top:0; right:0;">这是一个绝对定位的元素

5.4fixed（固定定位）:

相对于浏览器窗口进行定位
例如：<div style="position:fixed; bottom:0; left:0;">这是一个固定定位的元素他会始终固定在浏览器窗口的左下角。

6.动画

6.1过渡 transition

transition-property: 指定要执行过渡的属性。

transition-duration: 指定过渡效果的持续时间，时间单位：s 和 ms 1s = 1000ms。

transition-timing-function: 过渡的时序函数。

ease 默认值，慢速开始，先加速，再减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速后减速

transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡

6.2动画

设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤

animation-name: 要对当前元素生效的关键帧的名字
animation-duration: 动画的执行时间

animation-play-state: 设置动画的执行状态
可选值：
running 默认值动画执行
paused 动画暂停
animation-fill-mode: 动画的填充模式
可选值：
none 默认值动画执行完毕元素回到原来位置
forwards 动画执行完毕元素会停止在动画结束的位置
backwards 动画延时等待时，元素就会处于开始位置
both 结合了forwards 和 backwards

6.3变形

变形就是指通过CSS来改变元素的形状或位置
- 变形不会影响到页面的布局
- transform 用来设置元素的变形效果
- 平移：
translateX() 沿着x轴方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移
- 平移元素，百分比是相对于自身计算的
z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，
距离越大，元素离人越近
z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果