python测试开发---css基础

CSS（Cascading Style Sheets，层叠样式表）是用于描述 HTML 或 XML 文档的外观和格式的语言。它可以控制网页元素的布局、颜色、字体等样式，使页面更美观和易用。下面是 CSS 基础的介绍，包括语法和常用的属性。

1. CSS 语法

CSS 的语法由三个部分组成：

选择器：指定要应用样式的 HTML 元素。
属性：定义需要改变的样式。
值：属性对应的具体样式值。

选择器 {属性: 值;
}

例如：

p {color: red; /* 将所有 <p> 标签的文字颜色设置为红色 */font-size: 16px; /* 设置字体大小为16像素 */
}

2. CSS 引入方式

有三种主要的方式将 CSS 应用到 HTML 文档中：

内联样式

直接在 HTML 元素的 style 属性中定义样式。只针对单个元素有效。

<p style="color: blue; font-size: 14px;">这是一个段落。</p>

内部样式表

在 HTML 文档的 <head> 标签中，使用 <style> 标签嵌入 CSS。

<head><style>p {color: blue;}</style>
</head>

外部样式表

将 CSS 写在单独的 .css 文件中，并在 HTML 中通过 <link> 标签引入。

<link rel="stylesheet" type="text/css" href="styles.css">

styles.css 文件内容：

p {color: blue;
}

3. 常用选择器

1. 标签选择器

选择某种 HTML 标签的所有元素。

p {color: green;
}

2. 类选择器

通过类名选择元素，类选择器以 . 开头。

/* HTML */
<p class="important">这是一个重要段落。</p>/* CSS */
.important {color: red;
}

3. ID 选择器

通过 ID 选择特定元素，ID 选择器以 # 开头。一个页面中同一个 ID 只能使用一次。

/* HTML */
<p id="intro">这是引言部分。</p>/* CSS */
#intro {color: blue;
}

4. 通用选择器

选择页面中的所有元素，用 * 表示。

* {margin: 0;padding: 0;
}

5. 组合选择器

选择多个元素，可以使用逗号 , 分隔。

h1, h2, h3 {color: purple;
}

6. 后代选择器

选择某个元素的所有子元素，使用空格分隔。

/* 选择所有在 <div> 内的 <p> 标签 */
div p {color: brown;
}

4. 常用的 CSS 属性

1. 文本相关属性

color: 设置文本颜色。
```
p {color: red;
}
```
font-size: 设置字体大小。
```
p {font-size: 18px;
}
```
text-align: 设置文本对齐方式。
```
p {text-align: center;
}
```
font-family: 设置字体。
```
p {font-family: Arial, sans-serif;
}
```

2. 布局相关属性

width / height: 设置元素的宽度和高度。
```
div {width: 300px;height: 200px;
}
```
margin: 设置外边距。
```
div {margin: 20px;
}
```
padding: 设置内边距。
```
div {padding: 10px;
}
```
border: 设置边框。
```
div {border: 1px solid black;
}
```

3. 背景相关属性

background-color: 设置背景颜色。
```
div {background-color: lightblue;
}
```

background-image: 设置背景图片。

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

5. CSS 层叠性与优先级

当多个 CSS 规则应用于同一个元素时，CSS 的层叠性（Cascading）会决定哪个规则生效。优先级的高低由以下几个因素决定：

内联样式 > ID 选择器 > 类选择器 > 标签选择器 > 通用选择器。
权重高的 样式规则优先应用。
后定义的样式会覆盖之前的样式（如果权重相同）。

<p id="text" class="highlight">这是一个段落。</p>

p {color: green;
}.highlight {color: red;
}#text {color: blue;
}

在上述例子中，由于 ID 选择器的优先级最高，所以 <p> 的文本颜色会是蓝色。

6. CSS 盒模型

CSS 的盒模型描述了每个元素的布局方式，包括以下几个部分：

内容区 (content)：元素的内容，如文本和图片。
内边距 (padding)：内容周围的空间。
边框 (border)：包围内容和内边距的边界。
外边距 (margin)：元素与其他元素之间的空间。

通过 box-sizing 属性可以控制元素的盒模型计算方式：

div {box-sizing: border-box;
}

7. 响应式设计

响应式设计使网页在不同设备（如手机、平板、电脑）上有良好的表现。可以通过媒体查询来实现。

/* 针对最大宽度为600px的设备应用样式 */
@media (max-width: 600px) {body {background-color: lightgrey;}
}

8. 布局技巧

1. 浮动布局 (`float`)

float 属性用于将元素左右浮动，常用于实现简单的两列或多列布局。

.left {float: left;width: 50%;
}.right {float: right;width: 50%;
}

浮动元素脱离正常的文档流，后续的非浮动元素会围绕它。因此，常用 clear 属性清除浮动的影响：

.clearfix::after {content: "";display: block;clear: both;
}

2. 弹性盒布局 (Flexbox)

Flexbox 是 CSS 的强大布局工具，适合一维（水平或垂直）布局。

.container {display: flex;justify-content: space-between; /* 子元素在主轴上分散 */align-items: center; /* 子元素在交叉轴上居中 */
}

display: flex：将容器设为弹性布局容器。
justify-content：定义主轴上的对齐方式，如 center、space-between、flex-start、flex-end 等。
align-items：定义交叉轴（默认垂直方向）上的对齐方式。

每个子元素还可以通过 flex-grow、flex-shrink 和 flex-basis 控制其在容器中的伸缩比例和尺寸。

.item {flex: 1; /* 子元素将平分父容器的剩余空间 */
}

3. 网格布局 (CSS Grid)

CSS Grid 是一个二维布局系统，可以让你同时控制行和列。

.container {display: grid;grid-template-columns: 1fr 2fr; /* 两列，第一列占1份，第二列占2份 */grid-template-rows: auto 100px; /* 两行，第一行自动，第二行固定高度 */gap: 10px; /* 设置行列之间的间距 */
}.item {grid-column: span 2; /* 让这个元素跨越2列 */
}

display: grid：将容器设为网格布局。
grid-template-columns 和 grid-template-rows：定义列和行的尺寸。
gap：设置网格项之间的间距。

4. 定位 (`position`)

CSS 的 position 属性允许你根据不同的规则定位元素。

.relative {position: relative; /* 相对于正常位置进行偏移 */top: 10px;left: 10px;
}.absolute {position: absolute; /* 相对于最近的已定位祖先元素定位 */top: 50px;right: 20px;
}.fixed {position: fixed; /* 相对于浏览器窗口定位，通常用于固定导航栏 */top: 0;left: 0;
}.sticky {position: sticky; /* 在用户滚动到一定位置时元素会固定在屏幕上 */top: 0;
}

9. 响应式设计（进阶）

除了简单的媒体查询外，还可以使用更多响应式设计技术来确保页面在不同设备上表现良好。

1. 视口单位

vw 和 vh 是相对于视口宽度和高度的单位：

.container {width: 100vw; /* 占据视口的100%宽度 */height: 100vh; /* 占据视口的100%高度 */
}

2. 媒体查询

根据屏幕宽度或设备类型，应用不同的样式。可以针对不同的断点，调整布局和字体等：

@media (max-width: 768px) {body {font-size: 14px;}
}@media (min-width: 769px) and (max-width: 1024px) {body {font-size: 16px;}
}

3. 百分比布局

使用百分比设置宽度和高度可以让布局根据父容器动态变化。

.container {width: 80%; /* 宽度是父容器的80% */
}

10. 伪类和伪元素

1. 伪类

伪类用于选择某种状态下的元素，例如鼠标悬停、访问链接等。

:hover：鼠标悬停时的样式。
```
a:hover {color: red;
}
```
:focus：元素获得焦点时的样式（如输入框）。
```
input:focus {border-color: blue;
}
```

:nth-child()：选择特定的子元素。

li:nth-child(odd) {background-color: lightgray; /* 选择奇数项 */
}

2. 伪元素

伪元素用于选择元素的一部分，如第一个字母、行、或添加内容。

::before 和 ::after：在元素内容前或后插入内容。
```
h1::before {content: "★ ";color: gold;
}
```

::first-letter：选择第一个字母。

p::first-letter {font-size: 2em;font-weight: bold;
}

11. 过渡和动画

1. 过渡 (Transitions)

transition 用于平滑地过渡元素的样式变化。

button {background-color: blue;transition: background-color 0.5s ease; /* 0.5秒内平滑过渡背景颜色 */
}button:hover {background-color: red;
}

2. 动画 (Animations)

CSS 动画可以在一定时间内改变元素的多个属性。

@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}
}.element {animation: fadeIn 2s ease-in-out; /* 2秒内执行淡入效果 */
}

12. 自定义属性（CSS 变量）

CSS 变量（自定义属性）用于定义可重用的值，使样式更加灵活。

:root {--main-color: #3498db;--padding: 10px;
}button {background-color: var(--main-color);padding: var(--padding);
}

你可以在 :root 中定义全局变量，也可以在特定选择器中定义局部变量。

13. 浏览器兼容性

确保不同浏览器对 CSS 的支持可能会有差异。通常使用前缀来确保兼容性：

.element {-webkit-transform: rotate(45deg); /* 兼容 Webkit 浏览器 */-moz-transform: rotate(45deg);    /* 兼容 Firefox */transform: rotate(45deg);         /* 标准属性 */
}

你可以借助 Can I Use 网站检查 CSS 特性的浏览器支持情况。

14. 调试 CSS

浏览器开发工具：所有主流浏览器都有开发者工具，可以实时查看和修改 CSS 样式。右键点击网页元素，选择“检查”或“审查元素”。
CSS 验证器：使用 W3C CSS 验证服务来检查你的 CSS 代码是否符合标准。

总结

掌握 CSS 需要对基础选择器、属性、盒模型有清晰理解，同时学习布局（如 Flexbox 和 Grid）、响应式设计、伪类和动画等进阶特性。在开发中，善用工具和调试技巧，确保样式的兼容性和高效性。