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

发布于：2025-02-10 ⋅ 阅读:(48) ⋅ 点赞:(0)

目录

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;
}

 ​

3.6渐变

 background-image: linear-gradient(to right, red , yellow);

​

4.盒子模型 

4.1什么是盒子模型

所有HTML元素可以看作盒子

在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

​

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

4.2边框 

 （1)边框样式

border-style属性可以有1-4个值：

  • border-style:dotted solid double dashed;（上、右、底、左）
  • border-style:dotted solid double;（上、左右、底）
  • border-style:dotted solid;（上底、左右）
  • border-style:dotted;（四面边）

（2)圆角边框

（3）阴影

box-shadow: 10px 10px 5px #888888;

 4.3边距

margin

元素与元素之间的间隙就是外边距，外边距可以让元素产生间隙，外边距不会影响元素的大小，也不会撑开元素。

padding

内边距是元素内容与元素边框之间的边距，会撑开元素的大小，但不会影响元素内容的大小。

5、区块

块级元素

独占一行，可以容纳内联元素，也可以嵌套其他块元素

h1~h6         p         div          列表

内联元素

不独占一行

apan      a       img       strong

display 属性 

属性值共计有18种，按照类别可以分为以下六类：

外部表现类（display-outside）：block、inline。
内部表现类（display-inside）：flex、grid、table、flow、flow-root、ruby。
列表元素类（display-listitem）：list-item。
内部结构类（display-internal）：table-row、table-cell、table-column、table-caption、table-row-group、table-header-group、table-footer-group、table-column-group、ruby-base、ruby-text、ruby-base-container、ruby-text-container。
元素显示类（display-box）：none、contents。
预组合类（display-legacy）：inline-block、inline-table、inline-flex、inline-grid。

block: 

该属性值用于设置元素的外显类型为块级元素，占据一整行的空间，在元素前后进行换行。

inline:

设置元素的外显类型为行内元素，在页面布局中，可与其他行内元素位于同一行

inline-block ：

结合了inline与block的一些特点，设置元素为不独占一行的块级元素。

none： 

float属性 

当一个元素被设置为浮动时，它会脱离正常的文档流，向指定方向移动，其他非浮动元素会围绕它排列。浮动元素的宽度需要明确指定，否则它将根据内容自动调整。

父级边框塌陷的问题 

清除浮动的技巧：
为父容器添加一个伪元素，自动清除浮动。
这种方法无需在 HTML 中添加额外的清除元素，更加简洁和语义化

 

6、定位 

6.1相对定位

相对于原来的位置进行偏移

top:-20px = bottom:20px;

left:20px=right:-20px;

6.2绝对定位

先设置父标签为非static定位，然后设置元素的position属性为absolute，最后再设置偏移量

注意：

一般来说都会将父标签设置为非static定位
如果父标签不是非static定位，则会相对于浏览器窗口进行定位
设置元素为绝对定位后，元素会浮到页面上方

6.3固定定位

先设置元素的position属性为fixed，然后再设置偏移量

设置元素为固定定位后，元素会浮动在面面上方

6.5.堆叠顺序

设置元素定位方式后，元素会浮在页面上方，此时可以通过z-index属性设置优先级，控制元素的堆叠顺序

取值为数字，值越大优先级越高，默认为auto(大多数浏览器默认为0)

7.CSS3 动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。

用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。

例：当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>动画</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-moz-animation:myfirst 5s; /* Firefox */
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
	-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-moz-keyframes myfirst /* Firefox */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}
</style>
</head>
<body>

<div></div>

<p><b>注释：</b>当动画完成时，会变回初始的样式。</p>


<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

</body>
</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布