CSS3基础教程
目录
1 基础知识
Cascading Style Sheets(层叠样式表)
HTML + CSS + JavaScript => 名词 + 形容词 + 动词
CSS可以认为对原始的HTML进行美化
1.1 快速入门
- CSS是什么
- CSS怎么用
- CSS选择器
- 美化网页
- 盒子模型
- 浮动
- 定位
- 网页动画
1.2 什么是CSS
美化:字体, 颜色,高度,宽度, 背景图片
1.3 CSS的优势
- 内容和表现分离
- CSS文件可以复用
- 样式十分丰富
- 建议使用独立的CSS文件
1.4 CSS导入的方法
- 行内样式
<h1 style="color: red">一级标题</h1>- style标签
<style></style>- 外部样式
- 链接方式
<link rel="stylesheet" href="style.css">- 导入式
<style>
@import url("css/style.css");
</style>1.5 基本语法
/* 注释语法 */
selector {
/* 声明 */
attr:value;
}下面的代码可以直接修改背景颜色
<style>
body {
background-color:gray;
}
</style>CSS基本操作
- 选中元素(选择某一类或者某一个)
- 属性修改(修改一个或者多个)
2 选择器
选择某一类或者某一个元素
2.1 基本选择器
- 标签选择器
- 类选择器
- ID选择器
2.1.1 标签选择器
选中html的标签
h1 {
color: red;
}
h2 {
color: black;
}
h3 {
color: yellow;
}
h4 {
color: red;
}2.1.2 类选择器
<h1 class="test">测试</h1>此时,可以讲HTML选中
类选择器使用.+className
.test {
color: black;
}2.1.3 ID选择器
<h1 id="test">测试</h1>#test {
color: black;
}ID唯一确定,不可以共享; 最为最精准的对位方式
2.2 高级选择器
- 层次选择器
- 结构伪类选择器
- 属性选择器
2.2.1 层次选择器
- 后代选择器
- 子选择器
- 相邻兄弟选择器
- 通用选择器
那么我们设想出一种结构,为其编写CSS
graph LR body-->p1 body-->p2 body-->p3 p3-->p4 p3-->p5 p3-->p6
根据此图写出html
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>2.2.1.1 后代选择器
下面的代码可以使得body标签中的所有p标签为红色(没有实现,因为造成网页的颜色太恶心了)
body p {
color: red;
}2.2.1.2 子选择器
下面的代码可以使得body标签中的第一级别p标签为红色(没有实现,因为造成网页的颜色太恶心了)
body>p {
color: green;
}2.2.1.3 相邻兄弟选择器
- 后面的兄弟
- 只有一个
<p class="active">p1</p>
<p>p2</p>
<p id="test">p3</p>
<p>p4</p>
<style>
.active+p {
color: red;
}
#test+p {
color: blue;
}
</style>可以得知选中了p2,p4,二者变色
p1
p2
p3
p4
2.2.1.4 通用兄弟选择器
- 选中所有下的
- 相同标签
<p>p1</p>
<p class="hello">p2</p>
<p>p3</p>
<style>
.hello~{
color: red;
}
</style>p1
p2
p3
p4
p5
p6
2.2.2 结构伪类选择器
结构可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁;
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p id="test">p7</p>
<p>p8</p>
</body>
</html>- 选中
ul标签下面的li的第一个子成员
ul li:first-child {
color: red;
}- 选中
ul标签下面的li的最后一个子成员
ul li:last-child {
color: red;
}- 选中父节点的第n个元素,并且是P标签
p:nth-child(1) {
background: green;
}2.2.3 属性选择器
选择携带某个属性的元素
/* 选中所有带有id属性的元素 */
p[id] {
color: pink;
}
/* 选中id为test的元素 */
p[id="test"] {
color: pink;
}
/* 选中id开头为test的元素 */
p[id^="test"] {
color: pink;
}3 CSS属性
选中元素开始设置属性
3.1 属性基础
- 字体样式
- 文本样式
- 文本阴影
- 超链接
- 列表样式
- 背景 span标签强调,这是一个标签, div标签,分块
<!-- 字体样式 -->
<style>
body {
font-family: 'Times New Roman', Times, serif;
font-size: 20px;
font-style: oblique;
}
</style>- font-family; 字体设置
- font-size 字体大小
- font-style 字体风格
3.2 属性提高
- 盒子模型与边框
