前端(二)-CSS

化羽羽

发布于 2022-10-28 11:43:40

1.8K0

发布于 2022-10-28 11:43:40

文章被收录于专栏：化羽学Java

1、样式

1.1 行内样式

<h1 style="color:red;">行内样式</h1>

1.2 内部样式

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

1.3 外部样式

<link rel="stylesheet" href="css/style01.css" type="text/css"/>
<!--
外部样式，引入使用link标签，写在head标签中,是单标签，但是rel属性和href属性是必须的，且rel="stylesheet"是固定的引入外部样式才可以生效,href属性指定外部文件的资源路径，type="text/css"可以省略;
-->

1.4 CSS优先级

就近原则;

2、选择器

2.1 基本选择器

2.1.1 标签选择器

<!--
选择器，基本作用是用于定位网页中的元素，进行样式美化，选取的是一组元素，不是一定是单个；
标签选择器，语法：标签名{声明1：声明2...}
-->/
h2{
	color: #FF0000;
}

2.1.2 类选择器

<!--类选择器，语法：标签的class属性值{声明1：声明2...} -->
.author{
	color: #00FF00;
}

2.1.3 id选择器

<!-- id选择器 语法：标签的id属性值{声明1：声明2...} -->
#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:颜色 x轴 y轴 阴影半径  -->
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="image/photo-1.jpg" alt="日用品" /></div>
    <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
    <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
    <div class="layer04">浮动的盒子……</div>
</div>
    .clear:after{
    content: ''; <!--在clear类后面添加内容为空-->
    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脚本触发

特殊用法

<!-- 
在进行伪类触发后还可以对指定标签操作；点击li的时候还可以改变span的背景色；
<li><span>1</span>  雅诗兰黛即时修护眼部精华霜15ml</li>
-->
ul li:hover>span {
    background-color: aqua;
    border-color: aqua;
}

7.3 动画

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

项目新用属性

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-07-05 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度

前端(二)-CSS

前端(二)-CSS

1、样式

1.1 行内样式

1.2 内部样式

1.3 外部样式

1.4 CSS优先级

2、选择器

2.1 基本选择器

2.1.1 标签选择器

2.1.2 类选择器

2.1.3 id选择器

2.1.4 选择器的优先级

2.2 高级选择器

2.2.1 层次选择器

2.2.2 结构伪类选择器

2.2.3 属性选择器

3、美化网页元素

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

3.2 字体样式

字体的粗细

3.3 文本样式

3.3.1 color

3.3.2 text-align

3.3.3 text-indent

3.3.4 line-heighr

3.3.5 text-decoration

3.3.6 vertical-align 垂直对其方式

3.4 文本阴影

3.5 超链接伪类

3.6 列表样式

3.7 背景样式

2.7.1 常见背景样式

2.7.2 设置背景图像

2.7.2.1 background-Image属性

2.7.3.2 background-repeat属性

2.7.3.3 background-position属性

2.7.3.4 简写

2.7.4.4 background-size

3.8 CSS渐变样式

4、盒子模型

4.1 盒子模型元素

4.2 边框

4.2.1 border-color

4.2.2 border-width

4.2.3 border-style

4.2.4 简写

4.2.5 border-collapse

4.2.6 border-spacing

4.3 内外边框

4.3.1 margin 外边距

4.3.2 外边距妙用

4.3.3 padding 内边距

4.4 圆角边框

4.5 盒子阴影

5、浮动

5.1 display属性

5.2 浮动

5.3 清除浮动

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

5.4.1 添加空div,并清除两边浮动

5.4.2 设置父元素的高度(灵活性差)

5.4.3 添加overflow属性(溢出处理)

5.4.4 父级添加伪类after

6、定位 posotion属性

6.1 relative 相对定位

6.2 absolute 绝对定位

6.3 fixed 固定定位

6.4 z-index属性

7、动画

7.1 变形 transform

7.2 过度 transition

7.2.1 过渡属性（ transition-property ）

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

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

7.2.4 过渡延迟时间（ transition-delay ）

7.3 过度的触发机制

7.3 动画

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

社区