CSS | 层叠样式表

西红柿炒牛肉
120 阅读5分钟

CSS | 层叠样式表

CSS是一种描述HTML文档样式的语言。

CSS描述应该如何显示HTML元素。

image-20240227215202232.png

  • 块级元素
    块级元素总是从新行开始，并占据可用的全部宽度
  • 行内元素 内联元素仅占用所需的宽度

CSS 语法

image-20240227203511924.png

选择器

  • 选择器用于查找要设置样式的HTML元素，五类选择器

  • 简单选择器（根据名称、id、类来选取元素）

    • id 选择器，属性id=
    • 类选择器，属性class=

  • 组合器选择器（根据它们之间的特定关系来选取元素）

    • 后代选择器匹配属于指定元素后代的所有元素，[空格]
    • 子选择器匹配属于指定元素子元素的所有元素，[>]
    • 相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素，[+]
    • 通用兄弟选择器匹配属于指定元素的同级元素的所有元素，[~]

  • 伪类选择器（根据特定状态选取元素）

  • 伪元素选择器（选取元素的一部分并设置其样式）

  • 属性选择器（根据属性或属性值来选取元素）

    • 属性选择器用于选取带有指定属性的元素，标签[属性]

使用

外部样式表 <link>

<link
  href="https://g.csdnimg.cn/lib/swiper/6.0.4/css/swiper.css"
  rel="stylesheet"
  type="text/css"
>

内部样式表 <style>

<style>
  body {
    margin: 0;
    padding: 0;
  }
</style>

内联样式 style

<p style="text-align: center; color: blue; font-size: 18px;">
文本大小为18px，蓝色，居中展示
</p>

!important

.div1_1 {
    width: 180px;
    height: 180px;
    background-color: cyan !important;
}
​
<div class="div1_1" style="background-color: #0a6bff">div11</div>
  • !important覆盖所有样式规则

背景

属性说明
background:颜色 图片 位置x 位置y 图片大小 重复
background-color:颜色
background-image:一个或者多个背景图像
background-position:背景图片设置初始位置
background-size:背景图片大小
background-clip:背景(图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面
background-repeat:图像重复方式
background-attachment:scroll/fixed/local

边框

border-style 属性指定要显示的边框类型。允许以下值：

  • dotted - 定义点线边框
  • dashed - 定义虚线边框
  • solid - 定义实线边框
  • double - 定义双边框
  • groove - 定义3D坡口边框。效果取决于border-color值
  • ridge - 定义3D脊线边框。效果取决于border-color值
  • inset - 定义3D inset边框。效果取决于border-color值
  • outset - 定义3D outset边框。效果取决于border-color值
  • none - 定义无边框
  • hidden - 定义隐藏边框

border-width 属性指定四个边框的宽度

border-color 属性用于设置四个边框的颜色，未设置 ，则它将继承元素的颜色

border-radius 属性用于向元素添加圆角边框

内外边距

  • 外边框margin
  1. 将margin属性设置为 auto，以使元素在其容器中水平居中
  2. 将margin属性设置为 inherit，将继承父元素的外边距
  3. 外边距合并，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
  • 内边距padding
  1. 添加元素的内边距会添加到元素的总宽度中，元素宽度 = width + 内边距
  2. 使用box-sizing:border-box，使元素宽度和内边距宽度不变，内部可用空间减少

轮廓

  • 轮廓是在元素边框之外绘制的，并且可能与其他内容重叠，元素的总宽度和高度不受轮廓线宽度的影响。

outline-style属性指定轮廓的样式，并可设置如下值：

  • dotted - 定义点状的轮廓。
  • dashed - 定义虚线的轮廓。
  • solid - 定义实线的轮廓。
  • double - 定义双线的轮廓。
  • groove - 定义3D凹槽轮廓。
  • ridge - 定义3D凸槽轮廓。
  • inset - 定义3D凹边轮廓。
  • outset - 定义3D凸边轮廓。
  • none - 定义无轮廓。
  • hidden - 定义隐藏的轮廓。

outline-width 属性指定轮廓的宽度，并可设置如下值之一：

  • thin（通常为 1px）
  • medium（通常为 3px）
  • thick （通常为 5px）
  • 特定尺寸（以 px、pt、cm、em 计）

outline-color 属性用于设置轮廓的颜色

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的

文本

属性描述
color设置文本颜色。
direction指定文本的方向 / 书写方向。
letter-spacing设置字符间距。
line-height设置行高。
text-align指定文本的水平对齐方式。
text-decoration指定添加到文本的装饰效果。
text-indent指定文本块中首行的缩进。
text-shadow指定添加到文本的阴影效果。
text-transform控制文本的大小写。
text-overflow指定应如何向用户示意未显示的溢出内容。
unicode-bidi与 direction 属性一起使用，设置或返回是否应重写文本来支持同一文档中的多种语言。
vertical-align指定文本的垂直对齐方式。
white-space指定如何处理元素内的空白。

字体

.page-title {
    font-family: "Times New Roman", Times, serif;
    font-style: normal; // normal 正常； italic 斜体；
    font-size: 30px;
    font-weight: bold;
}

应用

1 居中
.container {
  display: flex;
  /* 垂直居中 */
  align-items: center; 
  /* 水平居中 */
  justify-content: center;
}
2 不换行
p {
  white-space:nowrap;
}
3 超出显示省略号
p {
  overflow: hidden;/*超出部分隐藏*/
  /* 超出部分显示省略号 */
  text-overflow:ellipsis;
  /* 规定段落中的文本不进行换行 */
  white-space: nowrap;
  width: 250px;/*需要配合宽度来使用*/
}
4 文本截断特定行数
.overflow-truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}c
5 强制使浏览器盒子样式一致
html {
  box-sizing: border-box;
}
​
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
6 整个页面灰色
html {
  -webkit-filter: grayscale(.95);
}
7 <textarea>自动增加其高度
textarea {
  form-sizing: normal
}
8 给 “默认” 链接定义样式
a[href]:not([class]) {
  color: red;
  text-decoration: underline;
}
9 没有文本内容的标签引入href
a[href^="http"]:empty::before {
 content: attr(href);
}
10 表单设置统一字体
input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}
11 垂直居中
html, body {
  height: 100%;
  margin: 0;
}
​
body {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}
12 逗号分隔列表
ul > li:not(:last-child)::after {
  content: ",";
}
avatar
文章
阅读
粉丝