css

css

目录

1.css简介

CSS（层叠样式表，Cascading Style Sheets）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的子集）等文件样式的计算机语言。CSS 能够对网页进行布局和美化，控制网页的布局、颜色、字体等样式，使得网页的视觉效果更加符合设计师的意图，同时提高网页的可维护性和可访问性。

CSS的主要特点

  1. 层叠性：CSS允许为同一个元素指定多个样式规则，这些规则会根据一定的优先级进行层叠，最终确定该元素的最终样式。
  2. 继承性：在CSS中，某些样式属性是可以从父元素继承到子元素的，这样可以大大简化样式的编写。
  3. 优先级：当多个样式规则作用于同一个元素时，浏览器会根据一定的优先级来决定最终应用哪个样式。优先级通常基于选择器的特异性、重要性（!important）和源顺序。
  4. 可重用性：通过定义类（class）和ID选择器，可以将相同的样式应用于多个不同的元素，提高样式的可重用性。
  5. 分离内容与表现：CSS使得网页的内容和表现分离，这意味着开发者可以独立地修改网页的布局和样式，而无需更改网页的内容。这种分离提高了网页的可维护性和可访问性。

CSS的使用方式

CSS可以通过多种方式应用到网页中：

  1. 内联样式：直接在HTML元素中使用style属性来定义样式。这种方式虽然简单，但不利于样式的复用和维护。
  2. 内部样式表：在HTML文档的<head>部分使用<style>标签来定义样式规则。这种方式适用于单个页面的样式定义。
  3. 外部样式表：将样式规则保存在一个或多个外部的.css文件中，然后通过HTML的<link>标签将其链接到HTML文档中。这种方式是实现样式复用和维护的最佳实践。

image-20240905093441744

image-20240905101453835

2.css属性

2.1. 文本属性

  • color：设置文本颜色。
  • font-family：设置文本的字体系列。
  • font-size：设置文本的字体大小。
  • font-weight：设置字体的粗细。
  • font-style：设置字体的风格，如斜体（italic）或正常（normal）。
  • text-align：设置文本的对齐方式，如左对齐、右对齐、居中对齐等。
  • text-decoration：设置文本的装饰，如下划线、删除线等。
  • text-transform：控制文本的大小写转换，如全部大写、全部小写、首字母大写等。

2.2. 背景属性

  • background-color：设置元素的背景颜色。
  • background-image：设置元素的背景图像。
  • background-repeat：设置背景图像是否重复及如何重复。
  • background-position：设置背景图像的位置。
  • background-attachment：设置背景图像是否随页面滚动而滚动。

2.3. 边框属性

  • border-style：设置边框的样式，如实线（solid）、虚线（dashed）等。
  • border-width：设置边框的宽度。
  • border-color：设置边框的颜色。
  • border：简写属性，用于同时设置边框的样式、宽度和颜色。

2.4. 盒子模型属性

  • width：设置元素的宽度。
  • height：设置元素的高度。
  • padding：设置元素内边距，即内容与边框之间的空间。
  • margin：设置元素外边距，即元素与其他元素之间的距离。

2.5. 布局属性

  • display：设置元素的显示类型，如块级元素（block）、行内元素（inline）等。
  • position：设置元素的定位方式，如静态定位（static）、相对定位（relative）、绝对定位（absolute）等。
  • float：设置元素浮动，使元素脱离其正常文档流，并左右移动。
  • clear：设置元素的哪一侧不允许其他浮动元素。

2.6. 过渡和动画属性

  • transition：设置CSS属性的过渡效果，如渐变时间、延迟时间等。
  • animation：设置元素的动画效果，如动画名称、持续时间、延迟时间等。

2.7. 2D/3D转换属性

  • transform：允许你对元素进行旋转、缩放、移动或倾斜。
  • transform-origin：设置元素进行转换时的基点。

2.8. 用户界面属性

  • cursor：设置鼠标悬停在元素上时的光标样式。
  • outline：设置元素获得焦点时的轮廓线样式。

3.css选择器

优先级：由高到低（ID选择器优先级最高）

image-20240905140503921

3.1.通配符选择器

通配符选择器使用星号（*）作为选择器，它会匹配文档中的所有元素。虽然这个选择器非常强大，能够选中所有元素，但它通常不建议在生产环境中单独使用，因为它会应用到所有元素上，可能会影响性能，并且使得样式表难以维护。然而，它可以在某些特定情况下非常有用，比如重置或移除所有元素的默认边距和填充。

示例：

* {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box; /* 让元素的宽度和高度包括内边距和边框 */  
}

3.2.元素选择器（类型选择器）

元素选择器（也称为类型选择器）直接通过HTML元素的名称来选择元素。

示例：

p {  
  color: blue;  
}

这个选择器会选择文档中所有的<p>元素，并将它们的文本颜色设置为蓝色。

3.3. ID选择器

ID选择器通过元素的id属性来选择元素。ID选择器以井号（#）开始，后跟ID名。每个ID在HTML文档中应该是唯一的。

示例：

html复制代码

<div id="uniqueElement">这是一个唯一的元素。</div>
#uniqueElement {  
  border: 2px solid black;  
}

这个选择器会选择id属性值为uniqueElement的元素，并为其添加黑色边框。

3.4.类选择器

类选择器通过元素的class属性来选择元素。类选择器以点号（.）开始，后跟类名。

示例：

html复制代码

<p class="highlight">这是一个高亮显示的段落。</p>
.highlight {  
  background-color: yellow;  
}

这个选择器会选择所有class属性值为highlight的元素，并将它们的背景颜色设置为黄色。

3.5.属性选择器

属性选择器允许你根据元素的属性及属性值来选择元素。

示例：

<input type="text" placeholder="请输入文本">  
<input type="password" placeholder="请输入密码">
input[type="text"] {  
  background-color: lightgray;  
}

这个选择器会选择所有type属性值为text的<input>元素，并将它们的背景颜色设置为浅灰色。

3.6.伪类选择器

伪类选择器用于定义元素的特殊状态。它们以冒号（:）开头，后跟伪类的名称。伪类选择器可以应用于任何元素，但主要用于改变元素的样式，以响应用户的操作（如悬停、点击）或元素的特定状态（如第一个子元素、已访问链接）。

1.:hover - 当鼠标悬停在元素上时：

a:hover {  
  color: red;  
}

这个样式会将所有<a>标签在鼠标悬停时的文本颜色变为红色。

2.:active - 当元素被激活时（如鼠标点击）：

button:active {  
  background-color: blue;  
}

这个样式会将所有<button>元素在被点击时的背景颜色变为蓝色。

3.:focus - 当元素获得焦点时（如通过键盘导航或点击）：

input:focus {  
  border: 2px solid green;  
}

这个样式会将所有<input>元素在获得焦点时的边框变为绿色且宽度为2px。

4.:first-child - 选择其父元素的第一个子元素：

ul li:first-child {  
  color: orange;  
}

这个样式会将<ul>中第一个<li>元素的文本颜色变为橙色。

5.:nth-child(n) - 选择其父元素的第n个子元素（n可以是数字、关键词或公式）：

li:nth-child(2) {  
  background-color: lightgray;  
}  
  
/* 或者使用公式选择每三个元素中的第二个 */  
li:nth-child(3n+2) {  
  font-weight: bold;  
}

第一个样式会将每个<ul>或<ol>中的第二个<li>元素的背景颜色变为浅灰色。第二个样式会将列表中每三个<li>元素中的第二个<li>的字体加粗。

6.:link 和 :visited - 分别用于未访问和已访问的链接：

a:link {  
  color: blue;  
}  
  
a:visited {  
  color: purple;  
}

这些样式会将未访问的链接文本颜色设置为蓝色，将已访问的链接文本颜色设置为紫色。

3.7.伪元素选择器

伪元素选择器用于样式化元素的特定部分。与伪类选择器不同，伪元素选择器在文档树中创建了一个抽象的元素，这个元素是选中元素的子元素。伪元素选择器也是以冒号（:）开头，但通常后跟两个冒号（::）来区分伪类和伪元素（尽管在CSS2.1及之前的规范中只使用一个冒号）。

1.::before 和 ::after - 在元素的内容前后插入新的内容或样式：

p::before {  
  content: "注意：";  
  color: red;  
}  
  
p::after {  
  content: "（结束）";  
  color: green;  
}

这些样式会在每个<p>元素的内容前添加“注意：”文本（红色），并在其后添加“（结束）”文本（绿色）。

2.::first-letter - 用于选择文本的第一个字母，并对其进行样式化：

p::first-letter {  
  font-size: 24px;  
  color: navy;  
  float: left;  
  margin-right: 5px;  
}

这个样式会将每个<p>元素中第一个字母的字体大小设置为24px，颜色设置为深蓝色，并向右浮动，右侧外边距为5px。

3.::first-line - 用于选择文本的第一行，并对其进行样式化：

p::first-line {  
  font-weight: bold;  
  color: darkred;  
}

这个样式会将每个<p>元素中第一行的文本加粗，并将颜色设置为深红色。

4.::selection - 用于定义用户选择文本时的样式（如背景色和文本色）：

::selection {  
  background: yellow;  
  color: black;  
}

这个样式会将用户选择的文本背景颜色设置为黄色，文本颜色设置为黑色。

3.8.关系选择器

3.8.1. 子选择器（>）

子选择器通过>分隔两个选择器，仅选择直接子元素。

示例：

<div>  
  <p>直接子段落。</p>  
  <div>  
    <p>不是直接子段落。</p>  
  </div>  
</div>
div > p {  
  color: green;  
}

这个选择器会选择所有直接位于<div>元素下的<p>元素，并将它们的文本颜色设置为绿色。

3.8.2. 后代选择器（空格）

后代选择器通过空格分隔两个选择器，用于选择某个元素内部的所有后代元素（子元素、孙子元素等）。

示例：

<div>  
  <p>这是一个段落。</p>  
</div>
div p {  
  color: red;  
}

这个选择器会选择所有位于<div>元素内部的<p>元素，并将它们的文本颜色设置为红色。

3.8.3.相邻兄弟选择器（+）

相邻兄弟选择器通过+分隔两个选择器，用于选择紧接在另一个元素后的元素，且二者有相同的父元素。

示例：

<h2>标题</h2>  
<p>紧接着标题的段落。</p>  
<p>不是紧接着标题的段落。</p>
h2 + p {  
  font-weight: bold;  
}

这个选择器会选择所有紧跟在<h2>元素后的<p>元素，并将它们的字体加粗。

3.8.4. 通用兄弟选择器（~）

通用兄弟选择器通过~分隔两个选择器，用于选择所有在另一元素之后的兄弟元素，且二者有相同的父元素。

示例：

<h2>标题</h2>  
<p>第一个段落。</p>  
<p>第二个段落。</p>
h2 ~ p {  
  color: purple;  
}

这个选择器会选择所有位于<h2>元素之后的<p>元素（无

4.css布局

4.1.盒模型

盒模型是CSS布局的基础，它描述了HTML元素如何在页面上占据空间。每个元素都被视为一个盒子，这个盒子由四个部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。

  • 内容（Content）：盒子的中心区域，用于显示实际的内容，如文本、图片等。
  • 内边距（Padding）：内容区域与边框之间的空间，用于创建内容与边框之间的间隔。
  • 边框（Border）：围绕在内边距和内容外面的边界，用于定义盒子的形状和大小。
  • 外边距（Margin）：边框外的空间，用于控制盒子与其他盒子之间的距离。

image-20240905161412142

4.2.传统布局

传统布局方式主要包括表格布局、浮动布局和定位布局。

  1. 表格布局：
    • 使用<table>、<tr>、<td>等标签来创建布局。
    • 优点：容易创建复杂的布局，适合显示大量数据。
    • 缺点：不适合响应式布局，且使用表格进行布局不是语义化的做法。
  2. 浮动布局（Float Layout）：
    • 通过float属性将元素脱离文档流，向左或向右浮动。
    • 优点：可以实现多栏布局，适用于图文混排等场景。
    • 缺点：需要清除浮动，且浮动元素可能会破坏正常的布局流。
  3. 定位布局（Position Layout）：
    • 使用position属性（static、relative、absolute、fixed、sticky）将元素定位在页面的特定位置。
    • 优点：可以实现精确的布局控制，适用于复杂布局。
    • 缺点：设计复杂，需要仔细规划元素的层级关系。

4.3.Flexbox弹性盒子布局

image-20240906103242388

响应式：网页能够同时在手机端和网页端同时正常使用（只需设计一次页面，在不同分辨率情况下的均自动适应）

image-20240906103640189

image-20240906104938732

image-20240906105024806

image-20240906111443883

image-20240906111504625

image-20240906111824338

image-20240906111900580

image-20240906112608505

image-20240906114117527

image-20240906115133188

image-20240906115242622

Flexbox布局（Flexible Box Layout）是一种更加高效、灵活的布局方式，主要用于一维布局（即沿着一个轴进行布局）。

  • 基本概念：Flexbox布局包括容器（flex container）和项目（flex item）两个核心概念。容器负责定义布局的方向、对齐方式等，项目则是在容器内部进行排列的元素。
  • 优点：
    • 可以轻松实现复杂的布局对齐和分布。
    • 容器和项目可以自动调整大小以适应不同的屏幕尺寸。
    • 提供了强大的对齐和排序功能。
  • 常用属性：
    • 容器属性：flex-direction、justify-content、align-items等。
    • 项目属性：flex-grow、flex-shrink、flex-basis、align-self等。

4.4.Grid布局（了解）

Grid布局（Grid Layout）是一种二维布局系统，用于通过定义行和列来创建网格结构，并控制网格项在网格中的位置和大小。

  • 基本概念：Grid布局包括显示网格（由grid-template-rows和grid-template-columns定义）和隐式网格（由grid-auto-rows和grid-auto-columns定义）。网格项（grid items）是网格容器（grid container）内部的子元素。
  • 优点：
    • 可以轻松创建复杂的网格布局，如对称和不对称的布局。
    • 提供了强大的网格线和对齐功能。
    • 支持响应式布局，能够自动调整网格大小以适应不同的屏幕尺寸。
  • 常用属性：
    • 容器属性：grid-template-rows、grid-template-columns、grid-auto-rows、grid-auto-columns等。
    • 项目属性：grid-column-start、grid-column-end、grid-row-start、grid-row-end等。

5.css动画

CSS动画是CSS（层叠样式表）中用于创建元素从一种样式平滑过渡到另一种样式的技术。这种过渡可以基于时间或事件触发，使得网页元素能够以动态和吸引人的方式呈现。下面从几个关键方面介绍CSS动画：

5.1.CSS动画的基本概念

CSS动画主要由两部分组成：关键帧（Keyframes）和动画属性。

  • 关键帧（Keyframes）：定义动画的状态和变化。使用@keyframes规则来创建动画的关键帧，关键帧描述了动画在不同时间点的样式。可以使用百分比来定义多个关键帧，或者简单地使用from和to来表示动画的开始和结束状态。
  • 动画属性：控制动画的播放方式和效果。包括动画名称（animation-name）、持续时间（animation-duration）、速度曲线（animation-timing-function）、延迟时间（animation-delay）、播放次数（animation-iteration-count）、播放方向（animation-direction）以及动画结束后的状态（animation-fill-mode）等。

5.2.CSS动画的实现方式

CSS动画可以通过以下几种方式实现：

  1. transition（过渡）：主要用于在属性值变化时实现平滑过渡，是CSS动画的一种简单形式。通过定义transition属性（包括transition-property、transition-duration、transition-timing-function和transition-delay），可以在元素的状态发生变化时自动添加动画效果。
  2. transform（变换）：实现元素的旋转、缩放、倾斜和移动等效果。transform属性允许开发者对元素进行2D或3D转换，结合transition属性可以创建平滑的动画效果。
  3. animation（动画）：结合@keyframes规则和动画属性，实现更复杂的自定义动画效果。通过定义动画的多个关键帧和动画属性，可以控制动画的每一个细节，如动画的起始和结束状态、播放速度、播放次数等。

5.3.CSS动画的优势

  1. 提升用户体验：动画效果可以使网页元素以更自然和吸引人的方式呈现，提升用户的浏览体验。
  2. 增强视觉效果：通过动画，可以突出显示网页中的重要元素，引导用户的注意力。
  3. 减少开发成本：CSS动画可以直接在样式表中定义，无需使用JavaScript或其他脚本语言，降低了开发成本。

5.4.CSS动画的注意事项

  1. 性能考虑：复杂的动画效果可能会增加浏览器的渲染负担，影响网页的加载速度和性能。因此，在设计动画时需要考虑动画的复杂度和对性能的影响。
  2. 可访问性：动画效果应该确保网页的可访问性，不应影响残障人士使用网页。
  3. 兼容性：不同浏览器对CSS动画的支持程度可能有所不同，需要测试在不同浏览器中的兼容性。
posted @   tubby233  阅读(17)  评论(0)  编辑  收藏  举报
相关博文：
·  css3新特性
·  JavaScript基础语法
·  前端-CSS
·  CSS基础知识
·  CSS布局概念与技术教程
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示