本文详细介绍了CSS的基础知识，包括如何使用CSS修改HTML元素样式、选择器的种类（如标签选择器、类选择器、ID选择器等）、复合选择器的应用，以及CSS中的颜色、字体、背景、盒子模型等重要属性。同时，文章还讨论了文档流布局、浮动布局和定位的概念，帮助读者深入理解CSS在网页设计中的作用。
CSS（层叠样式表）
层叠样式表是一种样式表语言，用来设置页面的样式及布局
使用css修改html元素的样式
第一种方式：内联样式，行内样式
<body>
<h3 style="color:pink;font-size:16px;">css层叠样式表</h3>
</body>
第二种方式：内部样式表
将样式编写到head中的style标签中
<head>
<style>
div {
color: brown;
font-size: 14px;
}
</style>
</head>
<body>
<div>
垂緌饮清露
<br/>
流响出疏桐
<br>
居高声自远
<br>
非是藉秋风
</div>
</body>
第三种：外部样式表
将css样式写到一个外部css文件中（style.css)，然后通过head中的link标签引入外部css文件
html文件
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div>
此地别燕丹
<br/>
壮士发冲冠
<br/>
昔时人已没
<br/>
今日水犹寒
</div>
</body>
css文件
div {
color: brown;
font-size: 14px;
}
相对文件路径和绝对文件路径
绝对文件路径：从盘符开始的文件路径 如：C:\Program Files\MySQL
相对文件路径：在当前文件中引入其他文件时，其他文件相对于当前文件的路径（从当前文件开始找）./表示当前文件的同级文件 …/表示当前文件上级目录的同级文件
如：./style.css 表示与当前文件同级的style.css文件 …/css/style.css 表示当前文件父目录的同级目录css下的style.css文件
css语法
选择器 {样式属性：值；样式属性：值；}
h3 {color:pink;font-size:16px;}
css选择器
基础选择器
标签选择器
p{} 标签名作为选择器
类选择器
.class值{} class属性作为选择器
id选择器
#id值{} id值作为选择器
通配符选择器
*{} 选择所有标签
<head>
<style>
/* 通配符选择器 */
*{
margin:20px 40px;
color:pink;
}
/* 标签选择器 */
p {
color:blue;
font-size:14px;
}
/* 类名选择器 */
.poem {
color:brown;
font-size:14px;
}
/* id选择器 */
#title {
font-size: 20px;
}
</style>
</head>
<body>
<div>
<span id="title">登幽州台歌</span>
<br>
<span class="poem"> 前不见古人，后不见来者。</span>
<br>
<span class="poem">念天地之悠悠，独怆然而涕下。</span>
</div>
<p>
前代的圣君，我没有见到；后代的明主我也见不到了。想到这天地如此浩渺，独自凭吊，涕泪横流，凄恻悲愁
</p>
</body>
复合选择器
后代选择器
元素1 元素2{}：元素1和元素2用空格隔开， 表示选择元素1的后代元素2
子类选择器
元素1>元素2：元素1和元素2用大于号隔开，表示元素1的子类元素2
交集选择器
选择器1选择器2 : 选择器1和选择器2直接并排写在一起，表示同时符合多个选择器的内容
并集选择器
选择器1，选择器2 : 选择器1 :和选择器2用逗号隔开，表示同时选择多个选择器选择的内容
<head>
<style>
* {
color: blue;
font-size: 26px;
list-style: none; /* 设置列表的样式为none*/
padding: 0;
}
/* 后代选择器 */
ol p {
color: aqua;
}
/* 子类选择器 */
ul>span {
color: brown;
}
/* 交集选择器 */
li.index {
color: pink;
}
/* 并集选择器 */
#one,
#two {
color: black;
}
</style>
</head>
<body>
<ol>
<!-- 后代选择器 选中p标签 -->
<ul>
<p>1</p>
</ul>
<li>1.1</li>
<br>
<!-- 子类选择器 选中ul中的li -->
<ul><span>2</span></ul>
<li><span>2.2</span></li>
<br>
<ul>3</ul>
<br>
<!-- 交集选择器 选中li且class为index的 -->
<ul class="index">4</ul>
<li class="index">4.4</li>
<br>
<ul>5</ul>
<br>
<!-- 并集选择器 同时选中id为one和two的标签 -->
<ul id="one">6</ul>
<ul id="two">7</ul>
</ol>
</body>
伪类选择器
链接伪类选择器
a:link{
} /**未访问过的链接**/
a:visited{
} /**已访问的链接**/
a:hover{
} /**鼠标经过的链接 重点**/
a:active{
} /**光标正在点击时**/
使用链接伪类选择器时要按L V H A的顺序
<head>
<style>
/**未访问过的链接**/
a:link {
color: pink;
}
/**已访问的链接**/
a:visited {
color: black;
}
/**鼠标经过的链接 **/
a:hover {
color: blue;
}
/**光标正在点击时**/
a:active {
color: aqua;
}
</style>
</head>
<body>
<a href="javascript:;"> 超链接</a>
<a href="http://www.baidu.com">百度</a>
</body>
：focus伪类选择器
input:focus{
} /*选择获得焦点的*/
属性选择器
input[value] 有value属性的
input[value="value"]value属性值=value的
input[value^="value"]以value开头的
input[value$="value"]以value结尾的
input[value*="value"]包含value的
结构伪类选择器
E:first-child
E:last-child
E:nth-child(n)
E:first-of-type
E:last-of-type
E:nth-of-type(n)
first-child表示该元素父元素的第一个子元素（无论标签是否相同先排序只有E相同且排序正确的会选中）
first-of-type表示该元素的第一个相同的兄弟元素（先按E将元素分类再选择E分类中的第n个元素）
nth的两个可以写具体的值也可以写表达式（n、2n+1、n+5、-n+5、even偶数、odd奇数）
伪元素选择器
在元素内添加一个伪元素 添加的伪元素为行内元素 且必须有content属性
E::after 在E中的最后加
E::before 在E中的最前面加
样式的继承
为一个元素设置的样式同样会应用到其后代元素上
并不是所有的样式都会被继承，背景、布局相关等的都不会被继承
<head>
<style>
ul {
/* 字体颜色样式相关的属性被继承了 */
/* padding样式没有被继承*/
list-style: none;
padding: 10px;
color: aqua;
font-size: 24px;
background-color: rgb(88, 66, 150);
}
li {
最低0.47元/天 解锁文章
扫一扫
591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
