python测试开发---css基础

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

1. CSS 语法

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

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

css 复制代码

选择器 {
    属性: 值;
}

例如：

css 复制代码

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

2. CSS 引入方式

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

内联样式

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

html 复制代码

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

内部样式表

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

html 复制代码

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

外部样式表

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

html 复制代码

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

styles.css 文件内容：

css 复制代码

p {
    color: blue;
}

3. 常用选择器

1. 标签选择器

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

css 复制代码

p {
    color: green;
}

2. 类选择器

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

css 复制代码

/* HTML */
<p class="important">这是一个重要段落。</p>

/* CSS */
.important {
    color: red;
}

3. ID 选择器

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

css 复制代码

/* HTML */
<p id="intro">这是引言部分。</p>

/* CSS */
#intro {
    color: blue;
}

4. 通用选择器

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

css 复制代码

* {
    margin: 0;
    padding: 0;
}

5. 组合选择器

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

css 复制代码

h1, h2, h3 {
    color: purple;
}

6. 后代选择器

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

css 复制代码

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

4. 常用的 CSS 属性

1. 文本相关属性

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

2. 布局相关属性

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

3. 背景相关属性

background-color: 设置背景颜色。
css 复制代码
```
div {
    background-color: lightblue;
}
```
background-image: 设置背景图片。
css 复制代码
```
div {
    background-image: url('background.jpg');
}
```

5. CSS 层叠性与优先级

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

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

html 复制代码

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

css 复制代码

p {
    color: green;
}

.highlight {
    color: red;
}

#text {
    color: blue;
}

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

6. CSS 盒模型

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

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

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

css 复制代码

div {
    box-sizing: border-box;
}

7. 响应式设计

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

css 复制代码

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

8. 布局技巧

1. 浮动布局 (`float`)

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

css 复制代码

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

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

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

css 复制代码

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

2. 弹性盒布局 (Flexbox)

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

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 控制其在容器中的伸缩比例和尺寸。

css 复制代码

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

3. 网格布局 (CSS Grid)

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

css 复制代码

.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 属性允许你根据不同的规则定位元素。

css 复制代码

.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 是相对于视口宽度和高度的单位：

css 复制代码

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

2. 媒体查询

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

css 复制代码

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

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

3. 百分比布局

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

css 复制代码

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

10. 伪类和伪元素

1. 伪类

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

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

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

css 复制代码

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

2. 伪元素

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

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

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

css 复制代码

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

11. 过渡和动画

1. 过渡 (Transitions)

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

css 复制代码

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

button:hover {
    background-color: red;
}

2. 动画 (Animations)

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

css 复制代码

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.element {
    animation: fadeIn 2s ease-in-out; /* 2秒内执行淡入效果 */
}

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

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

css 复制代码

:root {
    --main-color: #3498db;
    --padding: 10px;
}

button {
    background-color: var(--main-color);
    padding: var(--padding);
}

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

13. 浏览器兼容性

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

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）、响应式设计、伪类和动画等进阶特性。在开发中，善用工具和调试技巧，确保样式的兼容性和高效性。

python测试开发---css基础

1. CSS 语法

2. CSS 引入方式

内联样式

内部样式表

外部样式表

3. 常用选择器

1. 标签选择器

2. 类选择器

3. ID 选择器

4. 通用选择器

5. 组合选择器

6. 后代选择器

4. 常用的 CSS 属性

1. 文本相关属性

2. 布局相关属性

3. 背景相关属性

5. CSS 层叠性与优先级

6. CSS 盒模型

7. 响应式设计

8. 布局技巧

1. 浮动布局 (float)

2. 弹性盒布局 (Flexbox)

3. 网格布局 (CSS Grid)

4. 定位 (position)

9. 响应式设计（进阶）

1. 视口单位

2. 媒体查询

3. 百分比布局

10. 伪类和伪元素

1. 伪类

2. 伪元素

11. 过渡和动画

1. 过渡 (Transitions)

2. 动画 (Animations)

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

13. 浏览器兼容性

14. 调试 CSS

总结

1. 浮动布局 (`float`)

4. 定位 (`position`)