P3-无序列表-有序列表-表现编写位置-选择器-声明块-伪类选择器-a标签的伪类选择器-属性选择器-伪元素

原创已于 2022-09-08 21:26:27 修改 · 802 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

于 2022-03-18 11:09:43 首次发布

前端学习专栏收录该内容

10 篇文章

订阅专栏

文章目录

列表

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
empty
not
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

注意：