前端之CSS

一、导入方式

• 行内样式

<h1 style="color:red">我是标题</h1>

• 内部样式

<style>
    h1{
        color:green;
    }
</style>

• 外部样式

h1{
    color:green;
}

<link rel="stylesheet" href="css/style.css">

优先级符合就近原则。

二、选择器

1.基本选择器

• 标签选择器

​ 会选择页面上所有一类标签。

• 类选择器

​ 可以多个标签复用，跨标签。

<h1 class="zq">类选择器</h1>
<h2 class="zq">类选择器2</h2>

.zq{
    color: #671880;
}

• id选择器

​ id必须唯一。

<h2 id="zqid">id选择器</h2>

#zqid{
    color: red;
}

优先级：id > class > 标签

2.层次选择器

• 后代选择器

body p{
    background: red;
}

• 子选择器

body>p{
    background: green;
}

• 兄弟选择器

  相邻兄弟选择器：只有一个，相邻（向下）

.active + p{
    background: #671880;
}

• 通用选择器

​ 通用兄弟选择器，当前选中元素的向下的所有兄弟元素

.active~p{
    background: #72807d;
}

3.结构伪类选择器

ul li:first-child{
    background: green;
}

ul li:last-child{
    background: red;
}

4.属性选择器

属性名，属性名=属性值（正则）

​ =表示绝对等于

​ *=表示包含

	^=表示以...开头        

	$=表示以...结尾        

​ 存在id属性的元素 a[]{}

a[class*="links"]{
    background: black ;
}

a[href^="http"]{
    background: orange;
}

三、盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vuAVu0jD-1642236589439)(E:\学习文档\笔记\图\image-20220114221437095.png)]

1. margin：外边距
2. padding：内边距
3. border：边框

四、浮动

块级元素：独占一行 h1~h6 、p、div、 列表…
行内元素：不独占一行 span、a、img、strong

行内元素可以包含在块级元素中，反之则不可以。

1.display属性

1. block：块元素

2. inline：行内元素

3. inline-block：是块元素，但是可以内联，在一行

   这也是一种实现行内元素排列的方式，但是我们很多情况用float

4. none：消失

2.float属性

​ left 左浮动

​ right 右浮动

​ clear 元素浮动，但是按照标准文档从上到下依次排列

3.overflow

​ scroll 添加滚动条

​ hidden 将超出边框的内容隐藏

五、定位

1.相对定位

相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留。

positon：relstive;
top:-20px;
left:20px;
bottom:-10px;
right:20px;

2.绝对定位

相对父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留。

positon：absolute;

3.固定定位

相对于浏览器位置始终固定。

positon：fixed;

4.z-index

图层
默认是0，最高无限~999

持续更新中。。。