【前端】【CSS3】基础入门知识

**CSS1（1996年推出）：**CSS1是第一版的CSS规范，它引入了一套基本的样式属性和选择器，使得开发者可以通过样式表将样式应用于HTML文档。CSS1提供了对字体、颜色、背景、边框等基本样式的控制。它为网页布局和样式提供了一些基础，但功能相对有限。

**CSS2（1998年推出）：**CSS2是CSS的第二版规范，引入了更多的功能和选择器，增强了样式控制的能力。它引入了浮动、定位和层叠等特性，使得开发者能够更好地控制和布局网页元素。CSS2还引入了伪类和伪元素选择器，允许开发者根据元素的状态或位置选择应用样式。

**CSS3（2001年开始，持续发展）：**CSS3是CSS的下一代规范，由一系列模块组成，每个模块引入了新的特性和功能。CSS3引入了更多的选择器、盒模型属性、颜色和背景属性、文本效果、过渡和动画效果、多列布局等。它还引入了媒体查询（Media Queries），允许开发者根据设备的属性和特征应用不同的样式，从而实现响应式设计。CSS3的发展是渐进式的，新的模块和特性不断被添加和标准化。

1.三种导入方式

1.1、行内样式

html 复制代码

<div style="background: red"></div>

1.2、外部样式

（1）链接式

html 复制代码

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

（2）导入式

html 复制代码

<style>
    @import url(style.css);
</style>

1.3、嵌入方式

嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。

html 复制代码

<head>
    <style>

    .content {
        background: red;
    }

    </style>
</head>

2.选择器

元素选择器（Element Selector）： 通过元素名称选择 HTML 元素。例如，p 选择器将选择所有 <p> 元素。

类选择器（Class Selector）： 通过类别名称选择具有特定类别的 HTML 元素。类选择器以 . 开头，后面跟着类别名称。例如，.highlight 选择器将选择所有具有类别为 "highlight" 的元素。

ID 选择器（ID Selector）： 通过元素的唯一标识符（ID）选择 HTML 元素。ID 选择器以 # 开头，后面跟着 ID 名称。例如，#logo 选择器将选择具有 ID 为 "logo" 的元素。

属性选择器（Attribute Selector）： 通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。例如，input[type="text"] 选择器将选择所有 type 属性为 "text" 的 <input> 元素。

后代选择器（Descendant Selector）： 通过指定元素的后代关系选择 HTML 元素。后代选择器使用空格分隔元素名称。例如，div p 选择器将选择所有在 <div> 元素内的 <p> 元素。

子元素选择器（Child Selector）： 通过指定元素的直接子元素关系选择 HTML 元素。子元素选择器使用 > 符号分隔父元素和子元素。例如，ul > li 选择器将选择所有 <ul> 元素的直接子元素中的 <li> 元素。

相邻兄弟选择器（Adjacent Sibling Selector）： 通过指定元素之间的相邻兄弟关系选择 HTML 元素。相邻兄弟选择器使用 + 符号分隔两个相邻元素。例如，h2 + p 选择器将选择紧接在 <h2> 元素后的 <p> 元素。

通用选择器（Universal Selector）： 选择所有 HTML 元素。通用选择器使用 * 符号。例如，* 选择器将选择页面上的所有元素。

2.1、基本选择器

（1）元素选择器

h1选择器将选择所有 <h1> 元素。

（2）类选择器

.head选择器选择所有类别为 "head" 的元素。

好处：可以将多个标签归类，是同一个class的可以复用

（3）id选择器：必须唯一

如下代码，#runoob 选择器将选择具有 ID 为 "runoob" 的元素。

css 复制代码

#runoob {
  width: 200px;
}

优先级：id>class>标签

2.2层次选择器

（1）后代选择器

body p 选择器将选择所有在 <body> 元素内的 <p> 元素。

（2）子选择器

body > p 选择器将选择所有 <body> 元素的直接子元素中的 <p> 元素。

（3）相邻兄弟选择器

h2 + p 选择器将选择紧接在 <h2> 元素后的一个 <p> 元素。

（4）通用选择器

* 选择器将选择页面上的所有元素。

2.3结构伪类选择器

:first-child 所有兄弟元素中的第一个

:last-child 所有兄弟元素中的最后一个

:nat-child 所有兄弟元素中的第n个

:first-of-type 所有同类型兄弟元素中的第一个

:last-of-type 所有同类型兄弟元素中的最后一个

:nth-of-type(n) 所有同类型兄弟元素中的第 n 个

2.4属性选择器

（1）a[id]

选择含有id属性的<a>元素

（2）a[id="first"]

选择id属性值为first 的<a>属性

（3）a[id*="links"]

选中id属性值中包含"links"的<a>元素

（4）a[href^=http]

选中href属性中以http开头的<a>元素

（5）a[href$=png]

选中href属性中以png结尾的<a>元素

其他

选择器	示例	示例说明	CSS
.class	.intro	选择所有class="intro"的元素	1
#id	#firstname	选择所有id="firstname"的元素	1
*	*	选择所有元素	2
element	p	选择所有<p>元素	1
element,element	div,p	选择所有<div>元素和 <p> 元素	1
element.class	p.hometown	选择所有 class="hometown" 的 <p> 元素	1
element element	div p	选择<div>元素内的所有<p>元素	1
element>element	div>p	选择所有父级是 <div> 元素的 <p> 元素	2
element+element	div+p	选择所有紧跟在 <div> 元素之后的第一个 <p> 元素	2
[attribute]	[target]	选择所有带有target属性元素	2
[attribute=value]	[target=-blank]	选择所有使用target="-blank"的元素	2
[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的所有元素	2
[[attribute\|=language]](https://www.runoob.com/cssref/sel-attribute-value-lang.html "[attribute	=language]")	[lang\|=en]	选择 lang 属性等于 en，或者以 en- 为开头的所有元素
:link	a:link	选择所有未访问链接	1
:visited	a:visited	选择所有访问过的链接	1
:active	a:active	选择活动链接	1
:hover	a:hover	选择鼠标在链接上面时	1
:focus	input:focus	选择具有焦点的输入元素	2
:first-letter	p:first-letter	选择每一个<p>元素的第一个字母	1
:first-line	p:first-line	选择每一个<p>元素的第一行	1
:first-child	p:first-child	指定只有当<p>元素是其父级的第一个子级的样式。	2
:before	p:before	在每个<p>元素之前插入内容	2
:after	p:after	在每个<p>元素之后插入内容	2
:lang(language)	p:lang(it)	选择一个lang属性的起始值="it"的所有<p>元素	2
element1~element2	p~ul	选择p元素之后的每一个ul元素	3
[attribute^=value]	a[src^="https"]	选择每一个src属性的值以"https"开头的元素	3
[[attribute $=value\]](https://www.runoob.com/cssref/sel-attr-end.html "[attribute$ =value]")	a[src$=".pdf"]	选择每一个src属性的值以".pdf"结尾的元素	3
[attribute*=value]	a[src*="runoob"]	选择每一个src属性的值包含子字符串"runoob"的元素	3
:first-of-type	p:first-of-type	选择每个p元素是其父级的第一个p元素	3
:last-of-type	p:last-of-type	选择每个p元素是其父级的最后一个p元素	3
:only-of-type	p:only-of-type	选择每个p元素是其父级的唯一p元素	3
:only-child	p:only-child	选择每个p元素是其父级的唯一子元素	3
:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素	3
:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数	3
:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数	3
:last-child	p:last-child	选择每个p元素是其父级的最后一个子级。	3
:root	:root	选择文档的根元素	3
:empty	p:empty	选择每个没有任何子级的p元素（包括文本节点）	3
:target	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）	3
:enabled	input:enabled	选择每一个已启用的输入元素	3
:disabled	input:disabled	选择每一个禁用的输入元素	3
:checked	input:checked	选择每个选中的输入元素	3
:not(selector)	:not(p)	选择每个并非p元素的元素	3
::selection	::selection	匹配元素中被用户选中或处于高亮状态的部分	3
:out-of-range	:out-of-range	匹配值在指定区间之外的input元素	3
:in-range	:in-range	匹配值在指定区间之内的input元素	3
:read-write	:read-write	用于匹配可读及可写的元素	3
:read-only	:read-only	用于匹配设置 "readonly"（只读）属性的元素	3
:optional	:optional	用于匹配可选的输入元素	3
:required	:required	用于匹配设置了 "required" 属性的元素	3
:valid	:valid	用于匹配输入值为合法的元素	3
:invalid	:invalid	用于匹配输入值为非法的元素	3
:has	:has	允许根据其后代元素来选择一个元素。	3
:is	:is	接收任何数量的选择器作为参数，并且返回这些选择器匹配的元素的并集。	3

3.样式

3.1文字样式：

风格/粗细/大小/颜色

合并一起写：

css 复制代码

.p1{
      font: oblique 100 16px "楷体";
    }

3.2 文本样式

（1）颜色

css 复制代码

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

（2）文本缩进

css 复制代码

p {text-indent:50px;}

（3）对齐方式

css 复制代码

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

（4）删除链接的下划线

css 复制代码

a {text-decoration:none;}

（4）阴影

3.3超链接伪类

css 复制代码

a:hover{
    color:orange;
    font-size: 40px;
}
a:active{
    color:yellow;
}

3.4列表

(1)list-style：