Web开发入门————CSS基础

Super易

已于 2023-08-13 10:12:56 修改

阅读量490

点赞数 2

分类专栏：微信小程序开发文章标签： css 前端开发语言

于 2023-08-13 10:09:47 首次发布

本文链接：https://blog.csdn.net/weixin_72668830/article/details/132210979

版权

微信小程序开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了Web开发中CSS的基础概念，包括CSS的作用、HTML文档中CSS的使用方式、基础语法、选择器类型、常用属性（如字体、背景、盒模型等）、定位与布局、列表、伪类和响应式设计。指南鼓励读者通过实践学习和提升CSS技能。

摘要由CSDN通过智能技术生成

css简介

CSS，全称为层叠样式表（Cascading Style Sheets），是一种用于描述网页文档外观和样式的标记语言。它与HTML（超文本标记语言）一同被用于构建和呈现网页内容。CSS通过定义元素的样式，如字体、颜色、布局、间距等，使得网页的呈现和排版能够更加精确和灵活。
> CSS由选择器、属性和值组成。选择器用于定位HTML元素，属性用于定义要修改的样式属性，值用于设置属性的具体值。

HTML文档使用css的方式

HTML文档使用CSS样式可以通过三种主要方式：

内联样式：
在HTML元素的style属性中直接编写CSS样式。这种方式适用于只需在单个元素上应用样式的情况。例如：

<p style="color: blue; font-size: 16px;">This is a blue paragraph with 16px font size.</p>

尽管内联样式在某些情况下很方便，但不推荐在整个文档中大量使用它，因为它将样式与内容混合在一起，难以维护和管理。

内部样式表：
在HTML文档的<head>部分使用<style>标签来定义CSS样式。这样的样式表仅适用于当前HTML文档。例如：

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>这是一个具有18像素字体大小的绿色段落。</p>
</body>
</html>

内部样式表适用于单个HTML文档，但如果有多个页面需要应用相同的样式，那么最好考虑使用外部样式表。

外部样式表：
使用外部CSS文件，将样式定义放在独立的CSS文件中，然后在HTML文档中通过<link>元素引用该文件。这是最常用的方式，因为它可以在多个页面上重用相同的样式。

创建一个独立的CSS文件（例如：styles.css）：

/* styles.css */
p {
    color: green;
    font-size: 18px;
}

然后在HTML文档中引用该样式表：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>这是一个具有18像素字体大小的绿色段落。</p>
</body>
</html>

使用外部样式表有助于保持HTML和CSS的分离，使代码更具可维护性，并且可以在多个页面上共享相同的样式。这是在实际开发中推荐的方式。

css基础语法

基本的语法格式：

选择符{
       属性：属性值;
       属性：属性值;
       ...}

选择器

以下是css以及其对应html调用选择器的示例

1. 元素选择器： 通过HTML元素的名称来选择元素。
HTML：

<p>This is a paragraph.</p>

CSS：

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

2. 类选择器： 通过HTML元素的class属性值来选择元素。
HTML：

<p class="highlight">This is a highlighted paragraph.</p>

CSS：

.highlight {
    background-color: yellow;
}

3. ID选择器： 通过HTML元素的id属性值来选择元素。
HTML：

<div id="header">This is a header.</div>

CSS：

#header {
    font-weight: bold;
}

4. 后代选择器： 选择元素的后代（嵌套在某个元素内部的元素）。
HTML：

<div class="container">
    <p>This is a paragraph inside a container.</p>
</div>

CSS：

.container p {
    border: 1px solid gray;
}

5. 子选择器： 选择元素的直接子元素。
HTML：

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

CSS：

ul > li {
    list-style-type: square;
}

6. 相邻兄弟选择器： 选择和某元素同级且紧邻的元素。
HTML：

<h2>Heading</h2>
<p>This is a paragraph.</p>

CSS：

h2 + p {
    margin-top: 10px;
}

7. 伪类选择器： 选择元素的特定状态。
HTML：

<a href="#">Hover me</a>

CSS：

a:hover {
    color: red;
}

8. 伪元素选择器： 选择元素的特定部分，如元素的前后内容
HTML：

<p>This is a paragraph.</p>

CSS：

p::before {
    content: ">> ";
}

9. 通用选择器： 选择所有元素。
HTML：

<div>This is a div.</div>
<p>This is a paragraph.</p>

CSS：

 1. {
    margin: 0;
    padding: 0;
}

10. 属性选择器： 选择具有特定属性的元素。
HTML：

<input type="text" placeholder="Enter text">
<input type="password" placeholder="Enter password">

CSS：

input[type="text"] {
    border: 1px solid gray;
}

常用属性

1.字体属性

font-family：设置字体族。有两种不同类型的字体系列可供选择。一种是特定字体系列：Times字体,courier字体,Verdana字体,Helvetica字体。另一种是通用字体：Serif字体，Sans-serif字体，Monospace字体，Cursive字体，Fantasy字体

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

font-style:定义字体风格，属性值可为normal（默认值），italic(斜体），oblique(倾斜），inherit(继承父元素字体样式）

p {
    font-style: italic;
}

font-size：设置字体大小。可以以像素为单位，也可以以百分号为单位。

p {
    font-size: 100px;
}
p {
    font-size: 100%;
}

font-weight：设置字体粗细。
color：设置文本颜色。
text-align：设置文本对齐方式。
line-height：设置行高。
text-decoration：设置文本装饰，如下划线。

p {
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-align: center;
    line-height: 1.5;
    text-decoration: underline;
}

font:可以一次性设置字体多种样式，按照字体风格，大小写，文字笔画粗细，字体大小和行高，字体系列的顺序来设置。未设置就使用默认值

p {
    font: oblique small-caps bold 30px/50px arial,sans-serif;
}

2.背景属性

background-color：设置背景颜色。

.button {
    background-color: #3498db;
}

background-image，background-repeat：background-image设置背景图片,background-repeat定义如何重复背景图像repeat（默认值，背景图像在垂直和水平方向重复），repeat-x（在水平方向上重复），repeat-y（在垂直方向上重复）no-repeat（不重复）。

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

background-position：属性用于控制背景图片在元素背景中的位置。它允许指定背景图片的显示位置，可以使用关键字、百分比或长度值来设置。

使用关键字：

left、center、right：水平方向居左、居中、居右。
top、center、bottom：垂直方向居上、居中、居下。
left top、center bottom：同时设置水平和垂直方向的位置。

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

** 使用百分比：**
可以使用百分比值来定位背景图片相对于元素的百分比位置。

div {
    background-image: url('image.jpg');
    background-position: 50% 25%;
}

使用长度值：
也可以使用像素、em等单位的长度值来控制背景图片的位置。

div {
    background-image: url('image.jpg');
    background-position: 10px 20px;
}

组合值：
你还可以将水平和垂直方向的定位值进行组合，以更精确地控制背景图片的位置。

div {
    background-image: url('image.jpg');
    background-position: right 20px bottom 30px;
}

background-attachment:用于控制背景图片的滚动行为，即当页面滚动时，背景图片是否跟随元素一起滚动。

这个属性有两个可能的值：

scroll（默认）：背景图片会随页面内容一起滚动，保持与元素的位置关系不变。
fixed：背景图片固定在元素的位置，不随页面滚动而移动，创建视差效果。

示例：

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

border-color：设置边框颜色。
border-width：设置边框宽度。
border-radius：设置边框圆角。

div {
    border: 2px solid #333; 
    border-width: 1px;
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 15px;
}

3.盒模型

width：设置宽度。
height：设置高度。
margin：设置外边距。基本的语法格式为选择符{margin:top right bottom left},按照顺时间方向设置外边距。在设置margin属性值时，如果略写了某外边距的值，遵循以下设置原则：

1.缺少左外边距，使用右外边距作为左外边距的值。
2.缺少下边距，使用上外边距作为下外边距的值。
3.缺少右外边距，使用上外边距作为右外边距的值。

padding：设置内边距。设置方式和原则同外边距
border：设置边框。它可以同时设置边框的宽度、样式和颜色。

border 属性的语法如下：


border: width style color;

其中，各个属性的含义如下：

width：设置边框宽度，可以使用像素（px）、em、百分比等单位。
style：设置边框样式，常见的样式包括：solid（实线）、dashed（虚线）、dotted（点线）等。
color：设置边框颜色，可以使用颜色名、十六进制值、RGB、RGBA等。

示例：

/* 设置元素边框 */
div {
    border: 2px solid #333;
}

/* 设置不同样式、宽度和颜色的边框 */
p {
    border: 1px dashed red;
}

/* 分别设置上、右、下、左边框的样式、宽度和颜色 */
button {
    border: 1px solid #000;
    border-top: 2px solid blue;
    border-right: 3px dotted green;
    border-bottom: 1px dashed red;
    border-left: 1px solid #000;
}

4.定位和布局

1. position：
position 属性用于设置元素的定位方式。常见的值包括：

static：默认值，元素按照正常文档流进行布局。
relative：相对定位，元素相对于其原始位置进行移动，不影响其他元素的布局。
absolute：绝对定位，元素相对于最近的具有定位属性（非static）的父元素进行定位。
fixed：固定定位，元素相对于视窗进行定位，不随滚动条滚动而改变位置。

.relative {
    position: relative;
    top: 20px;
    left: 50px;
}

.absolute {
    position: absolute;
    top: 0;
    right: 0;
}

2. top、right、bottom、left：
这些属性用于在使用绝对定位时，控制元素相对于其父元素或视窗的偏移量。

3. display：
display 属性用于控制元素的显示方式。

block：元素将占据一整行，并在其上下放置空白。
inline：元素将在一行内显示，不会破坏行的布局。
inline-block：元素在一行内显示，但仍可以设置宽度和高度。
none：元素不会显示，不占用空间。

.block {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

.inline-block {
    display: inline-block;
    width: 48%;
    margin-right: 2%;
}

.inline {
    display: inline;
    margin-right: 10px;
}

4. float：
float 属性用于设置元素浮动在其容器中的左侧或右侧，允许文本和其他内容环绕在其周围。

5. clear：
clear 属性用于控制元素如何清除浮动的影响，以避免浮动元素造成布局问题。

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

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

6. 弹性盒子（Flexbox）：
Flexbox 是一种用于更有效地布局元素的布局模型。通过设置父元素的 display: flex，你可以控制其子元素的布局方式。

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item {
    flex: 1;
    padding: 10px;
}

7. 网格布局（Grid）：
Grid 是一种二维布局模型，通过将元素放置在行和列上，你可以创建复杂的网格式布局。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

.item {
    background-color: #ccc;
    padding: 20px;
}

5.列表

list-style：设置列表项的标志样式。

属性值	说明
none	无标志
disx	默认值，实心圆
circle	空心圆形
square	实心方块
decimal	数字
decimal-leading-zero	0开头的数字，如01，02…
lower-roman	小写罗马数字
upper-roman	大写罗马数字
lower-latin	小写拉丁字母
lower-latin	大写拉丁字母

table-layout：控制表格布局。
border-collapse：控制表格边框的合并方式。
list-style-position: 设置列表项标志的位置属性，

outside 标志放置在列表项外
inside 标志与列表项内容放在一起。

list-style: 列表项综合属性。语法格式如下:选择符{list-style:type position image}

1. 有序列表样式：

ol {
    list-style-type: decimal; /* 默认值，使用数字 */
}

2. 无序列表样式：

ul {
    list-style-type: disc; /* 默认值，使用实心圆点 */
}

3. 自定义列表样式：

ul.custom-list {
    list-style-type: none; /* 移除默认样式 */
}

ul.custom-list li::before {
    content: "\2022"; /* 使用Unicode编码表示实心圆点 */
    color: #333;
    margin-right: 5px;
}

表格样式：

1. 表格基本样式：

table {
    border-collapse: collapse; /* 合并边框 */
    width: 100%;
}

th, td {
    border: 1px solid #ccc; /* 添加边框 */
    padding: 8px;
    text-align: left;
}

2. 表格奇偶行样式：

tr:nth-child(odd) {
    background-color: #f2f2f2; /* 奇数行背景色 */
}

tr:nth-child(even) {
    background-color: #e0e0e0; /* 偶数行背景色 */
}

3. 表头样式：

th {
    background-color: #333;
    color: white;
}

6.伪类

CSS 伪类是用于选择 HTML 元素的特定状态或位置的一种方法。对不同状态下的元素应用不同的样式。以下是一些常见的 CSS 伪类及其用法：

1.:link:未访问时应用的样式。

a:link {
   color: blue;
 }

2.:visited:已访问时应用的样式。
···css
a:visited {
color: blue;
}
···
3. :hover：当鼠标悬停在元素上时应用的样式。

a:hover {
  color: blue;
}

4.:active：当元素被激活（例如点击链接）时应用的样式。

button:active {
  background-color: red;
}

5.:focus：当元素获得焦点时应用的样式，通常用于表单元素。

input:focus {
  border-color: green;
}

6.:first-child：选择作为其父元素的第一个子元素的元素。

ul li:first-child {
  font-weight: bold;
}

7.:last-child：选择作为其父元素的最后一个子元素的元素。

ul li:last-child {
  font-style: italic;
}

8.:nth-child(n)：选择作为其父元素的第 n 个子元素的元素。

ul li:nth-child(odd) {
  background-color: lightgray;
}

9.:nth-of-type(n)：选择作为其父元素中特定类型的元素的第 n 个元素。

div p:nth-of-type(2) {
  font-size: 18px;
}

10.:not(selector)：选择不匹配指定选择器的元素。

p:not(.special) {
  color: gray;
}

11.:before 和 :after：在元素的内容之前或之后插入生成的内容。

p:before {
  content: "→ ";
}

12.:checked：选择被选中的复选框或单选按钮。

input[type="checkbox"]:checked {
  border-color: green;
}

7.响应式设计

在网页设计中，响应式设计使网站能够在不同设备上以不同的布局和样式呈现，以提供更好的用户体验。以下是一些常见的用于实现响应式设计的 CSS 技术和方法：

媒体查询： 使用媒体查询可以根据不同的屏幕宽度、高度、方向等特性来应用不同的 CSS 样式。

/* 当屏幕宽度小于等于 768px 时应用的样式 */
@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

相对单位： 使用相对单位，如百分比、em、rem，可以根据父元素或根元素的大小调整元素的尺寸。

.container {
  width: 80%; /* 相对于父元素宽度的百分比 */
  font-size: 1.2em; /* 相对于父元素字体大小的倍数 */
  padding: 1rem; /* 相对于根元素字体大小的倍数 */
}

弹性盒子布局： Flexbox 是一种布局模型，可以轻松实现灵活的布局，适应不同屏幕尺寸。

.container {
  display: flex;
  flex-direction: row; /* 默认情况下为水平方向排列，可以在媒体查询中更改为垂直方向 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

网格布局： 网格布局允许您将页面分割为行和列，从而创建复杂的布局。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 将容器分为三列 */
  gap: 20px; /* 列之间的间隔 */
}

图片和媒体的响应式处理： 使用 max-width: 100% 让图片和媒体内容适应其容器的宽度，防止溢出。

img, video {
  max-width: 100%;
  height: auto;
}

隐藏和显示元素： 使用 display: none 或 visibility: hidden 根据屏幕尺寸隐藏或显示特定元素。

.mobile-only {
  display: block; /* 在移动设备上显示 */
}

.desktop-only {
  display: none; /* 在移动设备上隐藏 */
}

结语

在这篇博客中，仅仅触及了CSS世界的表面。要真正掌握CSS，需要不断地练习和实践。通过尝试不同的样式组合、布局方式和交互效果，逐渐熟悉CSS开发。

希望这篇博客为你提供了一个坚实的起点，让你能够在你的项目中应用CSS的基础知识。如果你有任何问题或想要深入了解特定的主题，请随时在评论中提问。CSS是一个令人兴奋且不断演变的领域，愿你在这个旅程中获得愉快的学习体验！

感谢阅读！

Super易

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录