前端基础之css

2023-08-22 20:55:10

一、form表单

在form表单有两个重要的属性分别是：

关于表单两个属性： name：作为发送server端的数据的键
value：作为发送server端的数据的值

标签嵌套原则：块级标签可以嵌套块级、内联但是内联只能嵌套内联标签

二、css的引入方式：

1、行内式

行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

<p style="color: rebeccapurple">P3</p>

2、嵌入式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中

<style>

p {  color: red;

  background-color: wheat;

}

</style>

3.链接式
  将一个.css文件引入到HTML文件中

    <link rel="stylesheet" href="index.css">

4、导入式

三、css选择器

1、基本选择器

一、标签选择器
只要是选择的那个标签下的，所有的都要跟着变化
如：div{color:red;

}

2、id选择器

因为id是唯一的，选择id的标签下的，随着变化

如： #p2{
color:red;

}

切记切记切记！
id中的那个标签前面的#要加上

3、class选择器

在class下面的多个标签，前面要加 .(点)，这样class下面的标签才发生变化

如： .c1{
color:red;

}

4.所有选择器
所有选择器是*代表
如： *{
color:red;

}

二、组合选择器
1、后代选择器
在父类下的所有和后代匹配的都会发生变化
如： .c2 p{
color:red;

}

2.子代选择器

和父类匹配上只有在父类下的匹配会发生变化（比如父类下只有儿子符合，孙子就不符合只能除外）
如： .c2>p{
color: red;
}

3.毗邻选择器

和父类匹配上但只能和父类相邻的会发生变化，只能是同级元素（注意：只能往下不能往上）
如： .c2+p{
color: red;
}

4.兄弟选择器
只要能和父类匹配上，那么父类下的所有都符合

如： .c2~p{
color: red;
}

5.多元素选择器

父类下所有的一一对应匹配的都会发生变化
如： .c2 .c3,.c2~.c3{
color: red;
background-color: green;
font-size: 15px;
}

码农公寓