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

1.三种导入方式

2.选择器

2.1、基本选择器

2.2层次选择器

2.3结构伪类选择器

2.4属性选择器

其他选择器

3.美化网页

3.1文字

3.2 文本

3.3超链接伪类

3.4列表

3.5背景

3.6渐变

4.盒子模型

5、区块

6、定位

7.CSS3 动画

什么是CSS

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

发展史

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

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

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

1.三种导入方式

1.1、行内样式

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

1.2、外部样式

（1）链接式

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

（2）导入式

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

1.3、嵌入方式

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

 <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" 的元素。

 #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]	[lang\|=en]	选择 lang 属性等于 en，或者以 en- 为开头的所有元素	2
: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]	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文字

风格/粗细/大小/颜色

合并一起写：

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

3.2 文本

（1）颜色

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

（2）文本缩进

 p {text-indent:50px;}复制

（3）对齐方式

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

（4）删除链接的下划线

 a {text-decoration:none;}复制

（4）阴影

3.3超链接伪类

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

3.4列表

(1)list-style：

3.5背景

Property	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

 body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}复制

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

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

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

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

	body
	{
	background-image:url('img_tree.png');
	background-repeat:no-repeat;
	background-position:right top;
	}

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

什么是CSS

发展史

1.三种导入方式

1.1、行内样式

1.2、外部样式

1.3、嵌入方式

2.选择器

2.1、基本选择器

（1）元素选择器

（2）类选择器

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

2.2层次选择器

（1）后代选择器

（2）子选择器

（3）相邻兄弟选择器

（4）通用选择器

2.3结构伪类选择器

2.4属性选择器

其他选择器

3.美化网页

3.1文字

3.2 文本

（1）颜色

（2）文本缩进

（3）对齐方式

（4）删除链接的下划线

（4）阴影

3.3超链接伪类

3.4列表

3.5背景

微信扫一扫：分享