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;
}
/* 这里的大括号就是一个声明块,声明块由一个个声明组成,每个声明之间用分号隔开 */