CSS基础 - 基础

最新推荐文章于 2024-08-08 19:58:31 发布

一然明月(全栈)

最新推荐文章于 2024-08-08 19:58:31 发布

阅读量687

点赞数 10

分类专栏： HTML与CSS 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/Cx20190420/article/details/140958091

版权

HTML与CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一. 简介

二. 基本用法

三. 总结

一. 简介

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页外观和布局的样式表语言。

一、基本作用

外观设计
- CSS 可以控制网页中元素的颜色、字体、大小、粗细、样式（如斜体、下划线等）。例如：

   p {
       color: blue;
       font-size: 16px;
       font-weight: bold;
   }

这段 CSS 代码会将网页中所有<p>段落元素的文本颜色设置为蓝色，字体大小设为 16 像素，字体加粗。

布局控制
- 可以定义网页元素的位置、大小、排列方式等。比如使用 CSS 的浮动（float）属性可以实现多列布局，使用定位（position）属性可以精确地将元素放置在页面的特定位置。
- 示例：

  .sidebar {
       width: 200px;
       float: left;
       background-color: #f2f2f2;
   }
  .content {
       margin-left: 200px;
   }

这里将.sidebar类的元素设置为宽度 200 像素并向左浮动，作为侧边栏，而.content类的元素通过设置左边距为 200 像素，使其内容不会被侧边栏遮挡，实现了一种常见的两栏布局。

二、语法结构

选择器
- 选择器用于指定要应用样式的 HTML 元素。常见的选择器类型有：
  - 元素选择器：直接选择 HTML 元素名称，如p选择所有<p>段落元素。
  - 类选择器：以点（.）开头，用于选择具有特定class属性的元素。例如.myClass选择所有class="myClass"的元素。
  - ID 选择器：以井号（#）开头，用于选择具有特定id属性的元素。例如#myId选择id="myId"的元素。
- 还可以使用更复杂的选择器组合，如后代选择器、子选择器、相邻兄弟选择器等，来更精确地选择元素。
声明块
- 选择器后面跟着一对花括号{}，在花括号内是声明块，包含一个或多个属性和值的对。每个属性和值之间用冒号（:）分隔，不同的属性声明之间用分号（;）分隔。例如：

   h1 {
       color: red;
       font-size: 24px;
   }

这里h1是选择器，{color: red; font-size: 24px;}是声明块，其中color和font-size是属性，red和24px是相应的值。

三、引入方式

内联样式（Inline Styles）
- 直接在 HTML 元素的style属性中定义 CSS 样式。例如：

   <p style="color: blue; font-size: 16px;">这是一段蓝色、16 像素字体大小的文本。</p>

内联样式的优先级最高，但会使 HTML 代码变得混乱，不适合大量样式的定义。

内部样式表（Internal Style Sheets）
- 在 HTML 文件的<head>标签内使用<style>标签来定义 CSS 样式。例如：

   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="UTF-8">
       <title>内部样式表示例</title>
       <style>
           p {
               color: green;
               font-size: 18px;
           }
           h1 {
               background-color: yellow;
           }
       </style>
   </head>
   <body>
       <h1>这是一个标题</h1>
       <p>这是一段绿色、18 像素字体大小的段落文本。</p>
   </body>
   </html>

内部样式表适用于单个 HTML 页面的样式定义。

外部样式表（External Style Sheets）
- 将 CSS 代码写在一个独立的.css文件中，然后在 HTML 文件中通过<link>标签链接到这个 CSS 文件。例如：
- 首先创建一个名为styles.css的文件，内容如下：

   p {
       color: purple;
       font-size: 20px;
   }
   h2 {
       text-decoration: underline;
   }

然后在 HTML 文件中这样链接：

   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="UTF-8">
       <title>外部样式表示例</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <h2>这是一个带有下划线的标题</h2>
       <p>这是一段紫色、20 像素字体大小的段落文本。</p>
   </body>
   </html>

外部样式表实现了样式与内容的分离，有利于代码的维护和复用，适用于多个 HTML 页面共享相同样式的情况。

四、盒模型（Box Model）

组成部分
- CSS 的盒模型是用来设计和布局网页元素的基础概念。它描述了一个 HTML 元素在页面上所占据的空间。盒模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
- 例如，一个<div>元素，其内容是实际显示的文本或其他内部元素，内边距是内容与边框之间的空白区域，边框围绕着内容和内边距，外边距是元素与周围其他元素之间的空白区域。
计算尺寸
- 元素的总宽度和高度的计算方式如下：
- 对于标准盒模型（在大多数现代浏览器中默认）：
  - 元素宽度 = 内容宽度（width）+ 左内边距（padding-left）+ 右内边距（padding-right）+ 左边框宽度（border-left-width）+ 右边框宽度（border-right-width）
  - 元素高度 = 内容高度（height）+ 上内边距（padding-top）+ 下内边距（padding-bottom）+ 上边框宽度（border-top-width）+ 下边框宽度（border-bottom-width）
- 可以通过 CSS 属性来调整这些部分的大小，以达到所需的布局效果。

五、响应式设计（Responsive Design）中的 CSS

媒体查询（Media Queries）
- 媒体查询是 CSS3 引入的一种技术，它允许根据不同的设备特性（如屏幕宽度、分辨率等）应用不同的样式。通过媒体查询，可以创建适应不同设备的响应式网页。
- 例如：

   /* 当屏幕宽度小于 768px 时应用以下样式 */
   @media screen and (max-width: 768px) {
       body {
           font-size: 14px;
       }
      .sidebar {
           display: none;
       }
   }

这里当屏幕宽度小于 768 像素时，将网页的字体大小设为 14 像素，并隐藏.sidebar类的侧边栏元素。

弹性布局（Flexbox）和网格布局（Grid）在响应式设计中的应用
- Flexbox 和 Grid 是 CSS3 中用于布局的强大工具，在响应式设计中非常有用。
- Flexbox 可以轻松实现项目的对齐、排序、换行等操作，适应不同屏幕尺寸下的布局变化。例如，在小屏幕设备上可以让项目自动换行，而在大屏幕设备上可以水平排列。
- Grid 可以将网页划分为网格状结构，更方便地进行复杂的布局规划。在响应式设计中，可以根据不同的屏幕尺寸重新定义网格的列和行，以适应不同设备的显示需求。

总之，CSS 在网页设计中起着至关重要的作用，它不仅能够美化网页外观，还能实现各种复杂的布局和响应式设计，以适应不同设备和用户需求。

六. 优先级

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

内联样式, ID 选择器,类选择器.这三种选择器的优先级相同，当它们发生冲突时，后面定义的样式会覆盖前面的。

二. 基本用法

一、选择器的用法

元素选择器
- 用法：通过 HTML 元素的名称来选择元素。它会选择页面上所有该类型的元素。
- 实例：

   p {
       color: blue;
       font-size: 16px;
   }

这段 CSS 代码会将网页中所有<p>段落元素的文本颜色设置为蓝色，字体大小设为 16 像素。

类选择器
- 用法：以点（.）开头，用于选择具有特定class属性的元素。可以将相同的样式应用于多个不同的元素，只要它们具有相同的类名。
- 实例：

 .highlight {
       background-color: yellow;
       font-weight: bold;
   }

然后在 HTML 中，可以这样使用：

   <p class="highlight">这是一段被突出显示的文本。</p>
   <div class="highlight">这是另一个具有相同样式的元素。</div>

这里的<p>和<div>元素都具有highlight类，它们的背景颜色会变为黄色，字体加粗。

ID 选择器
- 用法：以井号（#）开头，用于选择具有特定id属性的唯一元素。在一个 HTML 页面中，每个id应该是唯一的。
- 实例：

   #header {
       height: 100px;
       background-color: gray;
   }

在 HTML 中：

   <header id="header">这是网页的头部。</header>

这里的<header>元素具有id为header，它的高度被设置为 100 像素，背景颜色为灰色。

后代选择器
- 用法：用于选择作为另一个元素后代的元素。它通过在选择器之间用空格分隔来表示。
- 实例：

   ul li {
       list-style-type: none;
   }

这将选择<ul>元素内部的所有<li>元素，并将它们的列表样式类型设置为无。

子选择器
- 用法：选择作为另一个元素直接子元素的元素。它通过在选择器之间用大于号（>）分隔来表示。
- 实例：

   div > p {
       margin-top: 10px;
   }

这将选择<div>元素的直接子元素<p>，并为它们设置顶部边距为 10 像素。

二、属性的用法

字体属性
- font-family：用于设置文本的字体。例如：

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

这里将网页正文的字体设置为 Arial，如果 Arial 字体不可用，则使用浏览器默认的无衬线字体。

font-size：设置字体大小。可以使用像素（px）、百分比（%）等单位。例如：

   h1 {
       font-size: 24px;
   }

将<h1>标题的字体大小设置为 24 像素。

font-weight：设置字体的粗细。可以是normal（正常）、bold（粗体）等。例如：

   strong {
       font-weight: bold;
   }

将<strong>标签内的文本设置为粗体。

颜色属性
- color：设置文本的颜色。可以使用颜色名称（如red、blue等）、十六进制值（如#FF0000表示红色）、RGB 值（如rgb(255, 0, 0)表示红色）等。例如：

   p {
       color: #00FF00;
   }

将段落文本颜色设置为绿色（十六进制值#00FF00表示绿色）。

background-color：设置元素的背景颜色。用法与color类似。例如：

   div {
       background-color: lightgray;
   }

将<div>元素的背景颜色设置为浅灰色。

布局属性
- margin：设置元素的外边距，即元素与周围其他元素之间的空白区域。可以分别设置上、下、左、右的外边距，也可以使用简写形式。例如：

   div {
       margin: 20px; /* 四个方向的外边距都是 20 像素 */
   }

或者

   div {
       margin-top: 10px;
       margin-bottom: 15px;
       margin-left: 5px;
       margin-right: 5px;
   }

padding：设置元素的内边距，即内容与边框之间的空白区域。用法与margin类似。例如：

   p {
       padding: 10px;
   }

将段落的内边距设置为 10 像素。

float：用于实现浮动布局，使元素可以向左或向右浮动。例如：

 .image {
       float: left;
       margin-right: 10px;
   }

这里将具有image类的元素向左浮动，并设置其右边距为 10 像素。

position：用于定位元素。有static（默认，正常流定位）、relative（相对定位，相对于其正常位置进行偏移）、absolute（绝对定位，相对于其最近的已定位祖先元素进行定位）和fixed（固定定位，相对于浏览器窗口进行定位）等取值。例如：

 .menu {
       position: fixed;
       top: 0;
       right: 0;
   }

这里将具有menu类的元素设置为固定定位，使其始终位于浏览器窗口的右上角。

三、实例：创建一个简单的网页布局

以下是一个简单的 HTML 和 CSS 代码示例，创建一个具有头部、侧边栏、内容区域和底部的网页布局：

HTML 代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>网页布局示例</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <header id="header">
    <h1>网站标题</h1>
  </header>
  <aside class="sidebar">
    <ul>
      <li><a href="#">链接 1</a></li>
      <li><a href="#">链接 2</a></li>
      <li><a href="#">链接 3</a></li>
    </ul>
  </aside>
  <section class="content">
    <p>这是主要的内容区域。</p>
  </section>
  <footer id="footer">
    <p>版权所有 © 2024</p>
  </footer>
</body>

</html>

CSS 代码（styles.css）：

#header {
  height: 80px;
  background-color: gray;
  text-align: center;
}

.sidebar {
  width: 200px;
  float: left;
  background-color: lightblue;
  padding: 10px;
}

.content {
  margin-left: 200px;
  padding: 20px;
}

#footer {
  clear: both;
  background-color: gray;
  color: white;
  text-align: center;
  padding: 10px;
}

在这个例子中，通过 CSS 对不同的 HTML 元素进行样式设置，实现了一个简单的网页布局，包括具有特定样式的头部、侧边栏、内容区域和底部。

三. 总结

到这就能看的那些heml和css的用法了,熟能生巧.

一然明月(全栈)

关注

10
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS基础 - 基础

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页外观和布局的样式表语言。一、基本作用外观设计CSS 可以控制网页中元素的颜色、字体、大小、粗细、样式（如斜体、下划线等）。例如：p {这段 CSS 代码会将网页中所有段落元素的文本颜色设置为蓝色，字体大小设为 16 像素，字体加粗。布局控制可以定义网页元素的位置、大小、排列方式等。
复制链接

扫一扫