CSS学习总结

最新推荐文章于 2022-12-08 15:53:34 发布

qq_58174923

最新推荐文章于 2022-12-08 15:53:34 发布

阅读量521

点赞数

文章标签： css 学习 css3

本文链接：https://blog.csdn.net/qq_58174923/article/details/125689580

版权

CSS学习心得

对CSS的一些了解

首先了解到了CSS是决定如何将撰写的html文件呈现出来的语法。其全称为级联样式表。平常我们使用的html会显得过于的单调，而css就相当于是美化我们的界面的。

css使元素如何呈现包括页面布局，元素素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等。

CSS语法

CSS的语法构成主要是两部分，一个选择器，以及一条用｛｝包裹的多种生声明如:

$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsign:center; ｝'$
这个代码就是P这个选择器的元素其中有文字的颜色和文本居中。其中的选择器还有id选择器和class选择器，id选择器前面需要加‘#’号如#p{}，class选择器前面就需要跟一个‘.’如.center｛｝。

如何使用CSS

CSS将如何引用到我们的html文件中实际的美化我们的界面，一般是三种方法：外部样式表，内部样式表和内联样式表。外部样式表是将html和css文件分别存放，在html文件中调用即可，内部样式表是直接将样式放到html文件中需要在<head>中用<style>和</style>将样式内容夹杂在中间就可以在body中使用了。最后一种就是内联样式，直接在定义元素的时候就将样式写进去。这三种由于内联和内部两种的可优化和可更改泛用能力差一般不用，大多用外部样式表，同时存在的时候那个离元素更近，哪个就生效。

CSS语法详情

颜色，尺寸，对齐

颜色在css中有颜色和颜色值的区分，语法为
"color:Tomato;"和"background-color:#ff0000;"分别更改颜色色系和颜色值。

尺寸

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

width: 100%;height: 200px;
分别是设置其宽度占屏幕的百分比和高度为200pixels。

对齐

对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可，即语法为

text-align:

后面接属性就可以使与此相应的选择器改变文本要求。

盒子模型

可以将html元素看作一个盒子，每个元素由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。内容一般为文本和图片，内边距就是内容和边框之间的距离，边框默认不显示，外边距就是边框以外与其他元素的距离。如：

$^{'} b o r d e r : 10 p x s o l i d r e d; p a d d i n g : 25 p x; m a r g i n : 25 p x;^{'}$
分别就是指此盒子的边框宽度为10px并且颜色为红色，内容与边框的距离为25px，边框外与其他元素的距离为25px。

边框与边距

在盒子模型中的属性里面的边框，内外边距都是有上下左右四个方向。

边框

边框"border："后面接的内容就是对此盒子里面边框的属性，如后续接-bottom是对下边框进行调整，在如"后接-radius"就会使其四个边框角变成圆角形式。

边距

边距padding是在指属性与边框的距离，也分为上下左右四个边框，后续可以接-topd等的东西，然后分别输入其尺寸就可以了，或者直接不输入放入尺寸就会默认以上右下左的顺序，如果上下相等，相等，就可以设置为两个参数，前一个参数为上下，后一个参数为左右。如padding: 25px 10px可以执行上下25px的边距，左右也是25px的边距。

定位

position属性用于元素定位，可以接一下的一些值：1.static（静态）2.relative（相对）2.fixed(固定)4.absolute（绝对）.接下来分别对这些进行介绍。

static

这是设置为静态定位，即可以以正常的形式按照元素在HTML出现的先后顺序从上到下，从左到右进行安排。当然因为这个是默认的方式，不设置的话他也会以这个模式来进行呈现。

relative

这是相对定位码，将默认的元素位置可以进行偏移。在CSS中加入这个函数，在其中键入对应的移动参数和颜色等东西就可以使在html使用这个参数的内容如这个内容中写的一样。

fixed

这是将属性定义为固定的位置，即使滚动条滑动，他都还是固定在窗口的区域中自定义的某一块。同时也是在css中写这个函数然后在html中进行调用，也是相对于视窗的位置进行固定在某一个地方，函数中可以自定义位置和颜色等的属性。

absolute

绝对定位是需要寻找一个父元素进行相对偏移，如果没有这样的父元素则指定为body这个父元素。先用div class="example-relative"这样的指定父元素的定位属性，然后加入div class="example-absolute"子元素定位属性来相对于父元素的定位位置进行定位。

溢出

溢出也就是元素内容超过规定时，通过溢出overflow属性来处理这些溢出的部分。一般含有以下几个值：1.visible默认值，溢出部分不被裁剪，在区域外显示。2.hidden裁剪溢出部分并且不可见.3.scroll裁剪溢出部分，但是提供上下和左右滚动条显示。4.auto裁剪溢出部分，视情况提供滚动条.

大致也是在html中使用example-overflow-xxxx来调用这些函数，在css中设定之中的参数如裁剪部分的属性等。

浮动

在一个容器或者区域内使用float浮动属性可以使这个元素进行移动，周围的元素也会跟随其进行合理布局。example-float-right然后加入水平移动的属性。

不透明度

可以使用opacity对元素多为图片设置不透明度。范围在[0-1]之间，越高说明元素越明显。"class=‘opacity"加在引用图片的前面。

组合选择器

介绍过用元素，id，callss选择器现在可以进行组合，下面有两种组合选择器

后代选择器

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

子选择器

或者说叫直接后代选择器，以>作为分隔，如：.haha>p代表在.haha类的元素直接

元素.

伪类和伪元素

用于定义元素的某种特定的状态或者位置等也就是满足于各样的样式需求或者出现各种的状态改变。语法如下

selector:pseudo-class/pseudo-element{property:value;}

选择器后使用":"号在跟上某个伪类/伪元素。前面带有pseudo就是代表着有伪这个属性的声明，花括号中加入自己想要的效果，颜色，大小等之类的需求。