css学习总结_学习css学到了什么-CSDN博客

本文链接：https://blog.csdn.net/m0_50933935/article/details/118046734

CSS学习总结

一、CSS是什么？
二、CSS语法

一、CSS是什么？

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

二、CSS语法

1.CSS选择器：

一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:
在这里插入图片描述

选择器是需要改变样式的对象，用于在页面中找到/选择需要应用这个样式的对象。
常用的选择器包括ID选择器和class选择器：
其中ID选择器前面有“#”，且适用范围只有一个元素；
而class选择器前面有“.”，class选择值可以有多个，也可以重复

每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）

属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

组合选择器：
1.后代选择器
以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素。

2.子选择器
也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接<p>元素。

2.CSS生效：

一般通过外部样式表、内部样式表、内联样式等方法实现CSS对web的装饰。

外部样式表是在HTML同一目录下创建一个文件CSS专门存放样式表文件，引入样式文件时路径就变为 ./css/mycss.css之类的。这是使用样式的主流方式，因为众多的样式规则单独放在一个文件中，与 HTML 内容分开，结构清晰。同时其它页面也可使用，达到复用的目的。

内部样式表是将样式放在 HTML 文件中，注意在<head>元素中引入了<style>标签，放入了样式。一般而言，只有页面的样式规则较少时可采用这种方式。

内联样式：直接把样式规则直接写到要应用的元素中，是最不灵活的一种方式，完全将内容和样式合在一起，实际应用中非常少见

优先级问题，从高到低分别是：内联样式、内部样式表或外部样式表、浏览器缺省样式（哪个样式定义离元素的距离近，哪个就生效。）

3.CSS外观调整：

一个网站，颜色是其重要的一个特征，可以采用颜色名称也可以使用颜色RGB16进制值，来设定前景或背景的颜色。

尺寸：以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %

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

边框与边距：无论边框、内边距还是外边距，它们都有上下左右四个方向。简写时的顺序为上，右，下，左，或记为顺时针方向。

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

4.盒子模型：

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，

在这里插入图片描述

Content 盒子的内容，如文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域

用width属性设置元素的宽度时，实际上只设置了其内容的宽度。

5.定位：

position属性用于对元素进行定位。该属性有以下一些值：

static 静态
relative 相对
fixed 固定
absolute 绝对
设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。

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

relative
设置为相对定位position: relative;，这将把元素相对于他的静态（正常）位置进行偏移

fixed
设置为固定定位position: fixed;，这将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）。
此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）
absolute
设置为绝对定位position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性，那么就相对于这个父元素。（相对最近的父元素）