文章目录
列表
list:主要用来表示多个并列关系的内容
无序列表
使用ul标签来创建一个无序列表
<ul>
<li></li>
<li></li>
<ul>
有序列表
(项目符号用的是1234):使用ol标签来创建一个有序列表
<ol>
<li></li>
<li></li>
<ol>
注意:
- 两种列表的表项都使用的是li标签
- 列表之间可以互相嵌套,可以在一个有序列表中放一个无序列表,也可以在无序列表中放一个有序列表。
- ul主要用来做导航条
- 真正这种一级二级的效果比较像下拉菜单效果
定义列表
主要用于对一些内容下定义
<dl>
<dt></dt>
<dd></dd>
</dl>
解释:
- dl:用来标识列表是定义列表
- dt:用来标识定义项
- dd:用来描述定义项
案例:
传统的导航条
案例:
<!-- #表示返回顶部/占位符(具体填写点击后跳转的链接)-->
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">我的</a></li>
<li><a href="#">联系</a></li>
</ul>
CSS(Cascading Style Sheets)层叠样式表
概述
- CSS用于设置页面中元素的样式,属于 ”结构表现行为”中的表现。
- 所谓的表就是可以给网页中的多个模块设计样式
- 用来处理页面的表现
- 网页中所有的外在显示效果都由CSS来控制
表现的编写位置:
- 第一种 内联样式:可将css代码编写到标签的style属性中,style属性写在html标签中。
将样式直接编写到style属性中这样会导致结构和表现耦合,不方便代码复用,并且不方便后期的维护,所以在开发中永远不要使用内联样式。
<p style='color: red;font-size: 30px;'>落霞与孤鹜齐飞,秋水共长天一色</p>
- 第二种 内部样式表 :可将css代码编写到一个style标签中
将样式编写在style标签中,然后通过CSS选择器选中指定的元素为其设置样式,将HTML和CSS代码分离开,使CSS样式可以复用,并且方便后期的维护。缺点(只在当前页面内有效,别的页面无效)
style标签里面采用的是css语言,而外面采用的使html
style标签写在head标签中。
<style>
p{
color: red;
font-size: 60px;
background-color: aquamarine;
}
/* 选中p元素,大括号中的样式对选中元素进行设置*/
</style>
<p>落霞与孤鹜齐飞,秋水共长天一色</p>
- 第三种 外部样式表 :可以将css代码编写到一个外部文件中,然后通过link标签引入
标签link需要写入head中。
将CSS写在外部的样式表中,使结构和表现完全分离,可以在不同的页面中对样式表进行复用,方便后期的维护。将样式表写在外部文件中,可以充分的利用到浏览器的缓存机制,进而加快页面的加载速度,提高用户体验。
rel属性:必须有的,规定当前文档与被链接文档/资源之间的关系。属性值stylesheet意思是:要导入的样式表的URL。
CSS基本语法
选择器 和 声明块
- 选择器:通过选择器可以选中页面中的指定元素
- 声明块:声明块整体由一对大括号包裹,里面由一个一个的声明组成
声明是一个一个的名值对结构,属性名和属性值用:(冒号)连接,用;(分号)结尾
声明用来为选择器所指定的元素来设置样式。
选择器
选择器名 | 格式 | 说明 | 举例 |
---|---|---|---|
元素选择器 | 标签名{} | 根据标签名来选中指定的元素 | p{} span{} div{} |
id选择器 | #id{} | 根据元素的id属性值选中一个元素 | #box #p1 |
类选择器 | .类名{} | 根据元素的class属性选中元素 | .box .p1 |
并集选择器 | 选择器1,选择器2,…选择器n | 根据元素的id属性值选中一个元素 | p1,p2…pn |
统配选择器 | *{} | 选中页面中的所有元素 | * {} |
交集选择器 | 选择器1选择器2…选择器n | 选中同时符合多个选择器的元素 | div.box{} 元素选择器+类选择器 .div{}相当于*.div{} div#box{}不建议这么创建规则 元素选择器+id选择器 |
后代元素选择器 | 祖先 后代 | 选中指定元素的后代元素 | p span{} div p {} |
子元素选择器 | 父元素 > 子元素 | 选中父元素的指定子元素 | div > p{} p > span{} |
下一个兄弟元素 | 兄 + 弟 | 选中指定的元素的兄弟元素 | 选择弟元素,且弟在兄紧挨着之后,否则什么也不选中 |
后面所有兄弟元素 | 兄 ~ 弟 | 选中指定的元素的兄弟元素 | 选择弟元素,不管弟元素是否紧挨着兄,都选中 |
注意:
- css中,逗号(,)一般都表示或者的意思
- 元素除了可以添加id属性外,还可以添加class属性
class属性
- 作用:为元素进行分类(持有相同class属性的元素属于同一类元素)
- 设置方式:与id属性基本一致,不同的是class属性可以重复使用
- class可以和id用同样的名字,但是id本身不能有重复
- id只能有一个,但是可以同时为一个元素设置多个class
元素之间的关系
元素之间的关系是为了选中元素。
元素名称 | 含义 |
---|---|
父元素 | 直接包含子元素的元素 |
子元素 | 直接被父元素包含的元素 |
祖先元素 | 直接或间接包含后代元素的元素、父元素也属于祖先元素 |
后代元素 | 直接或间接被祖先元素包含的元素、子元素也属于后代元素 |
兄弟元素 | 拥有相同父元素的元素 |
伪类选择器
- 都是以:(冒号)开头
- 伪类表示元素的一些特殊状态或位置
伪类选择器表
伪类选择器名 | 说明 | 案例 |
---|---|---|
:first-child | 第一个子元素 在所有的子元素中查找 | div p:first-child{} 找的是标签div下的所有元素,第一个元素是p标签的 选中 |
:first-of-type | 同类型的第一个子元素 | div p:first-of-type{} 要选中div下的所有p元素的第一个 |
:last-child | 最后一个子元素 在所有子元素中查找 | div p:last-child{} 要找的是标签div下所有的元素,最后一个元素是p标签的 选中 |
:last-of-type | 同类型的最后一个子元素 | div p:last-of-type{} 要选中div下的所有p元素的最后一个 |
:nth-child(n) | 第n个子元素 (在所有子元素中查找) 参数:odd(奇数)even(偶数) | p:nth-child(even) 选中同一级别的 所有元素中 偶数位置的p元素 |
:nth-of-type(n) | 同类型的第n个子元素 | p:nth-of-child(2) 选中同一级别的 p标签的第二个 |
:only-child | 唯一的子元素 匹配属于父元素中唯一子元素的元素 | p:only-child{} 选中父元素的子元素只有一个元素且为p的 |
:only-of-type | 同类型中唯一的子元素 匹配属于同类型中唯一同级元素 | p:only-of-type{} 选中父元素的子元素中p元素的个数是一个的 |
:empty | 空元素 什么都都没有才是空元素,含有空格则不为空元素 | div:empty{} 选中是空的div元素 |
:not | 除了 表示否定伪类 | p:not(.p1){} 选中所有p元素,除了设置class属性为p1元素 |
first-child:
first-of-type
nth-child(n)
nth-of-type(n)
only-child
only-of-type
empty
not
a标签—超链接的伪类
伪类名 | 说明 |
---|---|
:link | 正常的链接(带有href的a标签) 主要用来设置没有访问的链接的形式 |
:visited | 访问过的链接 由于隐私原因,visited这个伪类只能修改字体的颜色,其余样式都不能修改 |
:hover | 鼠标移入的状态 不仅仅适用于超链接、其他元素也可以.鼠标移上去改变样式 |
:active | 鼠标点击的状态 不仅仅适用于超链接、其他元素也可以使用 |
:link | |
![]() | |
:visited | |
![]() | |
:hover | |
![]() | |
:active | |
![]() |
属性选择器
属性选择器 根据元素的属性来选中元素
属性选择器名 | 说明 |
---|---|
[属性名] | 获取含有指定属性的元素 如果前面没有指定元素,则认为从全局中的所有元素查找 |
[属性名 = X] | 表示选中属性名=X的项 区分大小写 |
[属性名 = X i] | 表示选中属性名 = X的项 且忽略大小写。i表示not (意思是忽略大小写) |
[属性名 ^=X] | 表示选中属性名 且 属性值以X开头 |
[属性名 ^=X i] | 表示选中属性名 且 属性值以X开头 且忽略大小写 |
[属性名$ = X] | 表示选中属性名 且属性值以X结尾 |
[属性名$ = X i] | 表示选中属性名 且属性值以X结尾 忽略大小写 |
[属性名 *= X] | 表示选中属性名 且属性值包含X |
[属性名 *= X i] | 表示选中属性名 且属性值包含X 忽略大小写 |
[属性名] | |
![]() | |
[属性名 = 属性值] | |
![]() | |
[属性名 = 属性值 i] | |
![]() | |
[属性值 ^ = 属性值] | |
![]() | |
[属性名 ^=属性值 i] | |
![]() | |
属性名 $ =属性值,属性名 $=属性值 i | |
![]() | |
[属性名 *= 属性值] | |
![]() |
伪元素
伪元素主要表示一些特殊的元素
伪元素 | 说明 |
---|---|
::before (元素开头的位置) | 表示开始标签和文本之间的位置 使用content属性添加内容 |
::after (元素结尾的位置) | 表示文本和结束标签之间的位置 使用content属性添加内容 |
::first-letter | 选中元素的第一个字母或汉字 |
::first-line | 选中元素的第一行 |
::selection | 表示选中的内容 |
::before | |
![]() | |
::after | |
![]() | |
::first-letter | |
![]() | |
::first-line | |
![]() | |
::selection | |
![]() | |
注意: |
- 采用两个冒号和一个冒号都可以,但是在brackets软件中,两个冒号可以出现属性提示
- before和after是通过css中加的,不是html,所以在网页中不能通过鼠标将其选中
- 如果想要在元素开头或者元素结尾处添加内容,需要使用content属性在这些位置添加内容
- before和after的具体位置是:
游戏 关于选择器的
游戏链接
游戏结果