学习CSS的心得体会

最新推荐文章于 2022-02-15 18:57:13 发布

NBplus2

最新推荐文章于 2022-02-15 18:57:13 发布

阅读量7k

点赞数 3

文章标签： css web

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

版权

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

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

一、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 {