一、基础知识
1.内联元素：独占一行的元素 如：div、p、h
2.内联元素（行内元素）：span、a
3.选择器：元素选择器、id选择器、类选择器、通配选择器等
后代选择器：选中指定元素的指定后代元素；语法:祖先元素 后代元素{}
子元素选择器:选中指定父元素中指定的子元素； 语法:父元素 >子元素 {}
4.元素之间的关系：父元素；子元素；祖先元素；后代元素；兄弟元素
5.伪类：伪类专门用来表示元素的一种的特殊的状态， 比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框
当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 2.为没访问过的链接设置一个颜色为绿色
* :link 普通连接（没访问过的链接） */
a:link{
color: yellowgreen;
}
/* 3.为访问过的链接设置一个颜色为红色
:visited 访问过的链接
由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色*/
a:visited{
color: red;
}
/* 4.:hover伪类:表示鼠标移入的状态*/
a:hover{
color: aqua;
}
/*5.:active伪类:表示的是超链接被点击的状态*/
a:active{
color: black;
}
/*6.hover和:active也可以为其他元素设置
IE6中，不支持对超链接以外的元素设置:hover和:active */
p:hover{
background-color: aqua;
}
p:active{
background-color: aquamarine;
}
/* 7. :focus 文本框获取焦点以后，修改背景颜色 */
input:focus{
background-color: antiquewhite;
}
/* 8. 为p标签中选中的内容使用样式
可以使用::selection为类
注意：这个伪类在火狐中需要采用另一种方式编写::-moz-selection */
p::selection{
background-color: red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">没访问过的</a>
<br /><br />
<a href="http://www.baidu.com">访问过的</a>
<p>为其他元素设计</p>
<!--7.使用input可以创建一个文本输入框-->
<input type="text"/>
</body>
</html>6.伪元素：使用伪元素来表示元素中的一些特殊的位置
:before表示元素最前边的部分
一般before都需要结合content这个样式一起使用
通过content可以向before或after的位置添加一些(不可选中的)内容
:after表示元素的最后边的部分
7.属性选择器作用:可以根据元素中的属性或属性值来选取指定元素
语法:
1.[属性名] 选取含有指定属性的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*为所有具有title属性的p元素，设置一个背景颜色为黄色 */
p[title]{
background-color: yellow;
}
/* 为所有具有title属性是hello的p元素，设置一个背景颜色为红色 */
p[title="hello"]{
background-color: red;
}
/* 2.[属性名^="属性值"] 选取属性值以指定内容开头的元素 */
p[title^="ab"]{
background-color: blanchedalmond;
}
/* 4.[属性名$="属性值"] 选取属性值以指定内容结尾的元素
[属性名*="属性值"] 选取属性值以包含指定内容的元素 */
</style>
</head>
<body>
<p title="hello">我是一个段落</p>
<p>我是一个段落</p>
<p title="abc">我是一个段落</p>
<p title="abcd">我是一个段落</p>
<p>我是一个段落</p>
<p title="gggg">我是一个段落</p>
</body>
</html>8. 子元素选择器：
| :first-child | 可以选中第一个子元素 |
| :last-child | 可以选中最后一个子元素 |
| :nth-child() | 可以选中任意位置的子元素 该选择器后边可以指定一个参数，指定要选中第几个子元素 even 表示偶数位置的子元素 odd 表示奇数位置的子元素 |
9.兄弟元素选择器：
| 前一个+后一个 | 可以选中一个元素后紧挨着的指定的兄弟元素 |
| 前一个 ~ 后边所有 | 选中后边的所有兄弟元素 |
10.否定伪类：作用：可以从已选中的元素中剔除出某些元素
语法：:not(选择器)
11.样式的继承：在CSS中，祖先元素上的样式，也会被他的后代元素所继承，但是并不是所有的样式都会被子元素所继承
比如：背景相关的样式都不会被继承 边框相关的，样式、 定位相关的
12.选择器的优先级：
| 选择器： | 内联样式 | id选择器 | 类和伪类 | 元素选择器 | 通配选择器* | 继承的样式 |
| 优先级： | 1000 | 100 | 10 | 1 | 0 | 无 |
13. 涉及到a的伪类一共有四个：
:link
:visited
:active
:hover
而这四个选择器的优先级是一样的。
写的时候按顺序l v a h -->（简记）love hate,否则会被覆盖
14、
<!-- 1.em和strong;这两个标签都表示一个强调的内容，
em主要表示语气上的强调,em在浏览器中默认使用斜体显示
strong表示强调的内容，比em更强烈，默认使用粗体显示-->
<p>今天天气<em>真不错</em></p>
<p><strong>注意：如果你不认真上课，你就会找不到工作</strong></p>
<!-- 2. i标签中的内容会以斜体显示
b标签中的内容会以加粗显示
h5规范中规定，对于不需要着重的内容而是单纯的加粗或者是斜体，-->
<i>我是i标签</i>
<b>我是p标签</b>
<!-- 3.small标签:small标签中的内容会比他的父元素中的文字要小一些
在h5中使用small标签来表示一些细则一类的内容
比如：合同中小字，网站的版权声明都可以放到small -->
<p>我是p标签中的内容<small>我是small中的内容</small></p>
<!-- 4.网页中所有的加书名号的内容都可以使用cite标签，表示参考的内容，
比如：书名 歌名 话剧名 电影名 。。。 -->
<p><cite>《论语》</cite>是我最喜欢的书</p>
<!-- 5.q标签表示短引用 -->
<p>子曰：<q>学而时习之，不亦说乎</q></p>
<!-- 6. lockquote标签表示一个长引用（块级引用）-->
<div>
子曰：
<blockquote>
有兵自远方来，干就完了
</blockquote>
</div>
s
<!-- 7.使用sup标签设置一个上标 -->
<p>5<sup>2</sup></p>
<p>徐文奇<sup><a href="#">[1]</a></sup></p>
<!-- 8.使用sub标签设置一个下标 -->
<p>H<sub>2</sub>O</p>
<!-- 9.使用del标签来表示一个删除的内容
del标签中的内容，会自动添加删除线 -->
<p>
<del>18</del>
<br />
16
</p>
<!-- 10.ins表示一个插入的内容
ins中的的内容，会自动添加下划线 -->
<p>今天天气真<ins>晴朗</ins></p>
<!-- 11.需要页面中直接编写一些代码
pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格
code专门用来表示代码
我们一般结合使用pre和code来表示一段代码 -->
<pre>
<code>
public sataic void main(String args){
System.out.println("你好！");
};
</code>
</pre>15. 列表：
列表就相当于去超市购物时的那个购物清单，
在HTML也可以创建列表，在网页中一共有三种列表：
1.无序列表
2.有序列表
3.定义列表
<!--1.无序列表
使用ul标签来创建一个无序列表
使用li在ul中创建一个一个的列表项，
一个li就是一个列表项 -->
<ul type="circle">
<li>锄禾日当午</li>
<li>汗滴禾下土</li>
<li>谁知盘中餐</li>
<li>粒粒皆辛苦</li>
</ul>
<!--通过type属性可以修改无序列表的项目符号
可选值：
disc，默认值，实心的圆点 尽量不用
square，实心的方块
circle，空心的圆
注意：默认的项目符号我们一般都不使用！！
如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置
ul和li都是块元素 独占一行 -->
<!-- 2.有序列表和无序列表类似，只不过它使用ol来代替ul
有序列表使用有序的序号作为项目符号
type属性，可以指定序号的类型
可选值： 1 默认值，使用阿拉伯数字
a/A 采用小写或大写字母作为序号
i/I 采用小写或大写的罗马数字作为序号
ol也是块元素 -->
<ol type="A">
<li>锄禾日当午</li>
<li>汗滴禾下土</li>
<li>谁知盘中餐</li>
<li>粒粒皆辛苦</li>
</ol>
<!-- 3.列表之间都是可以互相嵌套，可以在无序列表中放个有序列表
也可以在有序列表中放一个无序列表-->
<p>
<ul>
<li>
人类
<ol>
<li>男人</li>
<li>女人</li>
</ol>
</li>
<li>
动物
<ol>
<li>阿狗</li>
<li>阿猫</li>
<li>狼</li>
</ol>
</li>
</ul>
</p>16.字体的样式
17. 行间距：通过line-height（行高）来设置
18.文本样式：
| text-transform | 可以用来设置文本的大小写 |
| text-decoration | 可以用来设置文本的修饰 |
| text-decoration：none | 去除超链接的下划线 |
| letter-spacing | 可以指定字符间距 |
| word-spacing | 以设置单词之间的距离 |
| text-align | 设置文本的对齐方式 |
| text-indent | 用来设置首行缩进 |
19. 边框：border
20.边距：
内边距（padding），指的是盒子的内容区与盒子边框之间的距离
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距
外边距（margin）指的是当前盒子与其他盒子之间的距离，
他不会影响可见框的大小，而是会影响到盒子的位置
21.定位：
定位（重点学习）
1.固定定位fixed：相对于浏览器窗口，也是一种绝对定位
2.绝对定位：absolute 相对于父元素或者浏览器窗口，脱离文档流
3.相对定位：relative 相对自己原来的位置，不会脱离文档流
22.文档流：页面底层的一个位置
23.浮动和媒体查询（重点）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
