<返回更多

一文读懂CSS样式，Django学前必会

2023-05-16  今日头条  你的老师父
加入收藏

css简介

CSS（层叠样式表）是一种用于描述网页展示样式的语言。它可以与html结合使用，通过定义样式规则来控制网页的外观和布局。CSS的核心理念是分离样式和内容，使得开发者可以更加灵活和高效地管理网页的外观和布局。

在HTML中使用CSS

在HTML中使用CSS样式的方法有多种，以下是其中常见的方法：

  1. 内部样式表

内部样式表是指将CSS样式写在HTML文件的<head>标签内的<style>标签中，这样写的样式只对当前HTML文件生效。

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <style>
    /* 内部样式表 */
    body {
      background-color: pink;
    }
    h1 {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>Welcome to my website!</h1>
  <p>This is some text.</p>
</body>
</html>
  1. 外部样式表

外部样式表是指将CSS样式写在一个单独的CSS文件中，然后在HTML文件中通过<link>标签引入该CSS文件，这样写的样式可以被多个HTML文件共享。

在CSS文件中，可以定义多个样式，每个样式可以应用到HTML文件中的一个或多个元素。

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to my website!</h1>
  <p>This is some text.</p>
</body>
</html>

styles.css

/* 外部样式表 */
body {
  background-color: pink;
}
h1 {
  color: blue;
}

以上两种方法都可以实现CSS样式在HTML中的应用，使用哪种方法取决于具体的需求和场景。通常情况下，外部样式表更适合大型项目，内部样式表更适合小型项目或单独的页面。

  1. 在HTML标签中直接使用CSS样式

在HTML标签中直接使用CSS样式的方法是通过元素的style属性来实现的。style属性允许将CSS样式直接应用于元素，具体语法如下：

<标签名 style="属性1: 值1; 属性2: 值2; 属性3: 值3; ...">内容</标签名>

其中，属性和值的格式与CSS语法相同，多个属性和值之间使用分号（;）分隔。

例如，下面的代码将应用一个蓝色的背景和白色的文字颜色到<h1>标签：

<h1 style="background-color: blue; color: white;">Hello World!</h1>

需要注意的是，通过style属性应用的样式只对当前元素生效，不会影响其他元素。此外，使用style属性将样式直接写在HTML标签中可能会使HTML代码变得复杂和难以维护，因此不推荐在大型项目中频繁使用该方法。

CSS选择器

CSS选择器用于选择要应用样式的HTML元素。

元素选择器

元素选择器用于选择特定类型的HTML元素，如<p>、<div>、<h1>等。

/* 选择所有的<p>元素 */
p {
  color: red;
}

ID选择器

ID选择器用于选择具有特定ID的HTML元素，ID在HTML文档中应该是唯一的。

/* 选择具有ID为"myDiv"的元素 */
#myDiv {
  color: blue;
}

类选择器

类选择器用于选择具有特定类的HTML元素，一个元素可以有多个类。

/* 选择具有class为"myClass"的元素 */
.myClass {
  font-size: 16px;
}

属性选择器

属性选择器用于选择具有特定属性的HTML元素。

/* 选择具有title属性的元素 */
[title] {
  color: green;
}

/* 选择title属性值为"hello"的元素 */
[title="hello"] {
  color: purple;
}

后代选择器

后代选择器用于选择某个元素的后代元素，两个元素之间使用空格分隔。

/* 选择所有<div>元素内部的<p>元素 */
div p {
  font-weight: bold;
}

子元素选择器

子元素选择器用于选择某个元素的直接子元素，两个元素之间使用大于号>分隔。

/* 选择<div>元素的直接子元素<p> */
div > p {
  text-align: center;
}

相邻兄弟选择器

相邻兄弟选择器用于选择某个元素之后紧跟着的兄弟元素，两个元素之间使用加号+分隔。

/* 选择class为"first"的元素之后紧跟着的class为"second"的元素 */
.first + .second {
  color: orange;
}

通用兄弟选择器

通用兄弟选择器用于选择某个元素之后的所有兄弟元素，两个元素之间使用波浪号~分隔。

/* 选择class为"first"的元素之后的所有class为"second"的元素 */
.first ~ .second {
  background-color: yellow;
}

伪类选择器

伪类选择器用于选择具有特定状态的元素，如悬停、访问过等。

/* 鼠标悬停时改变链接的颜色 */
a:hover {
  color: red;
}

/* 已访问过的链接改变颜色 */
a:visited {
  color: purple;
}

/* 当前活动的链接改变颜色 */
a:active {
  color: green;
}

伪元素选择器

伪元素选择器用于选择元素的某个部分，如元素的第一行、第一个字母等。

/* 选择元素的第一行 */
p::first-line {
  font-weight: bold;
}

/* 选择元素的第一个字母 */
p::first-letter {
  font-size: 24px;
}

CSS盒模型

CSS盒模型是一个用于描述HTML元素的布局模型。每个HTML元素都被视为一个矩形盒子，包含了内容区域、内边距、边框和外边距四个部分。以下是CSS盒模型的四个部分：

  • 内容区域（Content）：元素的实际内容。
  • 内边距（Padding）：内容区域与边框之间的空白区域。
  • 边框（Border）：内边距和外边距之间的边框线。
  • 外边距（Margin）：边框与相邻元素之间的空白区域。

下面是一个CSS盒模型的示意图：

+----------------------------------------------------+
| Margin                                                                  |
|   +--------------------------------------------+      |
|   | Border                                                       |       |
|   |   +------------------------------------+      |       |
|   |   | Padding                                        |        |       |
|   |   |   +----------------------------+     |        |        |
|   |   |   | Content                              |     |        |        |
|   |   |   |                                            |     |        |        |
|   |   |   |                                            |     |        |        |
|   |   |   |                                            |     |        |        |
|   |   |   +----------------------------+     |        |        |
|   |   +------------------------------------+      |        |
|   +--------------------------------------------+        |
|                                                                                |
+----------------------------------------------------+
  1. 相关属性

width和height

width和height属性分别用于设置元素的宽度和高度。

/* 设置元素的宽度为200像素，高度为100像素 */
div {
  width: 200px;
  height: 100px;
}

padding

padding属性用于设置元素的内边距，取值可以是像素值、百分比等。

/* 设置元素的上下内边距为10像素，左右内边距为20像素 */
div {
  padding: 10px 20px;
}

border

border属性用于设置元素的边框，取值可以分别指定边框的样式、宽度和颜色。

/* 设置元素的边框样式为实线，宽度为2像素，颜色为红色 */
div {
  border: solid 2px red;
}

margin

margin属性用于设置元素的外边距，取值可以是像素值、百分比等。

/* 设置元素的上下外边距为10像素，左右外边距为20像素 */
div {
  margin: 10px 20px;
}
  1. 盒子模型的计算方式

CSS盒子模型的计算方式有两种，分别是标准盒子模型和IE盒子模型。

标准盒子模型

标准盒子模型的宽度和高度只包括内容区域，不包括内边距、边框和外边距。

IE盒子模型

IE盒子模型的宽度和高度包括内容区域、内边距和边框，但不包括外边距。

可以使用box-sizing属性来指定使用哪种盒子模型，默认值为content-box，表示使用标准盒子模型。如果将box-sizing设置为border-box，则使用IE盒子模型。

/* 使用标准盒子模型 */
div {
  box-sizing: content-box;
}

/* 使用IE盒子模型 */
div {
  box-sizing: border-box;
}

CSS样式属性

  1. 文本属性

color

设置文本颜色，取值可以是预定义的颜色名称、RGB值、十六进制颜色值等。

/* 使用预定义的颜色名称 */
p {
  color: red;
}

/* 使用RGB值 */
p {
  color: rgb(255, 0, 0);
}

/* 使用十六进制颜色值 */
p {
  color: #ff0000;
}

font-family

设置字体族，取值可以是字体名称、字体族名称、通用字体系列等。

/* 使用字体名称 */
p {
  font-family: Arial, sans-serif;
}

/* 使用字体族名称 */
p {
  font-family: "Times New Roman", serif;
}

/* 使用通用字体系列 */
p {
  font-family: serif;
}

font-size

设置字体大小，取值可以是像素值、百分比、em单位等。

/* 使用像素值 */
p {
  font-size: 16px;
}

/* 使用百分比 */
p {
  font-size: 120%;
}

/* 使用em单位 */
p {
  font-size: 1.2em;
}

font-weight

设置字体粗细，取值可以是normal、bold、bolder、lighter或数字值。

/* 使用预定义的字体粗细 */
p {
  font-weight: bold;
}

/* 使用数字值 */
p {
  font-weight: 700;
}

text-align

设置文本对齐方式，取值可以是left、right、center、justify或inherit。

/* 左对齐 */
p {
  text-align: left;
}

/* 右对齐 */
p {
  text-align: right;
}

/* 居中对齐 */
p {
  text-align: center;
}

/* 两端对齐 */
p {
  text-align: justify;
}

text-decoration

设置文本装饰，取值可以是none、underline、overline、line-through或inherit。

/* 下划线 */
a {
  text-decoration: underline;
}

/* 删除线 */
del {
  text-decoration: line-through;
}
  1. 背景属性

background-color

设置背景颜色，取值可以是预定义的颜色名称、RGB值、十六进制颜色值等。

/* 使用预定义的颜色名称 */
body {
  background-color: white;
}

/* 使用RGB值 */
body {
  background-color: rgb(255, 255, 255);
}

/* 使用十六进制颜色值 */
body {
  background-color: #ffffff;
}

background-image

设置背景图片，取值可以是图片URL或none。

/* 使用图片URL */
body {
  background-image: url("background.png");
}

/* 不使用背景图片 */
body {
  background-image: none;
}

background-repeat

设置背景图片的重复方式，取值可以是repeat、repeat-x、repeat-y或no-repeat。

/* 水平和垂直方向都重复 */
body {
  background-repeat: repeat;
}

/* 仅水平方向重复 */
body {
  background-repeat: repeat-x;
}

/* 仅垂直方向重复 */
body {
  background-repeat: repeat-y;
}

/* 不重复 */
body {
  background-repeat: no-repeat;
}

background-position

设置背景图片的位置，取值可以是关键词或像素值。

/* 居中 */
body {
  background-position: center;
}

/* 左上角 */
body {
  background-position: 0 0;
}

/* 右下角 */
body {
  background-position: right bottom;
}

/* 指定像素值 */
body {
  background-position: 10px 20px;
}
  1. 盒模型属性

width

设置元素的宽度，取值可以是像素值、百分比等。

/* 使用像素值 */
div {
  width: 100px;
}

/* 使用百分比 */
div {
  width: 50%;
}

height

设置元素的高度，取值可以是像素值、百分比等。

/* 使用像素值 */
div {
  height: 50px;
}

/* 使用百分比 */
div {
  height: 50%;
}

margin

设置元素的外边距，取值可以是像素值、百分比等。

/* 设置上、下、左、右外边距均为10像素 */
div {
  margin: 10px;
}

/* 设置上下外边距为10像素，左右外边距为20像素 */
div {
  margin: 10px 20px;
}

/* 设置上外边距为10像素，左右外边距为20像素，下外边距为30像素 */
div {
  margin: 10px 20px 30px;
}

/* 设置上外边距为10像素，右外边距为20像素，下外边距为30像素，左外边距为40像素 */
div {
  margin: 10px 20px 30px 40px;
}

padding

设置元素的内边距，取值可以是像素值、百分比等。

/* 设置上、下、左、右内边距均为10像素 */
div {
  padding: 10px;
}

/* 设置上下内边距为10像素，左右内边距为20像素 */
div {
  padding: 10px 20px;
}

/* 设置上内边距为10像素，左右内边距为20像素，下内边距为30像素 */
div {
  padding: 10px 20px 30px;
}

/* 设置上内边距为10像素，右内边距为20像素，下内边距为30像素，左内边距为40像素 */
div {
  padding: 10px 20px 30px 40px;
}

border

设置元素的边框，取值可以是边框样式、边框宽度、边框颜色等。

/* 设置1像素粗的实线边框，颜色为黑色 */
div {
  border: 1px solid black;
}

/* 设置5像素粗的虚线边框，颜色为红色 */
div {
  border: 5px dashed red;
}

/* 设置上边框为1像素实线，颜色为黑色；右边框为2像素实线，颜色为红色；下边框为3像素实线，颜色为绿色；左边框为4像素实线，颜色为蓝色 */
div {
  border-top: 1px solid black;
  border-right: 2px solid red;
  border-bottom: 3px solid green;
  border-left: 4px solid blue;
}

box-sizing

设置元素的盒模型的计算方式，取值可以是content-box或border-box。

/* 使用content-box计算盒模型 */
div {
  box-sizing: content-box;
}

/* 使用border-box计算盒模型 */
div {
  box-sizing: border-box;
}
  1. 定位属性

position

设置元素的定位方式，取值可以是static、relative、absolute或fixed。

/* 使用默认的静态定位 */
div {
  position: static;
}

/* 相对定位 */
div {
  position: relative;
}

/* 绝对定位 */
div {
  position: absolute;
}

/* 固定定位 */
div {
  position: fixed;
}

top

设置元素的顶部边缘相对于其包含元素的顶部边缘的偏移量，取值可以是像素值、百分比等。

/* 偏移量为10像素 */
div {
  top: 10px;
}

/* 偏移量为50% */
div {
  top: 50%;
}

bottom

设置元素的底部边缘相对于其包含元素的底部边缘的偏移量，取值可以是像素值、百分比等。

/* 偏移量为10像素 */
div {
  bottom: 10px;
}

/* 偏移量为50% */
div {
  bottom: 50%;
}

left

设置元素的左侧边缘相对于其包含元素的左侧边缘的偏移量，取值可以是像素值、百分比等。

/* 偏移量为10像素 */
div {
  left: 10px;
}

/* 偏移量为50% */
div {
  left: 50%;
}

right

设置元素的右侧边缘相对于其包含元素的右侧边缘的偏移量，取值可以是像素值、百分比等。

/* 偏移量为10像素 */
div {
  right: 10px;
}

/* 偏移量为50% */
div {
  right: 50%;
}
  1. 浮动属性

float

设置元素的浮动方式，取值可以是left、right或none。

/* 左浮动 */
div {
  float: left;
}

/* 右浮动 */
div {
  float: right;
}

/* 不浮动 */
div {
  float: none;
}

clear

设置元素的清除方式，取值可以是left、right、both或none。

/* 清除左侧浮动元素 */
div {
  clear: left;
}

/* 清除右侧浮动元素 */
div {
  clear: right;
}

/* 清除两侧浮动元素 */
div {
  clear: both;
}

/* 不清除浮动元素 */
div {
  clear: none;
}
  1. 显示属性

display

设置元素的显示方式，取值可以是block、inline、inline-block、none等。

/* 块级元素 */
div {
  display: block;
}

/* 行内元素 */
span {
  display: inline;
}

/* 行内块级元素 */
img {
  display: inline-block;
}

/* 不显示 */
div {
  display: none;
}
  1. 其他属性

opacity

设置元素的透明度，取值可以是0~1之间的数字。

/* 完全透明 */
div {
  opacity: 0;
}

/* 半透明 */
div {
  opacity: 0.5;
}

/* 不透明 */
div {
  opacity: 1;
}

z-index

设置元素的堆叠顺序，取值可以是数字。

/* 堆叠顺序为1 */
div {
  z-index: 1;
}

/* 堆叠顺序为2 */
div {
  z-index: 2;
}

cursor

设置鼠标悬停时的光标形状，取值可以是pointer、default、text等。

/* 悬停时的光标形状为手型 */
a {
  cursor: pointer;
}

/* 悬停时的光标形状为默认形状 */
div {
  cursor: default;
}

/* 悬停时的光标形状为文本输入形状 */
input {
  cursor: text;
}

visibility

设置元素的可见性，取值可以是visible、hidden或collapse。

/* 可见 */
div {
  visibility: visible;
}

/* 不可见 */
div {
  visibility: hidden;
}

/* 折叠，对于表格元素有效 */
table {
  visibility: collapse;
}

overflow

设置元素溢出内容的处理方式，取值可以是visible、hidden、scroll或auto。

/* 可见，溢出内容不会被裁剪 */
div {
  overflow: visible;
}

/* 不可见，溢出内容会被裁剪 */
div {
  overflow: hidden;
}

/* 可滚动，出现滚动条 */
div {
  overflow: scroll;
}

/* 自动，根据需要自动出现滚动条 */
div {
  overflow: auto;
}
声明：本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系，我们将立即删除或处理。
▍相关推荐
更多资讯 >>>
Copyright @ 简易百科 V 2.0 京ICP备14042104号