Avery 的 小站

Menu

往往
往往
Published on 2024-08-30 / 14 Visits
0
0

[前端复习] CSS 基础

一、CSS基础

1.什么是 CSS

CSS （Cascading Style Sheets）是一种计算机语言，用于表现HTML或XML等文件的样式。它不仅可以静态地修饰网页还可以配合各种脚本语言动态地对网页各元素进行格式化，拥有对网页对象和模型样式编辑的能力。

2.CSS 语法

CSS 规则由两个主要部分构成：选择器，以及一条或多条声明：

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

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

CSS 声明总是以分号结束，声明总以大括号括起来。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Avery的小站</title> 
<style>
p
{
	color:red;
	text-align:center;
} 
</style>
</head>
 
<body>
<p>Hello World!</p>
<p>这个段落采用CSS样式化。</p>
</body>
</html>

样式的语法

  • 内嵌（行内）样式表

<标签名 style="样式名1：样式值1；样式名2：样式值2；...."></标签名>

  • 内联样式表

<head>
	<style>
        选择器{
            样式名1：样式值1；
            样式名2：样式值2；
            ...
        }
    </style>
</head>

  • 外联样式表

需要在外部定义一个以 .css 为后缀的 css 文件

在 head 标签中通过 link 引入

<head>
	 <link rel="stylesheet" href="css文件的路径">
</head>

.css 中

选择器{
    样式名1：样式值1；
    样式名2：样式值2；
    ...
}

优先级：

行内样式表 > 内联样式表 > 外联样式表

3.CSS id 和 class

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#”来定义。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Avery的小站</title> 
<style>
#para1
{
	text-align:center;
	color:red;
} 
</style>
</head>
 
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

class 选择器

class 可以在多个元素中使用

class 选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点 . 号显示：

//.......
<style>
.center
{
	text-align:center;
}
</style>
</head>
 
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
//.......

4.CSS 链接

链接的样式，可以用任何 CSS 属性（如颜色、字体、背景等）。

特别的，链接可以有不同的样式，这取决于它们是什么状态。

这四个链接状态是：

  • a：link - 正常，未访问的链接

  • a：visited - 用户已经访问过的链接

  • a：hover - 当用户鼠标放在链接上时

  • a：active - 链接被点击的那一刻

当同一个链接被设置了若干链接状态，则有顺序规则：

  • a：hover 必须跟在 a：link 和 a：visited 后面

  • a：active 必须跟在 a:hover 后面

5.CSS 列表

在HTML中，有两种类型的列表：

  • 无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）

  • 有序列表 ol - 列表项的标记有数字或字母

6.CSS 盒子模型

CSS 盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：编剧、边框、填充和实际内容。

盒子模型允许我们在其他元素和周围元素边框之间的空间放置元素。

不同部分的说明：

  • Margin（外边距）- 清除边框外的区域，外边距是透明的

  • Border（边框）- 围绕在内边距和内容外的边框

  • Padding（内边距）- 清除内容周围的区域，内边距是透明的

  • Content（内容）- 盒子的内容，显示文本和图像

7.CSS margin（外边距）

margin

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上下左右边距，也可以一次改变所有的属性。

margin 属性可以有一到四个值。

  • margin ：25px 50px 75px 100px；

    • 分别为上、右、下、左边距，顺时针方向。

  • margin ：25px 50px 75px；

    • 分别为上、左右、下边距。

  • margin ：25px 50px；

    • 分别为上下、左右边距。

  • margin ：25px；

    • 上下左右边距均为25px。

8.CSS 分组 和 嵌套 选择器

分组选择器

在样式表中有很多具有相同样式的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>我是一只海绵派大星</title> 
<style>
h1,h2,p
{
	color:green;
}
</style>
</head>
 
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

嵌套选择器

它可能适用于选择器内部的选择器的样式。

在下面的例子设置了四个样式：

  • p{ }：为所有 p 元素指定一个样式。

  • .marked{ }：为所有 class=“marked” 的元素指定一个样式

  • .marked p{ }：为所有 class=“marked” 元素内的 p 元素指定一个样式。

  • p.marked{ }：为所有 class=“marked” 的 p 元素指定一个样式。

9.CSS 组合选择符

在 CSS3 中包含了四种组合方式：

  • 后代选择器（以空格 分隔）

  • 子元素选择器（以大于>号分隔）

  • 相邻兄弟选择器（以加号+分隔）

  • 普通（后续）兄弟选择器（以波浪号~分隔）

后代选择器

后代选择器用于选取某元素的后代元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>你好</title> 
<style>
div p
{
	background-color:yellow;
}
</style>
</head>
<body>
 
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
 
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
 
</body>
</html>

子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>你好</title> 
<style>
div>p
{
	background-color:yellow;
}
</style>
</head>
 
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
 
<div>
<span><p>I will not be styled.</p></span>
</div>
 
<p>My best friend is Mickey.</p>
</body>
</html>

相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>你好</title> 
<style>
div+p
{
	background-color:yellow;
}
</style>
</head>
<body>
 
<h1>文章标题</h1>
 
<div>
<h2>DIV 内部标题</h2>
<p>DIV 内部段落。</p>
</div>
 
<p>DIV 之后的第一个 P 元素。</p>
 
<p>DIV 之后的第二个 P 元素。</p>
 
</body>
</html>

普通（后续）兄弟选择器

普通（后续）兄弟选择器选取所有指定元素后的相邻兄弟元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>你好</title> 
<style>
div~p
{
	background-color:yellow;
}
</style>
</head>
<body>
	
<p>之前段落，不会添加背景颜色。</p>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
 
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
 
</body>
</html>

10.其他选择器

通配符

通配符 “ * ”

  • 找到页面中的所有标签

  • 不建议使用，性能开销太大

* {
    /*list-style:none*/
    /*padding:0 */
    css样式
}

伪元素选择器

  • ::after : 在标签内容之后添加一个渲染区域

  • ::before : 在标签内容之前添加一个渲染区域

注意：它们都需要搭配 content 来使用

.box::after{
    /* 固定搭配 */
    content: "1";
    display: inline-block;
    width: 20px;
    height: 20px;

    /* 倒圆角 */
    border-radius: 50%;
    background-color: red;
    color: #fff;
    font-weight: bold;

    /* 绝对定位 */
    position: absolute;
    top: -10px;
    right: -10px;
}

.box::before{
/* 固定搭配 */
content: "";
}

注意：如果需要给为元素设置宽高，那么需要把标签类型修改为块级元素 inline-block、block。

结构伪类选择器

  • first-child：找到当前结构的第一个标签，并且这个标签需要是指定的标签，样式才能应用

  • last-child：找到当前结构的最后一个标签，并且这个标签需要是指定的标签，样式才能应用。

p:first-child{
    color: red;
}
p:last-child{
    color: blue;
}

  • nth-child（数字）：找到当前结构正数对应数字的标签，并且这个标签就是指定的标签

  • nth-last-child（数字）：找到当前结构 倒数对应数字的标签，并且这个标签就是指定的标签

p:nth-of-type(2){
    color: tomato;
}
p:nth-last-of-type(2){
    color: green;
}

  • nth-of-type（数字）：找指定类型的正数第几个标签，并且该标签就是该类型的第几个

  • nth-last-of-type（数字）：找指定类型的倒数第几个标签，顶起额该标签就是该类型的第几个

p:nth-of-type(2){
    color: tomato;
}
p:nth-last-of-type(2){
    color: green;
}

其他用法

偶数：even / 2n

奇数：odd / 2n-1

隔两个选一个：3n

选中前面的 x 个： - n + x

Financial Econome...
[Python 学习] Pytho...

Comment