CSS学习总结-CSDN博客

本文链接：https://blog.csdn.net/Jason42412/article/details/115636273

CSS学习总结

什么是CSS

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

CSS语法规则

一条基本的CSS语句由选择器和以{}包裹的一条或多条声明组成。选择器是需要改变样式的对象，每条声明由一个属性和一个值组成，属性和值之间用:分开，多条声明之间用;分开。
例如：h1 {color:red;font-size:10px;}
这条代码表示所有一级标题的颜色为红色，字体大小为10像素。

选择器类型

选择器除了上面的元素选择器外还有id选择器和class选择器。

id选择器

id选择器由#+id名构成，由于元素的id唯一，所以id选择器的适用范围只有一个元素。

class选择器

class选择器由.+class名构成，可以对该class中的所有元素产生影响，class选择器的使用更为普遍。

CSS生效方式

CSS有三种生效方式，分别为内联样式，内部样式表，外部样式表。

内联样式

内联样式是指直接把样式规则直接写到要应用的元素中，如：

<h1 style="color:red;">ABCDEFG</h3>

内联样式完全将内容和样式合在一起，非常不灵活，在实际应用中非常少见。

内部样式表

内联样式表是在HTML的<head>元素中引入了<style>标签，放入了样式。其灵活性同样不佳，只有在页面样式规则较少时使用这种方式。

外部样式表

外部样式表方式是将外部的样式表文件导入HTML中生效，在HTML的<head>元素中加入如下语句<link rel="stylesheet" type="text/css" href="mycss.css">可导入外部同一目录下的样式表文件。外部样式表将样式规则存在单独的文件当中，与HTML文件分开，可以达到复用的目的，是我们使用样式的主流方式。

盒子模型

一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，如下图所示：
在这里插入图片描述

Content：盒子的内容，如文本、图片等。
Padding：内边距，即内容和边框之间的区域。
Border：边框。
Margin：外边距，边框以外与其它元素的区域。

内边距 padding, 边框 border, 外边距 margin又分别有top，bottom，left，right四个部分。

盒子模型中每个部分的样式均可单独设置。

元素定位

position属性用于对元素进行定位。有四种定位方式，分别为static 静态，relative 相对，fixed 固定，absolute 绝对。选择定位方式后再由top, bottom, left, right属性确定元素的相对位置。

static

语句position: static;可将元素设置为静态定位，即按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。

relative

语句position: relative;可将元素设置为相对定位，这将把元素相对于他的静态位置进行偏移。

fixed

语句position: fixed;可将元素设置为固定定位，此时的元素即使你拖动浏览器的滚动条也将固定不动，此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（浏览器的屏幕可见区域）。

absolute

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

元素处理

溢出处理

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