Web学习之CSS
文章目录
- 一. 什么是CSS
- 二. CSS语法
- 三. CSS选择器
-
-
- （1）id选择器
- （2）class选择器
-
- 四. CSS如何生效
-
-
- （1）外部样式表
- （2）内部样式表
- （3）内联样式
-
- 五. 颜色, 尺寸, 对齐
- 六. 盒子模型
-
-
- 边框与边距
-
- 七. CSS定位
-
-
- （1）static定位
- （2）relative定位
- （3）fixed定位
- （4）absolute定位
- （5）sticky定位
-
- 八. CSS溢出
- 九. CSS浮动
- 十. CSS不透明度
- 十一. 组合选择器
-
-
- （1）后代选择器
- （2）子元素选择器
- （3）相邻兄弟选择器
- （4）后续兄弟选择器
-
- 十二. 伪类和伪元素
-
-
- （1）伪类
- （2）伪元素
-
- 十三. 弹性盒子(Flex Box)
- 十四. CSS响应式设计
- 十五. 总结
- 十六. 参考资料
一. 什么是CSS
- CSS是
级联样式表（Cascading Style Sheets）的缩写。 - HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
- CSS涉及许多方面，如
整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等。 - HTML的内容和CSS的表现是分离的，便于代码的撰写与维护。
准备工作：
要想逻辑清楚、条理清晰的构建CSS，需要在VS Code上安装Live Sass Compiler插件。
之后我们直接在工作区创建一个后缀为.scss的文件，点击底部的Watch Sass，插件会生成并随时更新你的.css文件。
本文均在.scss文件中撰写代码。
二. CSS语法
- 一条CSS样式规则由两个主要的部分构成：①选择器 ②以
{}包裹的一条或多条声明。
h1 {color:rgb(17, 77, 240);font-size:50px;text-align:center;}
其中：
h1是选择器 ；
color、front-size,text-align为属性 ；
rgb(17,77,240)、50px、center为值 ；
color:rgb(17, 77, 240)为一个声明，font-size:50px为一个声明 ，text-align:center为一个声明；
这条规则表明，页面中所有的一级标题都显示为rgb(17, 77, 240)颜色，字体大小为50像数，且居中。
- 选择器是您需要改变样式的对象(上面的规则就一级标题生效)；
- 每条声明由
一个属性和一个值组成。(无论是一条或多条声明，都需要用{}包裹，且声明用;分割)； - 属性（property）是您希望设置的
样式属性(style attribute)；每个属性有一个值；属性和值被冒号分开。
三. CSS选择器
一个页面上的元素众多，选择器就用于在页面中找到/选择需要应用这个样式的对象。
除我们前面的元素选择器外，还有id和class选择器，其中class选择器使用非常普遍。
（1）id选择器
- id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
- CSS 中， id 选择器以 “
#” 来定义。
以下的样式规则应用于元素属性 id=“para1”:
#para1
{
text-align:center;
color:red;
}
上述代码意思为id为para1的元素文本居中且为红色。
在HTML中，元素的id值必须唯一； 因此id 选择器适用范围
只有一个元素。
（2）class选择器
- class 选择器用于描述一组元素的样式，class 选择器可以在多个元素中使用；
- CSS 中，class选择器以一个点"
."号显示；
.center{
text-align: center;
}
.large{
font-size: 30px;
}
.red{
color: red;
}
以上代码定义了三条规则，分别应用于页面上对应的元素，如只要页面上某元素的class为red，那么就让它呈现红色。
如下所示的页面：
"center">我会居中显示的
"red">我是红色的
"center large red">我又红又大还居中
"red">我也可以是红的
四. CSS如何生效
让CSS样式对页面生效，一般有三种方法：外部样式表，内部样式表，内联样式表。
（1）外部样式表
引入外部样式表是使用样式的主流方式，由于众多的样式规则单独放在一个文件中，与 HTML内容分开，结构清晰。同时其它页面也可使用，达到复用的目的。
- 当样式需要应用于很多页面时，外部样式表将是理想的选择；
- 在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观；
- 每个页面使用
< link> 标签链接到样式表。
标签在头部：
"stylesheet" type="text/css" href="mystyle.css">
说明：
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档；
外部样式表可以在任何文本编辑器中进行编辑；
文件不能包含任何的 html 标签。
示例
1.新建如下内容的一个 HTML文件：
"UTF-8">
"X-UA-Compatible" content="IE=edge">
"viewport" content="width=device-width, initial-scale=1.0">
Duffy and Friends
"stylesheet" type="text/css" href="mystyle.css">
Duffy and Friends
2.在同一目录新建一个样式表文件mystyle.css如下：
body {
background-color: rgb(250, 219, 225);
text-align: center;
}
h1 {
margin-top: 20px;
color:rgb(17, 77, 240);
font-size: 50px;
}
在浏览器中看到效果：
（2）内部样式表
一般而言，只有页面的样式规则较少时可采用内部样式表的方式。
- 当单个文档需要特殊的样式时，就应该使用内部样式表；
- 可以使用
Duffy and Friends