css教程学习

班长老六哥

已于 2024-05-31 15:17:06 修改

阅读量906

点赞数 1

文章标签： javascript html css

于 2022-09-29 11:37:29 首次发布

本文链接：https://blog.csdn.net/zk12668/article/details/127104102

版权

CSS基础

整个结构称为规则集（规则集通常简称规则），注意各个部分的名称：

(个人理解选择器就像一个函数名称，不同的函数名称实现不同的功能，后面的大括号也和js的函数语法很像，实现函数里面的具体内容，每个语句后面有分号，只是只有一种语句，就是键值对)

选择器（Selector）
HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 元素）。要给不同元素添加样式，只需要更改选择器。

声明（Declaration）
一个单独的规则，如 color: red; 用来指定添加样式元素的属性。

属性（Properties）
改变 HTML 元素样式的途径（本例中 color 就是 元素的属性）。CSS 中，由编写人员决定修改哪个属性以改变规则。

属性的值（Property value）
在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

一、属性（Properties）

1、外边距属性 margin

margin: 10px 50px 20px; /*设置所有四个顺时针（上右下左）方向的外边距属性*/
margin-top: 10px;
margin-right:50px;
margin-bottom:20px;
margin-left:2px;

2、内边距属性 Padding

Padding: 10px 50px 20px; /*设置所有四个顺时针（上右下左）方向的外边距属性*/
Padding-top: 10px;
Padding-right:50px;
Padding-bottom:20px;
Padding-left:2px;

3、字体属性 font

font-family: Arial; /*字体*/
font-size: 40px; /*字体大小*/
color:red; /*字体文本颜色*/
font-weight: bold; /*字体粗细*/
font-style: italic; /*字体倾斜*/

4、文本属性text

text-indent: 50px;/*文本首行缩进*/
text-align: center; /*文本对齐*/
text-shadow: 2px 2px 5px red; /*文本阴影*/
text-decoration: none; /*通常用于删除超链接的下划线*/

5、背景属性background

background-color: blue; /*定义背景颜色*/
background-image: url("paper.gif"); /*定义背景图片*/
background-repeat: no-repeat; /*定义背景图像的重复方式*/
background-size : contain;/*定义背景图片的大小*/
background-position :top; /*设置背景图片位置*/
background-attachment: fixed; /*定义背景图像的显示方式*/
background: no-repeat url("../../media/examples/lizard.png"); /*此属性是一个简写属性，可以在一次声明中定义一个或多个属性，但是顺序必须对.*/

6、盒子的高度和宽度属性 box-sizing

box-sizing: content-box;/* 默认值内容的宽度*/
box-sizing: border-box; /*border + padding + 内容的宽度*/

7、定位偏移属性let right top bottom

left： 100px; /*除非首先设置了 position 属性，否则这些属性将不起作用*/
right：100px;
top： 100px;
bottom ：100px;

8、定位属性position

静态定位 position:static /*默认定位方式使用边偏移属性无效*/
绝对定位 position: absolute /*脱离文档流左上角0 0位置偏移相当于ps新建了一个图层*/
相对定位 position:relative /*不脱离文档流原有位置偏移 */
固定定位 position:fixed /* 脱离文档流左上角00位置便宜相对于浏览器*/
粘性定位 position:stick /*默认静态定位效果滑到顶部就是固定定位效果*/

二、选择器（Selector）

1、元素选择器 p

2、全局选择器 *

3、id选择器 #my-id

4、类选择器 .my-class

5、属性选择器 img[src]

6、伪类选择器 a:hover

7、伪元素选择器 ::first-line

8、后代选择器 .box p

9、子代关系选择器 ul > li

10、邻接兄弟选择器 h1 + p

11、通用兄弟选择器 h1 ~ p

12、关系选择器 ul > li[class="a"]

13、选择器优先级

14、选择器继承

三、层叠、优先级与继承

1、层叠 (cascade)

当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。

2、优先级

一个元素选择器不是很具体，则会选择页面上该类型的所有元素，所以它的优先级就会低一些。
一个类选择器稍微具体点，则会选择该页面中有特定 class 属性值的元素，所以它的优先级就要高一点。

3、继承

一些设置在父元素上的 CSS 属性是可以被子元素继承的，有些则不能。
像 width、margin、padding 和 border 不会被继承

4、控制继承

inherit 设置该属性会使子元素属性和父元素相同。实际上，就是“开启继承”。
initial 将应用于选定元素的属性值设置为该属性的初始值。
revert 将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于 unset。
revert-layer 将应用于选定元素的属性值重置为在上一个层叠层中建立的值。
unset 将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial 一样

5、理解层叠

资源顺序如果你有超过一条规则，而且都是相同的权重，那么最后面的规则会应用。资源顺序仅在规则的优先级相同时才体现出来
优先级你会发现在一些情况下，有些规则在最后出现，但是却应用了前面的具有冲突的规则。这是因为前面的有更高的优先级——它范围更小，因此浏览器就把它选择为元素的样式。就像前面看到的，类选择器的权重大于元素选择器，因此类上定义的属性将覆盖应用于元素上的属性。这样可以避免重复的 CSS。一种常见的做法是给基本元素定义通用样式，然后给不同的元素创建对应的类。举个例子，在下面的样式中我给 2 级标题定义了通用样式，然后创建了一些类只修改部分属性的值。最初定义的值应用于所有标题，然后更具体的值通过对应类来实现。
内联样式内联样式，即 style 属性内的样式声明，优先于所有普通的样式，无论其优先级如何。这样的声明没有选择器，但它们的优先级可以理解为 1-0-0-0；即无论选择器中有多少个 ID，它总是比其他任何优先级的权重都要高。

四、盒子模型

在 CSS 中，所有的元素都被一个个的“盒子”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。本文以 CSS 盒模型为主题，你将了解其工作原理和相关术语。

1、区块盒子与行内盒子

在 CSS 中，我们有几种类型的盒子，一般分为区块盒子（block boxes）和行内盒子（inline boxes）。类型指的是盒子在页面流中的行为方式以及与页面上其他盒子的关系。盒子有内部显示（inner display type）和外部显示（outer display type）两种类型。

2、一个拥有 block 外部显示类型的盒子会表现出以下行为：

盒子会产生换行。
width 和 height 属性可以发挥作用。
内边距、外边距和边框会将其他元素从当前盒子周围“推开”。
如果未指定 width，方框将沿行向扩展，以填充其容器中的可用空间。在大多数情况下，盒子会变得与其容器一样宽，占据可用空间的 100%。
某些 HTML 元素，如 <h1> 和 ，默认使用 block 作为外部显示类型。

3、一个拥有 inline 外部显示类型的盒子会表现出以下行为：

盒子不会产生换行。
width 和 height 属性将不起作用。
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。
某些 HTML 元素，如 <a>、 、 以及 ，默认使用 inline 作为外部显示类型。

五、布局（layout）

1、display 属性

在 css 中实现页面布局的主要方法是设定display属性的值。此属性允许我们更改默认的显示方式。
事实上，你可以更改任何元素的display值，这意味着你可以根据它们的语义选择 html 元素，而不必关心它们的外观。他们的样子是你可以改变的。
除了可以通过将一些内容从block转换为inline（反之亦然）来更改默认表示形式之外，还有一些更大的布局方法以display值开始。但是，在使用这些属性时，通常需要调用其他属性。在讨论布局时，对我们来说最重要的两个值是 display: flex 和 display: grid。

2、float属性布局

.box { float: left; }
.box { float: right; }
传统布局
浮动曾被用来实现整个网站页面的布局，它使信息列得以横向排列（默认的设定则是按照这些列在源代码中出现的顺序纵向排列）。目前出现了更新更好的页面布局技术，所以使用浮动来进行页面布局应被看作传统的布局方法。
/*浮动元素脱离文档流*/
/*浮动元素互相贴靠没有间隙*/
/*浮动元素具有行内块元素特点，可以指定高度宽度*/
/*浮动元素会被文字环绕*/

3、position属性定位布局

.positioned { position: sticky; top: 30px; left: 30px; }
传统布局

4、flex弹性盒子布局

.container { display: flex; }
响应式布局
Flexbox 是 CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。
要使用 flexbox，你只需要在想要进行 flex 布局的父元素上应用display: flex ，flex是Flexible box的缩写，所有直接子元素都将会按照 flex 进行布局。我们来看一个例子。
flex-wrap: wrap; 多行在使用flexbox 效果时我们可以发现如果子元素数量较多时，内容常会被压缩且挤在同一行，这时我们就可以透过flex-wrap来换行