CSS 知识点及使用案例

2024/10/25 6:24:04 来源：https://blog.csdn.net/2301_78319341/article/details/141570078 浏览: 次关键词：CSS 知识点及使用案例

1. CSS 三种引入方式

1.1 行内样式

直接在 HTML 元素上通过 style 属性定义样式。

<p style="color: red; font-size: 20px;">这是行内样式。</p>

1.2 内部样式表

在 HTML 文档的 <head> 部分使用 <style> 标签定义样式。

<head>  <style>  p {  color: blue;  font-size: 18px;  }  </style>  
</head>  
<body>  <p>这是内部样式。</p>  
</body>

1.3 外部样式表

通过 <link> 标签在 HTML 文档的 <head> 部分链接外部 CSS 文件。

1.3 外部样式表
通过 <link> 标签在 HTML 文档的 <head> 部分链接外部 CSS 文件。

styles.css 文件内容：

p {  color: green;  font-size: 22px;  
}

2. CSS 选择器

2.1 基本选择器

元素选择器：选择所有指定类型的元素。

p {  color: gray;  
}

类选择器：选择所有具有指定类的元素。

.highlight {  background-color: yellow;  
}

ID 选择器：选择具有指定 ID 的元素。

#unique {  border: 1px solid black;  
}

2.2 符号选择器

交集选择器：选择具有特定父元素的后代元素。

#parent .child {  font-size: 14px;  
}

并集选择器：为多个选择器指定相同的样式。

h1, h2, h3 {  color: purple;  
}

2.3 属性选择器

选择具有特定属性或属性值的元素。

a[target="_blank"] {  color: orange;  
}

2.4 伪类选择器

选择处于特定状态的元素。

a:hover {  color: red;  
}

3. 常用样式

3.1 文本样式

颜色：使用颜色名称、十六进制代码、RGB、RGBA 等。

p {  color: #333; /* 十六进制颜色 */  
}

文本对齐：设置文本的水平对齐方式。

.text-center {  text-align: center;  
}

文本装饰：设置或删除文本的装饰线。

a {  text-decoration: none;  
}

3.2 字体样式

字体家族：设置文本的字体。

body {  font-family: Arial, sans-serif;  
}

字体粗细：设置文本的粗细。

.bold-text {  font-weight: bold;  
}

字体风格：设置文本的斜体。

.italic-text {  font-style: italic;  
}

3.3 列表样式

列表样式类型：设置列表项前面的标记类型。

ul {  list-style-type: none; /* 移除列表项前的标记 */  
}

3.4 背景样式

背景颜色：设置元素的背景颜色。

.bg-color {  background-color: lightblue;  
}

背景图片：设置元素的背景图片。

.bg-image {  background-image: url('background.jpg');  
}

4. 显示属性

display：控制元素的显示类型。

.hidden {  display: none; /* 隐藏元素 */  
}