首页 前端知识 CSS基础使用

CSS基础使用

2024-02-17 09:02:59 前端知识 前端哥 656 441 我要收藏

前言:该笔记适合学习过CSS,想快速回忆复习的人

css基本语法

选择器

标签选择器: div

类选择器: .class_div

id选择器: #id_div

选择器优先级:id>类>标签

!important:在html元素行内添加,优先级最高

后代选择器:.class_div span

群组选择器:.class_div, #id_div

背景样式

background-color:颜色

background-image:图片url background-size:图片大小

background-position:图片位置center

background-repeat:图片重复 属性:no-repeat、repeat-x、repeat、repeat-y

文本属性

line-height:行高

text-align:对齐方式

text-decoration:文本修饰 属性:line、color、style、thickness

字体属性

font-family:类型

font-size:大小

font-weight:字体粗细

font-style:风格

链接中的伪类
状态效果
a:link普通的、未被访问的链接。
a:hover鼠标指针位于链接的上方。
a:active链接被单击的时刻。
a:visited用户已访问的链接。

盒模型

margin:外边框属性

padding:内边距属性

border:边框属性

dispaly属性

属性值说明
block元素以块级方式展示。
inline元素以内联方式展示。
inline-block元素以内联块的方式展示。
none隐藏元素。

inline:可以让像 div 这样的霸道块,接纳其他元素来自己的地盘。

浮动与定位

float:left、right:元素沿其容器的左侧或右侧放置 属性:left、right

position:对元素位置控制

  • 静态定位(position:inherit)(默认:普通流、标准流)

  • 相对定位(position:relative) (相对于自身位置移动,占位置)

  • 绝对定位(position:absolute) (相对带有定位的父级,不占位置)

  • 固定定位(position:fixed)(元素不随着滚动条拖动而改变位置,不占位置)

    子绝父相

.ad-l {
    position: relative;
    left: -40px;
}

CSS新特性

新增选择器

属性选择器:通过正则去匹配指定属性的元素

选择器描述
E[attr^=“xx”]选择元素 E,其中 E 元素的 attr 属性是以 xx 开头的任何字符。
E[attr$=“xx”]选择元素 E,其中 E 元素的 attr 属性是以 xx 结尾的任何字符。
E[attr*=“xx”]选择元素 E,其中 E 元素的 attr 属性是包含 xx 的任何字符。

子元素伪类选择器:选择某元素的子元素

选择器描述
E:first-child选择元素 E 的第一个子元素。
E:last-child选择元素 E 的最后一个子元素。
E:nth-child(n)选择元素 E 的第 n 个子元素,n 有三种取值,数字、odd 和 even。注意第一个子元素的下标是 1。
E:only-child选择元素 E 下唯一的子元素。
E:first-of-type选择父元素下第一个 E 类型的子元素。
E:last-of-type选择父元素下最后一个 E 类型的子元素。
E:nth-of-type(n)选择父元素下第 n 个 E 类型的子元素,n 有三种取值,数字、odd 和 even。
E:only-of-type选择父元素唯一的 E 类型的子元素。
E:nth-last-child(n)选择所有 E 元素倒数的第 n 个子元素。
E:nth-last-of-type(n)选择所有 E 元素倒数的第 n 个为 E 的子元素。

UI伪类选择器:通过元素的状态来选择

选择器描述
:focus给获取焦点的元素设置样式。
::selection给页面中被选中的文本内容设置样式。
:checked给被选中的单选框或者复选框设置样式。
:enabled给可用的表单设置样式。
:disabled给不可用的表单设置样式。
:read-only给只读表单设置样式。
:read-write给可读写的表单元素设置样式。
:valid验证有效。
:invalid验证无效。
文本阴影

text-shadow: x-offset y-offset blur color;

文本溢出

text-overflow:设置超长文本省略显示

属性值描述
clip修剪文本。
ellipsis显示省略符号来代表被修剪的文本。
圆角边框

border-radius: 顺序:左上角、右上角,右下角,左下角

盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

说明
h-shadow必选,水平阴影的位置,允许负值。
v-shadow必选,垂直阴影的位置,允许负值。
blur可选,模糊距离。
spread可选,阴影的大小。
color可选,阴影的颜色。
inset可选,将外部阴影改为内部阴影。
渐变属性

线性渐变

/*从上到下线性渐变*/
.gradient1 {
    background-image: linear-gradient(#ff577f, #c6c9ff);
}
/*从左到右线性渐变*/
.gradient2 {
    background-image: linear-gradient(to right, #ff9d72, #c6c9ff);
}
/*从左上角到右下角的渐变*/
.gradient3 {
    background-image: linear-gradient(to bottom right, #8ad7c1, #c6c9ff);
}
/*定义角度的渐变*/
.gradient4 {
    background-image: linear-gradient(50deg, #bc6ff1, #ffd5cd);
}

径向渐变

/*均匀分布径向渐变*/
.gradient1 {
    background-image: radial-gradient(#ff577f, #c6c9ff, #8ad7c1);
}
/*不均匀渐变*/
.gradient2 {
    background-image: radial-gradient(#8bcdcd 5%, #ff9d72, #c6c9ff);
}
/*椭圆形渐变*/
.gradient3 {
    background-image: radial-gradient(ellipse, #8ad7c1, #c6c9ff, #fce2ce);
}
/*圆形渐变*/
.gradient4 {
    background-image: radial-gradient(circle, #bc6ff1, #ffd5cd, #b6eb7a);
}
重复性径向渐变

是用重复性的径向渐变组成的图像。它与径向渐变的区别在于,它会从原点开始重复径向渐变来覆盖整个元素。

元素转换

旋转函数(transform:rotate(角度edg)):绕原点旋转 其他属性:rotateX()、rotateY()、

移动函数(transform:translate(px,px)):定位 X 轴和 Y 轴的新坐标

其他属性:translateX()、translateY()

缩放函数(transform:scale(number):沿着 X 轴和 Y 轴缩放

其他属性:scaleX()、scaleY()

CSS3过渡

元素从一种样式逐渐过渡到另一种样式

transition: 指定属性 持续时间 速度曲线 开始时间; (前两个必写)

transition: transform 1s ease-in-out;
动画

@keyframes 被称为关键帧,它能够设置一些元素的样式,让该元素可以从原来的样式渐渐过渡到新的样式中。

@keyframes 动画名 {    
    0% {样式属性:属性值;}  
    25% {样式属性:属性值;}    
    50% {样式属性:属性值;}    
    100% {样式属性:属性值;} 
}
animation: 动画名 完成动画的周期(s) 是否重复;

弹性盒子

display: flex 盒子为弹性盒子

flex-direction 弹性子元素在父容器中的排列方向和顺序

属性值描述
row横向从左到右排列(左对齐),默认的排列方式。
row-reverse反转横向排列(右对齐),从后往前排,最后一项排在最前面。
column纵向排列
column-reverse反转纵向排列,从后往前排,最后一项排在最上面。

flex-wrap 弹性盒子的子元素换行方式

nowrap默认, 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行,子项内部会发生断行。
wrap-reverse反转 wrap 排列。

align-items 弹性盒子元素在侧轴(纵轴)方向上的对齐方式。

属性值描述
flex-start弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
flex-end弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
center弹性盒子元素在该行的侧轴(纵轴)上居中放置。
baseline如弹性盒子元素的行内轴与侧轴为同一条,则该值与 flex-start 等效。其它情况下,该值将参与基线对齐。
stretch如果指定侧轴大小的属性值为 auto,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照 min/max-width/height 属性的限制。

align-content 控制多行的对齐方式,一行则不起作用

属性值描述
stretch默认。各行将会伸展以占用剩余的空间。
flex-start各行向弹性盒容器的起始位置堆叠。
flex-end各行向弹性盒容器的结束位置堆叠。
center各行向弹性盒容器的中间位置堆叠。
space-between各行在弹性盒容器中平均分布。
space-around各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。

媒体查询

@media语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

mediatype (媒体类型)取值范围如下:

描述
all适用于所有设备
print用于打印机和打印预览
screen用于电脑屏幕,平板电脑,智能手机等
speech用于屏幕阅读器等发声设备
描述
and用于将多个媒体查询规则组合成单条媒体查询,当每个查询规则都为真时则该条媒体查询为真
not用来排除某种设备
only用以指定某特定媒体设备

media feature (媒体特性)常用取值如下:

描述
max-width定义输出设备中的页面最大可见区域宽度
max-height定义输出设备中的页面最大可见区域高度
min-width定义输出设备中的页面最小可见区域宽度
min-height定义输出设备中的页面最小可见区域高度
orientation视口(viewport)的旋转方向。portrait :表示 viewport 处于纵向,即高度大于等于宽度 ; landscape :表示 viewport 处于横向,即宽度大于高度
转载请注明出处或者链接地址:https://www.qianduange.cn//article/2194.html
标签
评论
发布的文章

jquery.动画和事件

2024-03-03 11:03:13

jQuery位置方法

2024-03-03 11:03:13

jQuery中val()和text()的区别

2024-03-03 11:03:11

jquery实现甘特图时效管理

2024-03-03 11:03:47

django之 echarts数据可视化

2024-03-03 11:03:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!