Sorry, your browser cannot access this site
This page requires browser support (enable) JavaScript
Learn more >

css基础

发布于：Dec 25, 2024

css基础

介绍

CSS(Cascading Style Sheets，层叠样式表)，是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言。
在html中css有三种实现方式。

内联样式
在标签内部通过style属性来设置元素的样式。只能对一个标签生效。

1
<p style="color: red;font-size: 24px;">红色24号</p>

内部样式
将CSS样式编写到head中的style标签里,通过CSS选择器选中指定元素然后可以同时为这些元素一起设置样式，这样可以使样式进一步的复用。但不能跨页面复用。

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
    <head>
        <style>
            p {
                color: greenyellow;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <p>黄绿色20号</p>
    </body>
</html>

外部样式
将css样式编写到一个外部的文件中然后讲外部文件引入到css文件中，link标签引入。

1
2
3
4
5
/* css文件 */
p {
  color: grey;
  font-size: 15px;
}
1
2
3
4
5
6
7
8
9
<!-- html文件 -->
<html>
    <head>
        <link rel="stylesheet" href="css文件地址">
    </head>
    <body>
        <p>灰色15号</p>
    </body>
</html>

语法

css编写在style标签中，或者是css文件中。
css的语法主要分为选择器与声明块。

  • 选择器：
    通过选择器可以选中页面中指定的元素，
    例如：p 就是选中页面中所有的p元素。
  • 声明块：
    声明块紧跟在选择器的后边，使用一对{}括起来，
    通过声明块来指定要为元素设置的样式，声明的样式名和样式值之间使用:来连接，
    在一个声明块中可以写多个声明，多个声明之间使用;隔开。
1
2
3
4
5
选择器{
    样式名1: 样式值;
    样式名2: 样式值;
    样式名3: 样式值;
}

选择器

  • 标签选择器 标签名{}
  • id选择器 #id属性值{}
  • class选择器 .class属性值{}
  • 通配选择器 *{}
  • 交集选择器(选中同时符合多个条件的元素) 选择器1选择器2选择器n{}
  • 并集选择器(同时选择多个选择器对应的元素) 选择器1,选择器2,选择器n{}
  • 子元素选择器(选中指定父元素的指定子元素) 父元素>子元素{}
  • 后代元素选择器(选中指定元素内的指定后代元素)祖先元素 后代{}
  • 兄弟选择器(选择仅挨的下一个兄弟) 前一个+下一个{}
  • 后续兄弟选择器(选择之后所有的兄弟) 兄～弟{}
1
2
3
p {
    background-color: red !important;
}

伪类

伪类用来描述一个元素的特殊状态。在选择器后添加:来添加各样的伪类。

  • 第一个子元素 :first-child
  • 最后一个子元素 :last-child
  • 选中第n个子元素(数字:对应的,n:所有的,2n:偶数,2n+1:奇数) :nth-child()
  • 否定伪类 :not(选择器)
  • 未访链接 :link
  • 访问过的链接 :visited
  • 鼠标移入 :hover
  • 鼠标点击 :active

伪元素

伪元素，表示页面中一些特殊的并不真实存在的元素。在选择器后添加::来添加各样的伪元素。

  • 第一个字母 ::first-letter
  • 表示第一行 ::first-line
  • 选中的内容 ::selection
  • 元素的开始位置 ::before
  • 元素的结束位置 ::after

其中before和after要结合content使用。

优先级

若多个选择器都更改了样式导致冲突，选择器越具体则优先使用。一般遵循行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器。
使用一个 !important 声明时，此声明将覆盖任何其他声明。
当两条相互冲突的带有 !important 的声明被应用到相同的元素上时，将使用更大优先级的声明。

实例

单位

在调整便签大小和设置字体时会使用单位来确定具体的大小，主要的大小单位有以下几个：

  • 像素 px
    不同显示器一个像素的大小也不相同，显示效果越好越清晰，像素就越小，反之像素越大。
  • 百分比 %
    将会根据其父元素的样式来计算该值，当父元素的属性值发生变化时，子元素也会按照比例发生改变。
  • em
    其使用前元素的字体大小来计算的1em = 1font-size。当设置字体相关的样式时，会使用。
  • rem
    相对于根元素(html)的字体大小来计算。

背景

背景属性用于定义元素的背景。
背景可以设置颜色或图片。

1
2
3
4
5
6
.div1 {
    background-color:颜色值;
}
.div2 {
    background-image:url(文件路径);
}

对齐方式

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
background-repeat:属性可以修改平铺规则。
接受一个或两个参数，当接受两个参数时第一个参数表水平，第二个参数表垂直。

值 描述
repeat 会重复覆盖整个区域。最后一个图像会被裁剪。
space 图像会尽可能得重复，但是不会裁剪。第一个和最后一个图像会被固定在元素 的相应的边上，同时空白会均匀地分布在图像之间。
round 随着允许的空间在尺寸上的增长。
no-repeat 图像不会被重复。 
1
2
3
4
5
6
7
8
9
10
/* 单值语法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;
/* 双值语法：水平 horizontal | 垂直 vertical */
background-repeat: repeat space;
background-repeat: no-repeat round;

设置位置

使用background-position 属性可以定义背景的位置。
属性被指定为一个或多个 <position>值，用逗号隔开。
其值可能是关键字 center、top、left、bottom、right 、长度 或 %。

1
2
3
4
5
6
7
background-position: center;

background-position: 25% 75%;

background-position: 0 0;

background-position: right 3em bottom 10px;

设置大小

background-size 属性可以设置背景图片大小。图片可以保有其原有的尺寸、拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

参数 介绍
auto 以背景图片的比例缩放背景图片。
cover 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。保持图像的宽高比例，超出的部分会被裁剪。
contain 缩放背景图片以完全装入背景区，可能背景区部分空白。会显示由background-color 设置的背景颜色。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 关键字 */
background-size: cover
background-size: contain

/* 一个值：这个值指定图片的宽度，图片的高度隐式的为 auto */
background-size: 50%
background-size: 12px
background-size: auto

/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: auto 6px

/* 逗号分隔的多个值：设置多重背景 */
background-size: auto, auto, auto
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

文本

颜色

使用color属性来给文本颜色。

1
2
3
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

字体

  1. font-size：指定文字的大小,浏览器中一般默认的文字大小都是16px，默认的最小的字体是12px，常用的单位有px，rem，em。
  2. font-family：指定文字的字体，如果浏览器支持则使用该字体，若不支持，则使用默认字体。可以同时指定多个字体，多个字体之间使用 , 分隔，浏览器会优先使用前边的字体。
    例：font-family:'Aarial' ,'Aa原味吐司','sans-serif';
  3. font-style：用来设置文字的斜体。
    可选值：
    • normal：默认值，文字正常显示。
    • italic：文字会以斜体显示。
  4. font-weight：用来设置文本的加粗效果。
    可选值：
    • normal：默认值，文字正常显示。
    • bold：文字加粗显示。
  5. line-height：用来设置行高，可以使用常用的单位与数字、百分比，数字代表着放大倍数。

也可以使用font进行简写。其必须包含font-size与font-family，选择性包含
font-style、font-variant、font-weight、font-stretch与line-height。
其中：

  • font-style、font-variant 和 font-weight 必须在 font-size 之前。
  • line-height 必须跟在 font-size 后面，由/分隔，例：16px/3。
  • font-family 必须最后指定。

对齐方式

使用text-align属性来给文本设置水平对齐方式。

参数 介绍
start 如果内容方向是左至右，则等于 left，反之为 right。
end 如果内容方向是左至右，则等于 right，反之为 left。
left 行内内容向左侧边对齐。
right 行内内容向右侧边对齐。
center 行内内容居中。
justify 文字向两侧对齐，将内容隔开，使其左右边缘与行框的左右边缘对齐，对最后一行无效。
justify-all 与 justify 一致，但是强制使最后一行两端对齐。 
1
p.date {text-align:right;}

文本装饰

text-decoration属性用来设置或删除文本的装饰。主要是用来删除链接标签的下划线。
其是以下属性的简写：

  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-thickness

不做过多介绍详情看这里。

1
2
3
4
5
6
7
8
// 下划线
text-decoration: underline;
// 上划线 红
text-decoration: overline red;
// 删除线
text-decoration: line-through;
// 取消任何装饰
text-decoration: none;

文本转换

text-transform属性用于文本转换。

参数 介绍
none 默认值，不做处理
capitalize 单词的首字母大写，通过空格来识别单词
uppercase 所有的字母都大写
lowercase 所有的字母都小写

首行缩进

text-indent 来设置首行缩进

  • 指定一个正值时，会自动向右侧缩进指定的像素
  • 指定一个负值，则会向左移动指定的像素,一般都会使用em作为单位

文本裁剪

让...来显示多余文本，通过以下设置来实现。

1
2
3
4
5
6
/* 单行显示文本 */
white-space: nowrap;
/* 隐藏多余宽度的文本 */
overflow: hidden;
/* 显示省略符号来代表被修剪的文本 */
text-overflow: ellipsis;

浮动

可以使用float设置一个浮动元素。其拥有right与left两个可选值。
会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
元素浮动之后，周围的元素会重新排列，布局可能会被影响。
可以为受到影响的元素添加 clear:both; 来避免。被指定的元素两侧不能出现浮动元素。

盒子模型

所有HTML元素可以看作盒子。
其有以下几个属性：

  • margin(外边距)：清除边框外的区域，外边距是透明的。
  • border(边框)：围绕在内边距和内容外的边框。
  • padding(内边距)：清除内容周围的区域，内边距是透明的。
  • content(内容)：盒子的内容，显示文本和图像。

一些元素可能自带边距，导致布局混乱，可以设置所有元素的margin与padding为0。

1
`*{margin: 0;padding: 0;}`

这些属性在设置：

  • 一个值时：上下左右都为设置的值。
  • 两个值时：上下为第一个值，左右为第二个值。
  • 四个值时：按照上右下左的顺序。

边框

  1. border-style:设置边框样式。
    可选值：
    • none: 默认值，无边框。
    • dotted: 定义一个点线边框。
    • dashed: 定义一个虚线边框。
    • solid: 定义实线边框。
  2. border-width：设置边框宽度。
  3. border-color：设置边框颜色。
  4. border-radius：设置边框圆角的数值。

可以使用border属性进行简写，其包含border-width、border-style与border-color。

1
border:5px solid red;

阴影

box-shadow 用于在元素上添加阴影效果。

1
2
3
box-shadow: 
    x偏移量 y偏移量 阴影模糊半径 阴影扩散半径 阴影颜色,
    规则二.... ;

若只给出两个数值，那么这两个值将会被当作 x偏移量,y偏移量 来解释。
若给出了第三个数值，那么第三个值将会被当作 阴影模糊半径 来解释。
若给出了第四个数值，那么第四个值将会被当作 阴影扩散半径 来解释。
若对同一个元素添加多个阴影效果，可以使用,将每个阴影规则分隔开。
影阴合集。

定位

position 属性指定了元素的定位类型。
在设置定位后可以设定
top、bottom、left与right的偏移量。
其有五个可选值：

  1. static(静态定位)：默认值，即没有定位，遵循正常的文档流对象。不会受到 top、bottom、left与right影响。
  2. fixed(固定定位)：位置相对于浏览器窗口是固定的，即使窗口滚动其也不会移动。固定定位与文档流无关，因此不占据空间。
  3. relative(相对定位)：对于其原本的位置做偏移，其依旧占据原本的空间。
  4. absolute(绝对定位)：非常疑惑的命名 相对于最近的已定位父元素做偏移，若元素没有已定位的父元素，其相对于<html>标签做偏移。将不再占据原本的空间。
  5. sticky(粘滞定位)：根据用户的滚动位置来定位，在跨越特定阈值前为相对定位，超过后为固定定位。
    可以指定top、right、bottom或left 四个值之一为阈值。

弹性盒子

弹性盒子可以适应不同的屏幕大小以及设备类型，确保元素拥有恰当的行为的布局方式。
通过将 display 设置为 flex，来定义弹性容器。
以下是其部分属性：

属性 介绍
flex-direction 设置主轴方向。
row：默认值。水平显示。
row-reverse: 从右到左的水平显示。
column： 垂直显示。
column-reverse：从下到上的重置显示。
justify-content 设置元素在主轴方向上的排列方式。
flex-start： 默认值。从行首起始位置开始排列。
flex-end： 从行尾位置开始排列。
center： 居中排列。
space-between： 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。
space-evenly： 均匀排列每个元素，每个元素之间的间隔相等。
space-around： 均匀排列每个元素，每个元素周围分配相同的空间。
align-content 设置侧轴元素的排列方式。
参数与justify-content相同。
align-items 设置元素在侧轴方向上的对齐方式。
stretch：默认值。元素被拉伸以适应容器。
center：居中。
flex-start：元素位于侧轴开始位置。
flex-end：元素位于侧轴结束位置。
baseline：元素位于容器的基线上。
flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。
nowrap： 默认值。不拆行或不拆列。
wrap： 在必要的时候拆行或拆列。
wrap-reverse： 在必要的时候拆行或拆列，但是以主轴相反的顺序拆分。
order 在子元素上使用。参数为一个数字，代表子元素在主轴上的顺序。
align-self 在子元素上使用。覆盖容器的align-items属性。参数与align-items相同。
flex 在子元素上使用。设置子元素分配空间权重。

覆盖元素

  • 元素的定位与文档流无关，所以定义了定位的元素可以覆盖页面上的其它元素。
  • z-index 属性指定了一个元素的堆叠顺序。
    一个元素可以有正数或负数的堆叠顺序，具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
  • overflow:hidden 可以强制隐藏内部超出的内容。

转换

使用 transform 属性向元素进行旋转、缩放、移动或倾斜的转换。
transform:rotate(7deg);
其有一些相关属性如下：

属性 介绍
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用16个值4x4矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。

使用 transform-origin 属性可以调整转换元素的位置。
ransform-origin: x-axis y-axis z-axis;

  • x-axis的值须为left、center、right与长度单位或百分比。
  • y-axis的值须为top、center、bottom与长度单位或百分比。
  • 与z-axis的值须为单位。

动画

过度

使用 transition 设置元素的过渡效果。多个属性之间用逗号进行分隔。但只能为有具体数值的参数设置过度。
其有一些相关属性如下：

属性 介绍
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认 0。
transition-timing-function 规定过渡效果的时间曲线。默认 ease。
transition-delay 规定过渡效果何时开始。默认 0。

其中
transition 简写属性，用于在一个属性中设置上诉四个过渡属性。

1
2
3
4
5
6
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* 等价于 */
transition: width 1s linear 2s;

动画

使用 @keyframes 动画名{ } 来设置动画。
其中可以使用 from、to、%来填充具体的操作。

1
2
3
4
5
6
7
8
9
10
11
12
@keyframes 动画名
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
@keyframes 动画名
{
    from {background: red;}
    to {background: yellow;}
}

@keyframes 操作只是设置动画，要使用动画还需使用 animation 要将其绑定到对应的元素上。
其有一些相关属性如下：

属性 介绍
animation-name 指定要绑定的动画名称。
animation-duration 动画指定需要多少秒或毫秒完成。
animation-timing-function 设置动画将如何完成一个周期。
linear：动画从头到尾的速度是相同的。
ease：默认。动画以低速开始，然后加快，在结束前变慢。
ease-in：动画以低速开始。
ease-out：动画以低速结束。
ease-in-out：动画以低速开始和结束。
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。
animation-direction 指定是否应该轮流反向播放动画。
normal：默认值。动画按正常播放。
reverse：动画反向播放。
alternate：动画在奇数次正向播放，在偶数次反向播放。
alternate-reverse：动画在奇数次反向播放，在偶数次正向播放。
animation-fill-mode 规定当动画完成时或有一个延迟未开始播放时，要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。
paused：指定暂停动画。
running：指定正在运行的动画。

其中
animation 简写属性，用于在一个属性中设置上诉的属性。

1
animation:动画名 5s infinite;

其他

user-select

user-select 属性用于控制用户是否可以选择文本。
其可以使用的参数如下：

参数 介绍
none 元素及其子元素的文本不可选中。
text 用户可以选择文本。
all 双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中。
contain 允许在元素内选择；但是，选区将被限制在该元素的边界之内。
auto 在 ::before与::after 伪元素上，采用的属性值是 none
若元素是可编辑元素，则采用的属性值是 contain。否则，继承元素的值。

-webkit-user-drag

-webkit-user-drag 属性用于设置元素和其内容是否可以被拖拽。
其可以使用的参数如下：

参数 介绍
auto 使用默认的拖拽行为，只有图片和链接可以被拖拽。
element 整个元素可拖拽。
none 在选中后可拖拽。

overflow

overflow 属性用于设置元素溢出时的行为。
其可以使用一个或二个参数。
若指定两个，第一个用于 overflow-x，第二个用于 overflow-y。
否则，overflow-x 和 overflow-y 设置为相同的属性值。

其可以使用的参数如下：

参数 介绍
visible 内容不能被裁减，可能渲染到边距盒padding的外部。
hidden 内容被裁减以适应边距padding。
不提供滚动条，不允许用户滚动。内容可以通过scrollLeft等方式滚动。
clip 内容被裁减以适应边距padding。
不提供滚动条，不允许以任何方式滚动。
scroll 内容被裁减以适应边距padding。
无论是否实际裁剪了任何内容，浏览器总是显示滚动条。
auto 若内容适应边距padding，等同与 visible ，若内容溢出，则提供滚动条。

scrollbar-width

scrollbar-width 属性允许设置元素显示滚动条时设置滚动条的最大宽度。
其可以使用的参数如下：

参数 介绍
auto 默认滚动条宽度。
thin 瘦滚动条宽度。
none 不显示滚动条，但元素可以滚动。

参考资料

菜鸟css教程
面向开发者的 web 技术-CSS文档
漂亮的 CSS box-shadow 示例

关于本人

HaiYao的博客
Git主页

更新于：Feb 20, 2025

前端

css

评论