css——初学者

最新推荐文章于 2024-09-06 11:00:54 发布

理想第二旬991

最新推荐文章于 2024-09-06 11:00:54 发布

阅读量295

点赞数 4

文章标签： css tensorflow 前端

本文链接：https://blog.csdn.net/weixin_71522876/article/details/139663334

版权

CSS（层叠样式表，Cascading Style Sheets）是一种用于控制网页外观和布局的语言。它与HTML（超文本标记语言）一起使用，HTML负责定义网页的内容和结构，而CSS则负责定义网页的样式，如颜色、字体、布局等。

### CSS的基本概念

1. **选择器（Selector）**：
选择器用于选择要应用样式的HTML元素。常见的选择器有：
- 标签选择器：直接使用HTML标签名称。例如：`p` 选择所有段落。
- 类选择器：使用点号加类名。例如：`.class-name` 选择具有该类名的元素。
- ID选择器：使用井号加ID名。例如：`#id-name` 选择具有该ID的元素。

2. **属性（Property）和属性值（Value）**：
每个CSS规则由属性和属性值对组成，用于定义具体的样式。例如：
```css
p {
color: red; /* 设置文本颜色为红色 */
font-size: 16px; /* 设置字体大小为16像素 */
}
```

3. **层叠（Cascading）**：
CSS具有层叠性，即多个样式可以叠加在一起，后定义的样式可以覆盖先定义的样式。层叠规则的优先级如下：
- 重要性：带有`!important`标记的样式优先级最高。
- 特异性：选择器的特异性越高，优先级越高。
- 来源顺序：在同一个样式表中，后定义的样式会覆盖先定义的样式。

### CSS的使用方法

1. **内联样式（Inline Styles）**：
将CSS直接写在HTML元素的`style`属性中。适用于简单的样式或临时修改。
```html
<p style="color: red; font-size: 16px;">这是一个段落。</p>
```

2. **内部样式表（Internal Stylesheet）**：
将CSS写在HTML文档的`<style>`标签中，通常位于`<head>`部分。适用于单个页面的样式控制。
```html
<head>
<style>
p {
color: red;
font-size: 16px;
}
</style>
</head>
```

3. **外部样式表（External Stylesheet）**：
将CSS写在单独的`.css`文件中，通过HTML文档中的`<link>`标签进行引用。适用于多个页面共享同一套样式。
```html
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
```

### 一些常用的CSS属性

1. **颜色和背景**：
```css
color: blue; /* 文本颜色 */
background-color: yellow; /* 背景颜色 */
background-image: url('image.jpg'); /* 背景图片 */
```

2. **字体**：
```css
font-family: Arial, sans-serif; /* 字体家族 */
font-size: 14px; /* 字体大小 */
font-weight: bold; /* 字体粗细 */
```

3. **文本样式**：
```css
text-align: center; /* 文本对齐 */
text-decoration: underline; /* 文本装饰 */
line-height: 1.5; /* 行高 */
```

4. **盒子模型**：
```css
width: 100px; /* 宽度 */
height: 100px; /* 高度 */
padding: 10px; /* 内边距 */
margin: 20px; /* 外边距 */
border: 1px solid black; /* 边框 */
```

5. **布局**：
```css
display: block; /* 块级元素 */
display: inline; /* 行内元素 */
float: left; /* 浮动 */
position: absolute; /* 绝对定位 */
```