前端基础之css

时间:2024-01-10 23:52:32

一、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;
}