CSS
一、CSS简介
CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而CSS样式定义如何显示html元素。其涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。这说明一个真正网页的值作CSS有者举足轻重的作用。
二、CSS语法
一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明
1、选择器是需要改变样式的对象。
2、每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
3、属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
1.id 选择器
id选择器前有 # 号。
例如：
#sky{
color: blue;
}
这条规则表明，找到页面上id为sky的那个元素让它呈现蓝色。
注意：id 选择器适用范围只有一个元素。
2.class 选择器
class选择器前有 . 号。
例如：
.center{
text-align: center;
}
.large{
font-size: 30px;
}
.red{
color: red;
}
引用 <p class="center large red">我又红又大还居中</p>
注意：元素的class值可以多个，也可以重复。
所以，class选择器比id选择器应用的广泛
三、CSS的应用
1、外部样式表
首先在VS Code中新建一个HTML文件，（后缀为.html）
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
<link rel="stylesheet" type="text/css" href="mycss.css">
<title>页面标题</title>
</head>
<body>
<h1>人生苦短，及时行乐</h1>
<hr>
<p class="haha">哈哈哈哈哈！</p>
</body>
</html>
在同一目录下新建一个CSS文件，（后缀为.css）
例如:
body {
background-color: linen;
text-align: center;
}
h1 {
color: red;
}
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
其结果显示：
这里<body>标签设置的背景颜色和字体居中，表明整个页面的背景颜色和字体格式。<h1>设置了字体颜色，标签表明一级标题的字体颜色为红色。class选择器设置的字体的位置、颜色、和大小。在html中运用class选择器的元素采用class选择器设置的格式。
注意，html文件和css文件连接的路径。一般会放在同一目录下。
2、内部样式表
在html文件中直接写入样式表
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
<link rel="stylesheet" type="text/css" href="mycss.css">
<title>页面标题</title>
<style>
body {
background-color: linen;
text-align: center;
}
h1 {
color: red;
}
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
</style>
</head>
<body>
<h1>人生苦短，及时行乐</h1>
<hr>
<p class="haha">哈哈哈哈哈！</p>
</body>
</html>
其显示结果：
与上面的结果一致，只是在<head>中引入了<style>标签，其包含了修饰的内容。
虽然结果一样，但不提倡这种方式，只有页面的样式规则较少时可采用这种方式。
3、内联样式
所谓内联样式，就是直接把样式规则直接写到要应用的元素中
例如：
<h3 style="color:green;">I am a heading</h3>
内联样式是最不灵活的一种方式，完全将内容和样式合在一起，实际应用中非常少见。
三种方式的优先级
1、内联样式
2、内部样式表或外部样式表
3、浏览器缺省样式
四、颜色、尺寸、对齐
1、颜色名称可以使用颜色RGB16进制值来设定前景或背景的颜色，也可以用相应的英文代表的颜色来表示。(用颜色RGB16进制值来设置时，前需要加#号)
2、用height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
3、对于元素中的文本，可以简单的设置text-align属性为left, center, right即可（显然缺省的是左对齐）
五、CSS文档分析
1、盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。
1、Content 盒子的内容，如文本、图片等
2、Padding 填充，也叫内边距，即内容和边框之间的区域
3、Border 边框，默认不显示
4、Margin 外边距，边框以外与其它元素的区域
如下图所示:
一个元素真正占据的宽度应该是：
左外边距 + 左边框宽度 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽度 + 右外边距
2、边框与边距
无论边框、内边距还是外边距，它们都有上下左右四个方向。
例如，内边距的设置
padding: 20px; /* 上下左右都相同 */
padding-top: 20px;/*上边距是20px*/
padding-bottom: 100px;/*下边距是100px*/
padding-right: 50px;/*内边距的右边距是50px */
padding-left: 80px;/*内边距的左边距是50px */
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */
注意：简写时的顺序为上，右，下，左，或记为顺时针方向。
3、定位
position属性用于对元素进行定位。该属性有以下一些值：
1、static 静态
2、relative 相对
3、fixed 固定
4、absolute 绝对
设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。
- static
元素的默认定位方式是position: static;即按照元素出现的先后顺序从上到下，从左到右进行元素的安排。
- relative
相对定位position: relative;把元素相对于他的静态（正常）位置进行偏移
例如：
<!-- HTML -->
<div class="example-relative">我偏移了正常显示的位置。去掉我的样式对比看看？</div>
<!-- CSS -->
.example-relative {
position: relative;
left: 60px;
top: 40px;
background-color: rgb(173, 241, 241);
}
其显示结果：
相对于正常位置向左添加60像素。
- fixed
生成固定定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
- absolute
设置为绝对定位position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性，那么就相对于这个父元素。
4、溢出 overflow
溢出属性有一下几个值：
1、visible 默认值，溢出部分不被裁剪，在区域外面显示
2、hidden 裁剪溢出部分且不可见
3、scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
4、auto 裁剪溢出部分，视情况提供滚动条
例如：
<div class="example-overflow-scroll-y">床前明月光，疑是地上霜。举头望明月，低头思故乡</div>
<!-- CSS -->
.example-overflow-scroll-y {
width: 200px;
height: 100px;
background-color: #eee;
overflow-y: scroll;
}
结果显示：
5、浮动 float
在一个区域或容器内，可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。
例如：
<html>
<head>
<style>
.example-float-right {
float: right;
}
</style>
</head>
<body>
<img src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" class="example-float-right" alt="">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem, architecto officiis, repellendus
corporis obcaecati, et commodi quam vitae vel laudantium omnis incidunt repellat qui eveniet fugiat totam
modi nam vero!</p>
</body>
</html>
其结果显示：
如果将浮动float的属性改为向左，其结果显示如下：
图片就到了左边
注意： 绝对定位的元素忽略float属性！
6、不透明度
用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高。
例如：
<html>
<head>
<style>
img {
width: 25%;
border-radius: 10px;
float: left;
margin: 10px;
}
.opacity-2 {
opacity: 0.2;
}
.opacity-5 {
opacity: 0.5;
}
.opacity-10 {
opacity: 1;
}
</style>
</head>
<body>
<img class="opacity-2" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
<img class="opacity-5" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
<img class="opacity-10" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
</body>
</html>
其结果显示：
7、组合选择器
组合选择器就是将id、class选择器进行组合，形成一个组合选择器
- 后代选择器
以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素。
例如：
<html>
<head>
<style>
.haha p {
background-color: yellow;
}
</style>
</head>
<body>
<div class="haha">
<p>Paragraph 1 in the div .haha.</p>
<p>Paragraph 2 in the div .haha>.</p>
<span>
<p>Paragraph 3 in the div .haha.</p>
</span>
</div>
<p>Paragraph 4. Not in a div .haha.</p>
<p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>
段落1、2、3都将有黄色的背景，而段落4、5没有。
- 子选择器
也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接<p>元素。
例如：
<html>
<head>
<style>
.haha > p {
background-color: yellow;
}
</style>
</head>
<body>
<div class="haha">
<p>Paragraph 1 in the div .haha.</p>
<p>Paragraph 2 in the div .haha.</p>
<span>
<p>Paragraph 3 in the div .haha - it is descendant but not immediate child.</p>
</span> <!-- not Child but Descendant -->
</div>
<p>Paragraph 4. Not in a div .haha.</p>
<p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>
虽然段落3在.haha类中，但它的直接父元素是span，不是.haha的直接后代，所以不能选择。只有段落1、2有黄色背景。
总结
学习了CSS后，感觉对网页的制作看透了很多。尽管学会了如何使用 CSS 来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距时，包括如何定位元素、控制元素的可见性和尺寸，但自我感觉还是远远不够的，因为CSS涉猎的范围很多，对与创作网页的美化和排版都需要下很大的功夫。希望经过不断的练习和学习，可以掌握其中的知识，创作出属于自己的东西。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
