文章目录
<–CSS学习–！>
CSS
是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现
一、基础布局
1.文件类型说明。
说明：
-
选择器是需要改变样式的对象
-
每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用
{}
包裹，且声明用
;
分割） -
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开
一条CSS样式规则由两个主要的部分构成：选择器，以
{}
包裹的一条或多条声明:
.h1{color:blue;font-size:12px}
2.选择器说明（常用class选择器）
id 选择器
/* 注意：id选择器前有 # 号。 */
#sky{
color: blue;
}
class 选择器
/* 注意：class选择器前有 . 号。 */
.center{
text-align: center;
}
.large{
font-size: 30px;
}
.red{
color: red;
}
提示：class选择器的名称可以重复，因此使用次数更多。
二、盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由
内容 content, 内边距 padding, 边框 border, 外边距 margin
构成的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8SN7WPuG-1615295728864)(C:\Users\Administrator\Desktop\bd78f5d3be0673d6.jpg)]
无论边框、内边距还是外边距，它们都有上下左右四个方向。我们可以对四个方向分别设置一个值。
三、属性attribute
- 颜色：rgb16进制或英文
- 尺寸：包括height和width，用像素px和百分比两种单位。
- 对齐方式：left，center等；
- 溢出：overflow 有四种值处理溢出元素：visible,hidden,scroll,atuo;视情况选择
- 浮动：float ，有上下左右四个方向可选
- 不透明度：opacity，取值在0-1以内
四、定位：
position
属性用于对元素进行定位。该属性有以下一些值：
- static 静态
- relative 相对
- fixed 固定
- absolute 绝对
设置了元素的
position
属性后，我们才能使用
top, bottom, left, right
属性，否则定位无效。
1.static
设置为静态定位
position: static;
，这是元素的默认定位方式，也即你设置与否，元素都将按正常的页面布局进行。即从上到下，从左到右排列。
2.relative
把元素相对于静态位置进行偏移。
3.fixed
固定位置，即使上下拉动位置也不会变化。
4.absolute、
使元素相对于最近设置的父类元素进行偏移。
五.HTML内嵌CSS
有三种方式：
1.inline：在元素旁标签开头用style设置属性
2.internal：在部分，用
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
3.external：在head添加CSS链接
<head>
<link rel="stylesheet" href="styles.css">
</head>
rel表示的是什么？：嵌入html的形式，如stylesheet等，可以翻译为relationship
总结：哪个样式定义离元素的距离近，哪个就生效。
4.外部样式表：
使用一个完整的URL链接到一个样式表：
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
链接到位于对当前网站的HTML文件夹的样式表
<link rel="stylesheet" href="/html/styles.css">
链接到位于同一文件夹中当前页面的样式表：
<link rel="stylesheet" href="styles.css">