前端css3（前端(二)-CSS）

时间2025-05-04 08:48:30分类IT科技浏览4070

导读：1、样式 1.1 行内样式 <h1...

1 、样式

1.1 行内样式

1.2 内部样式

CSS代码写在 <head> 的 <style> 标签中 <style> h1{color: green; } </style>

1.3 外部样式

1.4 CSS优先级

就近原则;

2 、选择器

2.1 基本选择器

2.1.1 标签选择器 / h2{ color: #FF0000; } 2.1.2 类选择器  .author{ color: #00FF00; } 2.1.3 id选择器  #conent{ color: #0000FF; } 2.1.4 选择器的优先级 ID选择器 > 类选择器 > 标签选择器

2.2 高级选择器

2.2.1 层次选择器选择器类型 E F 后代选择器 E>F 子选择器 E~F 通用兄弟选择器 E+F 相邻兄弟选择器 2.2.2 结构伪类选择器结构伪类选择器功能描述 E:first-child 父元素的第一个子元素 E:last-child 父元素的最后一个子元素 E F:nth-child(n) 父元素的第nth的子元素(括号里面的n可以是1 ，2，3 even,odd) E:first-of-tyope 父元素指定类型的第一个子元素 E:last-of-type 父元素指定类型的最后一个子元素 E F:nth-of-type(n) 父元素指定类型的第nth的子元素 2.2.3 属性选择器属性选择器功能描述 E[attr] 选择具有属性attr的元素 E[attr=val] 选择具有属性attr的元素，且属性值为val的元素 E[attr^=val] 选择具有属性attr的元素，且属性值以val开头的元素 E[attr$=val] 选择具有属性attr的元素，且属性值以val结尾的元素 E[attr*val] 选择具有属性attr的元素，且属性值中包含val的元素

3 、美化网页元素

3.1 dispaly 行内元素与块元素的切换

属性说明 display:block 将元素显示为块元素，前后有换行符 display:inline 将元素显示为内联(行内)元素，前后没有换行符 display:inlineblock 将元素显示为行内块元素 display:none 将元素隐藏

3.2 字体样式

属性说明 font-family 设置字体类型(字体) font-size 设置字体大小 font-style 设置字体风格 font-weight 设置字体粗细 font 设置字体的所有属性（字体风格→字体粗细→字体大小→字体类型）字体的粗细值说明 normal 默认值，定义标准的字体 bold 粗体字体 bolder 更粗体字体 lighter 更细体字体 100,200,300,400,500,600,700,800,900 定义由细到粗的字体400等于normal,700等于bold

3.3 文本样式

属性说明 color 文本颜色 text-align 元素水平对其方式 text-indent 首行文本的缩进 line-heighr 文本的行高 text-decoration 文本的装饰 3.3.1 color RGB RGBA 3.3.2 text-align

元素水平对其方式

值说明 left 把文本排列到左边 right 把文本排列到右边 center 把文本排列到中间 justify 实现两端对齐文本效果 3.3.3 text-indent 首行缩进：text-indent：em或px； 3.3.4 line-heighr 行高：line-height：px； 3.3.5 text-decoration 值说明 none 去除默认样式 underline 下划线 overline 上划线 line-through 删除线 3.3.6 vertical-align 垂直对其方式

常用图片与文字垂直对其；

值说明 middle 垂直居中 top 顶部 bottom 底部  img,span{ vertical-align: middle; }

3.4 文本阴影

text-shadow:color x-offset v-offset blur-radlus

3.5 超链接伪类

伪类名称说明 a:link 未点击访问时超链接样式 a:visited 单击访问后超链接样式 a:hover 鼠标悬浮其上的超链接样式 a:avtive 鼠标单机未释放的超链接样式设置伪类的顺序：alink->a:visited->a:hover->a:active;

3.6 列表样式

list-style-type list-style-image list-style-position list-style 值说明 none 清除默认样式 disc 实心圆 circle 空心圆 square 实行正方形 decimal 数字 list-style:none;常用于去除无序列表的小黑点

3.7 背景样式

2.7.1 常见背景样式背景图片，background-image 背景颜色，background-color 2.7.2 设置背景图像 2.7.2.1 background-Image属性 background-image:url(图片路径); 2.7.3.2 background-repeat属性值说明 repeat 沿水平和垂直两个方向平铺 no-repeat 不平铺，即只显示一次 repeat-x 只沿水平方向平铺 repeat-y 只沿垂直方向平铺 2.7.3.3 background-position属性值说明 Xpos Ypos 单位px X% Y% 使用百分比 X,Y方向关键词 left,center,right,top,center,bootom 2.7.3.4 简写 background: 背景颜色背景图像背景定位背景不重复显示； 2.7.4.4 background-size 值说明 auto 保持原样 percentage 百分比 cover 放大填充整个元素 contain 保持比例，缩小到正好可以放

3.8 CSS渐变样式

background-image:linear-gradient(position,color1 color2...) posotion:渐变方向(可以时任意角度，向上的0deg)

4 、盒子模型

4.1 盒子模型元素

元素说明 margin 外边距 border 边框 padding 内边距 height 高 width 宽

4.2 边框

4.2.1 border-color

边框颜色；

属性说明 border-top-color 上边框 border-right-color 右边框 border-bottom-color 下边框 border-left-color 左边框 border-color 上右下左 4.2.2 border-width

边框粗细；

border-width-上右下左 4.2.3 border-style

边框样式；

border-style-上右下左值说明 none 清除默认样式 dotted 点线 dashed 破折线 double 双实线 4.2.4 简写 border:粗细样式颜色； 4.2.5 border-collapse

border-collapse 属性是用来设置 table 表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

属性值说明 border-collapse:collapse 边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 border-collapse:separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 border-collapse:inherit 规定应该从父元素继承 border-collapse 属性的值。

设置表格单元格边框的方法

直接设置表格table属性：cellspacing="0" CSS方法1：border-collapse: collapse; 边框会合并为一个单一的边框； CSS方法2：border-spacing:0; 表格的相邻单元格边框之间的距离为0 4.2.6 border-spacing

border-spacing是CSS2的一个属性。其作用是规定表格的相邻单元格边框之间的距离。如果表格的border-collapse属性值为collapse时，border-spacing设置无效。

border-spacing:h-length v-length;

h-length即单元格之间的水平距离；

v-length即单元格之间的垂直距离。

4.3 内外边框

4.3.1 margin 外边距 margin-top margin-right margin-bottom margin-left 4.3.2 外边距妙用

外边距妙用，网页居中对齐：margin:0px auto;

网页居中对齐条件：1.块元素 2.固定宽度

4.3.3 padding 内边距 padding-left padding-right padding-top padding-bottom

4.4 圆角边框

border-radius: 左上右上右下左下

4.5 盒子阴影

box-shadow:shadowtype x-offset y-offset blur-radus color;

shadowtypetype:阴影类型(默认外阴影，inset内阴影)；

5 、浮动

5.1 display属性

值说明 block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符 inline 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符 inline-block 行内块元素，元素既有内联元素的特性，又有块元素的特性 none 元素隐藏

5.2 浮动

float属性值说明 left 元素向左浮动 right 元素向右浮动 none 不浮动

5.3 清除浮动

clear属性值说明 left 在左侧不允许浮动元素 right 在右侧不允许浮动元素 both 在左右两侧不允许浮动元素 none 允许

5.4 解决父级边框塌陷的方法

5.4.1 添加空div,并清除两边浮动 5.4.2 设置父元素的高度(灵活性差) 5.4.3 添加overflow属性(溢出处理) 属性值说明 visible 默认值，内容不会被修剪，会呈现在盒子之外 hidden 内容会被修剪，并且其余内容是不可见的 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其他剩余内容 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其他剩余内容 5.4.4 父级添加伪类after <div id="father" class="clear"> <div class="layer01"><img src="https://www.cnblogs.com/xiaoqigui/p/image/photo-1.jpg" alt="日用品" /></div> <div class="layer02"><img src="https://www.cnblogs.com/xiaoqigui/p/image/photo-2.jpg" alt="图书" /></div> <div class="layer03"><img src="https://www.cnblogs.com/xiaoqigui/p/image/photo-3.jpg" alt="鞋子" /></div> <div class="layer04">浮动的盒子……</div> </div> .clear:after{ content: ;  display: block;  clear: both;  }

6 、定位 posotion属性

6.1 relative 相对定位

相对自身原来位置进行偏移，偏移设置：top 、left 、right 、bottom;

相对定位的规律

1.设置相对定位的盒子会相对它原来的位置 ，通过指定偏移，到达新的位置；

2.设置相对定位的盒子仍在标准文档流中 ，它对父级盒子和相邻的盒子都没有任何影响 ；

3.设置相对定位的盒子原来的位置会被保留下来；

4.浮动后，相对定位，相对于盒子浮动后的位置，进行定位 ，盒子原始位置不会保留；

6.2 absolute 绝对定位

absolute属性值：偏移设置： left 、right 、top 、bottom；

绝对定位的规律

1.使用了绝对定位的元素以它最近的一个“已经定位 ”的“祖先元素 ” 为基准进行偏移；

2.如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位 ；

3.绝对定位的元素从标准文档流中脱离 ，这意味着它们对其他元素的定位不会造成影响；

4.元素位置发生偏移后，它原来的位置不会被保留下来；

5.一般定位都是相对定位和绝对定位配合使用，父级元素先相对定位，子元素再绝对定位；

使用场景：下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景；

6.3 fixed 固定定位

偏移设置： left、right 、top 、bottom；

类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口；

使用场景：在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等；

6.4 z-index属性

调整元素定位时重叠层的上下位置 ；

1.z-index属性值：整数，默认值为0 ；

2.设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系；

3.z-index值大的层位于其值小的层上方；

7 、动画

7.1 变形 transform

函数说明 translate() 平移函数，基于X 、Y坐标重新定位元素的位置 scale() 缩放函数，可以使任意元素对象尺寸发生变化 rotate() 旋转函数，取值是一个度数值 skew() 倾斜函数，取值是一个度数值

translate（）平移 px

transform:translate（x,y）同时向x,y轴偏移 transform:translateX（x）只向x轴偏移 transform:translateY（y）只向y轴偏移

scale() 缩放直接写倍数

transform:scale(缩放倍数) 同时向x,y轴缩放，中心放大 transform:scaleX(缩放倍数) 只向x轴缩放，水平拉伸 transform:scaleY(缩放倍数) 只向y轴缩放，垂直拉伸

rotate() 旋转 deg

transform:rotate(旋转角度deg) 相对原来的位置顺时针旋转 transform:rotateX(旋转角度deg) 相横坐标顺时针旋转 transform:rotateY(旋转角度deg) 相对原来的位置顺时针旋转

skew() 倾斜 deg

transform:skew(ax,ay) 倾斜调度deg transform:skew(ax) 只设置x轴的倾斜 transform:skew(ay) 只设置y轴的倾斜

7.2 过度 transition

transition:[transition-property transition-duration transition-timing-function transition-delay] transition-property 过度或动态模拟css属性 transition-duration 完成过度所需要时间 transition-timing-function 指定过度函数 transition-delay 过度开始出现的延迟时间 7.2.1 过渡属性（ transition-property ）

定义转换动画的CSS属性名称

1.IDENT：指定的CSS属性（width 、height 、background-color属性等）；

2.all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用al；

7.2.2 过渡所需的时间（ transition-duration ）

定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）；

7.2.3 过渡动画函数（ transition-timing-function ）

指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式；

ease：速度由快到慢（默认值）； linear：速度恒速（匀速运动）； ease-in：速度越来越快（渐显效果）； ease-out：速度越来越慢（渐隐效果）； ease-in-out：速度先加速再减速（渐显渐隐效果）； 7.2.4 过渡延迟时间（ transition-delay ）

指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果；

正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发；负值：元素过渡效果会从该时间点开始显示，之前的动作被截断； 0：默认值，元素过渡效果立即执行；

7.3 过度的触发机制

1.伪类触发

：hover 鼠标悬停和划过时的显示效果：active 控制按钮被点击时的显示效果：focus 获得聚焦对象的元素：checked 选中

2.媒体查询：通过@media属性判断设备的尺寸，方向等 JavaScript触发：

3.用JavaScript脚本触发

特殊用法

ul li:hover>span { background-color: aqua; border-color: aqua; }

7.3 动画

8 、项目经常使用的几个属性

项目新用属性

width: auto；宽度自适应,可以决绝窗口缩放展示错乱(用在头部导航栏等) border: 0px none; 剔除边框(常用去掉input的边框) outline: none; 去除选中文本框的样式(常用去掉，点击输入框时的边框变蓝) cursor: pointer; 光标移入变成手(常用作按钮的属性)