学习CSS的心得体会

最新推荐文章于 2021-03-30 21:34:14 发布

NBplus2

最新推荐文章于 2021-03-30 21:34:14 发布

阅读量7.2k

点赞数 3

文章标签： css web

本文链接：https://blog.csdn.net/weixin_47978224/article/details/114803991

版权

本文介绍了CSS的基础知识，包括语法规则、生效规则、颜色设置、尺寸设置、文本对齐、边框与边距、元素定位、溢出处理、浮动、不透明度、组合选择器和伪类伪元素。重点讲解了CSS的定位方式，如static、relative、fixed和absolute，以及如何通过选择器和声明来控制元素的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、CSS介绍

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。

网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

二、CSS知识点总结

(1)CSS的语法规则

一条CSS样式规则由两个部分构成：选择器和以{ }包裹的一条或多条声明。例如：h1{color:blue;}.

在这里插入图片描述

选择器是你需要改变样式的对象；声明中由一个属性和一个值组成并且声明之间用分号分隔；每个属性都有一个值，属性与值之间用冒号分开。
其中选择器除了有元素选择器外，还有id和class选择器。class选择器是最常使用的！
id选择器前有 # 号。例如#q{color: blue;}。表示页面上id为a的元素让它显示蓝色，但是在HTML中，元素的id值必须唯一，因此id选择器适用的范围只有一个元素。
class选择器前有 . 号。例如.a{text-align:center;}表示页面中class为a的元素让它居中对齐。在HTML中class值可以有很多个，并且可以重复。因此，class选择器的使用十分普遍。

(2)CSS的生效规则

我们一般有三种方法：外部样式表，内部样式表，内联样式。
外部样式表(最为常用)
即在HTML文档中<head>标签里面加上例如下面的语句调用css文件：<link rel=“stylesheet” type=“text/css” href=“mycss.css”>就可以导入外部的 mycss.css 样式表文件。但是这个mycss.css必须在HTML文档的目录下面。
css文件的格式例如：
body {
background-color: linen;
text-align: center;
}
h1 {
color: red;
}
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
引入外部样式表是我们使用样式的主流方式，因为众多的样式规则单独放在一个文件中，与 HTML 内容分开，结构清晰。同时其它页面也可使用，达到复用的目的。

内部样式表：
我们也可以将样式放在 HTML 文件中，这称为内部样式表。例如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
  **<style>
    body {
      background-color: linen;
      text-align: center;
    }
    h1 {
      color: red;
    }
    .haha {
      margin-top: 100px;
      color: chocolate;
      font-size: 50px;
    }
  </style>**
</head>
<body>
  <h1>我是有样式的</h1>
  <hr>
  <p class="haha">还是有点丑：)</p>
</body>
</html>

即在<head>元素中引入了<style>标签，在其中放入了样式。这种方式适合页面的样式规则较少时采用。

内联样式：
就是直接把样式规则直接写到要应用的元素中，例如：<h3 style="color:green;">I am a heading</h3>内联样式是最不灵活的一种方式，建议不要使用！
**级联的优先级的规则是哪个样式定以离元素近，哪个就生效。**大体从高到低的顺序是内联样式>内部样式表或外部样式表>浏览器缺省样式。

(3)对于颜色设置

我们可以采用颜色名称也可以使用颜色RGB16进制值，来设定前景或背景的颜色。例如<h3 style="background-color:Orange;">Orange</h3>

(4)对于尺寸设置

我们可以用height和width对元素内容占据的尺寸进行设置。可以用像数px设置或者百分比%来设置。例如：

.example-1 {
  width: 100%;
  height: 200px;
  background-color: powderblue;
  text-align: center;
}

(5)元素文本对齐

对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可（显然缺省的是左对齐）。

(6)盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，如下图所示：
在这里插入图片描述
说明：
Content 盒子的内容，如文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域

因此一个元素真正占据的宽度应该是：左外边距 + 左边框宽度 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽度 + 右外边距。所以，我们在用width属性设置元素的宽度时，实际上只设置了其内容的宽度。

(6)边框与边距

无论边框、内边距还是外边距，它们都有上下左右四个方向。 对它们的设置如下：

<p class="example-1">I have black borders on all sides.</p>
<p class="example-2">I have a blue bottom border.</p>
<p class="example-3">I have rounded grey borders.</p>
<p class="example-4">I have a purple left border.</p>

.example-1 {
  border: 1px dotted black; /* 上下左右都相同 */
}
.example-2 {
  border-bottom: 1px solid blue; /* 只设置底部边框 */
}
.example-3 {
  border: 1px solid grey;
  border-radius: 15px; /* 边框圆角 */
}
.example-4 {
  border-left: 5px solid purple;
}

对内边距的设置：（外边距类似）

padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */

(7)对元素定位

position属性用于对元素进行定位。该属性有以下一些值：
static 静态
relative 相对
fixed 固定
absolute 绝对
只有设置了元素的position属性后才能使用top, bottom, left, right属性。

1)static

设置为静态定位，这是元素的默认定位方式，也即你设置与否，元素都将按正常的页面布局进行。
即：按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。

2)relative

设置为相对定位,这将把元素相对于他的静态（正常）位置进行偏移。

3)fixed

设置为固定定位，元素将固定不动,无论你怎样滚动滑轮。此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）

4)absolute

设置为绝对定位。将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。如果该元素的所有父元素都没有设置定位属性，那么就相对于这个父元素。

(8)溢出

当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
溢出属性有一下几个值：

visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条

(9)浮动

在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
例如：.example-float-right { float: right; }
一个元素浮动后，其后的元素将尽可能包围它，或者说出现在这个浮动元素的左或右方。
如果希望浮动元素后面的元素在其下方显示，可使用clear: both样式来进行清除。

(10)不透明度

我们可以用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高.

(11)组合选择器

1)后代选择器

以空格作为分隔，如：.haha p 代表在div元素内有p这种类的所有元素。例如:

<html>
<head>
  <style>
    .haha p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="haha">
    <p>Paragraph 1 in the div .haha.</p>
    <p>Paragraph 2 in the div .haha>.</p>
    <span>
        <p>Paragraph 3 in the div .haha.</p>
    </span>
  </div>
  <p>Paragraph 4. Not in a div .haha.</p>
  <p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>

段落1、2、3都将有黄色的背景，而段落4、5没有。

2)子选择器

以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接p元素。
接着上段代码分析，虽然段落3在.haha类中，但它的直接父元素是span，不是.haha的直接后代，所以不能选择。只有段落1、2有黄色背景。

(12)伪类和伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
使用语法如下:

a:link {color:#FF0000;}     /* 未访问的链接 */
a:visited {color:#00FF00;}  /* 已访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标划过链接 */
/* 鼠标移到段落则改变背景颜色 */
p:hover {background-color: rgb(226, 43, 144);}
p:first-line{color:blue;}   /* 段落的第一行显示蓝色 */
p:first-letter{font-size: xx-large;}   /* 段落的第一个字超大 */

h1:before { content:url(smiley.gif); } /* 在每个一级标题前插入该图片 */
h1:after { content:url(smiley.gif); } /* 在每个一级标题后插入该图片 */

三、学习CSS的体会

CSS主要是用来对页面的样式进行设计。我们可以通过运用CSS技术来设计出我们想要的页面效果，并且CSS是与HTML内容是分开的，这极大地方便了我们阅读、修改程序，也使得CSS具有一定的重复使用的特性，只需要在html文件中引入CSS文件即可，这对设计者来说十分方便的。除此以外，CSS比较容易学习但是如果想要使用的非常自然、熟悉的话是比较困难的，需要不断的运用、尝试才能设计出最具有自我特色的html页面。因此，学习CSS不仅要学它的使用，更要学习如何合理的运用到你想要表达的页面当中去，打造一个属于你自我特色的页面，这种实践内容才是我们学习的目的，才能促进我们不断进步。