CSS学习笔记整理（一）
前情提要
网页主要由三部分组成：
结构（HTML）——描述页面的结构（框架）
表现（CSS）——控制页面中元素的样式（颜色、图像等）
行为（JavaScript）——响应用户操作（点某个区域有变化、能拖动之类的）
CSS简介
CSS中文名字为重叠样式表，我们所看到的网页实际上是一个立体结构，由一层一层的元素重叠而成。而通过CSS可以对每一层进行样式设计。
编写位置
内联（行内）样式（不推荐）
例如：修改字体大小和颜色
实现代码：
<body>
<p style="color: brown; font-size: 60px;">我是棕色</p>
<!-- 在标签内部写，只能对一个标签生效，若要应用到其他标签则需要重新写 -->
</body>
内部样式表（嵌入）
写到< head >标签中的< style >标签中，通过css的选择器来选中元素并为其设置样式
实现代码：
<head>
<meta charset="UTF-8">
<title>这是一个新的网页</title>
<style>
p{
color: cadetblue;
font-size: 50px;
}
/* 如果要修饰的标签有多个且为同一类型，则就写一个标签名，然后用大括号，里面写上想要修改的样式 */
</style>
</head>
<body>
<p>竹杖芒鞋轻胜马</p>
<p>谁怕？</p>
<p>一蓑烟雨任平生</p>
</body>
外部样式表
将css的样式编写到一个外部的css文件中，通过link标签引入外部的css文件，这样不同的页面就可以应用同一种样式。
实现代码：
<link rel="stylesheet" href="./style.css">
<!-- 写在<head>标签里面，href的值为外部css文件的路径 -->
<!-- 想要用到这样的样式的网页只要引用就可以了 -->
CSS基本语法
< style >标签内要遵循CSS的语法规范
-
注释
/* 在CSS中注释长这样 */
选择器
- 通过选择器可以选择页面中的指定元素
p{
color: cadetblue;
font-size: 50px;
}
/* 这里的p就是一个选择器，作用是选中页面中所有的p元素进行大括号内设定的修饰 */
基本选择器
元素选择器
根据标签名来选中指定的元素
形式：标签名{ }
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color: cadetblue;
font-size: 50px;
}
/* 这里的p就是一个标签选择器，选择了p元素，因此下面的p标签都变色，h1标签没有被选择，不变色*/
</style>
</head>
<body>
<p>三月七日，沙湖道中遇雨。</p>
<p>雨具先去，同行皆狼狈，余独不觉，已而遂晴，故作此。</p>
<h1>莫听穿林打叶声⑸，何妨吟啸且徐行。</h1>
</body>
id选择器
要是想改变某个特定p标签的样子，则在那个p标签中设定特定的id来改变、
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#first{
color: cadetblue;
font-size: 50px;
}
/* 关于id的使用可以参考上一个总结*/
/* 同样在这里id后面的值只能使用一次，如果另一个标签中也想要这样的效果则应该起个新的id名再重新进行设置 */
</style>
</head>
<body>
<p id="first">三月七日，沙湖道中遇雨。</p>
<p>雨具先去，同行皆狼狈，余独不觉，已而遂晴，故作此。</p>
<h1>莫听穿林打叶声⑸，何妨吟啸且徐行。</h1>
</body>
类选择器
用于改变某一部分的样式，被改变的区域个数为多个
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.first{
color: cadetblue;
font-size: 50px;
}
/* 用法和id类似，但可以重复使用,且id前面用#，class用. */
</style>
</head>
<body>
<p class="first">三月七日，沙湖道中遇雨。</p>
<p>雨具先去，同行皆狼狈，余独不觉，已而遂晴，故作此。</p>
<h1>莫听穿林打叶声，何妨吟啸且徐行。</h1>
<p class="first">竹杖芒鞋轻胜马，谁怕？</p>
/* class后面设定的属性值可以有多个，用空格隔开*/
</body>
通配选择器
选中页面中的所有元素
语法 ：*{ }
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
color: cadetblue;
font-size: 50px;
}
</style>
</head>
<body>
<p class="first">三月七日，沙湖道中遇雨。</p>
<p>雨具先去，同行皆狼狈，余独不觉，已而遂晴，故作此。</p>
<h1>莫听穿林打叶声，何妨吟啸且徐行。</h1>
<p class="first">竹杖芒鞋轻胜马，谁怕？</p>
</body>
关系选择器
靠缩进来区分关系
| 选择器 | 备注 |
|---|---|
| 父元素 > 子元素 | 选中子元素 |
| 兄弟元素 ~ 兄弟元素 | 选中兄弟元素 |
| 兄弟元素 + 兄弟元素 | 选中相邻兄弟元素 |
| 祖先元素 后代元素 | 选中后代元素 |
- 父元素、子元素
article和h2之间相差一个缩进的距离，且article在前面，所以article为父元素
- 祖先元素、后代元素
div和h2的缩进一样，因此也是article的子元素
第二个h2与div之间相差一个缩进，因此第二个h2是div的子元素
so现在的关系就是：article是第一个h2和div的父亲，div是第二个h2的父亲
因此article和第二个h2就是祖先和后代的关系
- 兄弟元素
不难看出最后的h1和h2与最开始的article的缩进是相同的，因此是兄弟关系，所以为兄弟元素
刚刚也提到：article是第一个h2和div的父亲
同一个父亲，所以第一个h2和div也是兄弟关系
声明块
- 通过声明块指定要为元素设置的样式
p{
color: cadetblue;
font-size: 50px;
}
/* 这里的大括号就是一个声明块，声明块由一个个声明组成，每个声明之间用分号隔开 */
536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
