CSS

已于 2023-12-25 15:43:30 修改
阅读量869 收藏 20
点赞数 22
文章标签： css 笔记 前端
于 2023-12-25 15:38:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31762171/article/details/135201420
版权

CSS

文章目录

一, CSS的三种定义方式

1.行内样式

每个HTML标签都有这个属性style

行内样式的语法格式：style=“key1:value1;key2:value2;…”

2.内嵌样式

	<style>
		h1 {
			border: 5px solid red;
			font-weight: 100;
			color: green;
		}
	</style>

3.外部引用

外部引入一般都会写在最前面

<link rel="stylesheet" href="css/1-css.css"/>

二，CSS选择器

1.标签选择器

作用：把页面上所有这个标签都应用这个样式。一般写通用样式就会用标签选择器。

		p {
			color: red;
		}

2.id选择器

id属性每个标签都有，这个标签理论是唯一的，样式一般都是唯一指向某个标签

一般用在这个标签有一个唯一的样式

#p5 {
			color: blueviolet;
			font-size: 2em;
		}

3.类选择器(★★★))

class可以重复

		.pp23 {
			font-weight: 900;
		}

4.父子选择器

  1. 空格隔开：只要是当前标签下面的标签就可以了

div下所有的p标签，包括子类的子类标签也可以选择

			div p {
			  background-color: yellow;
			}
  1. 小于号隔开：只能识别当前标签的子标签。

​ div的子p标签可以识别，子标签的子标签无法识别。

			div > p {
			  background-color: yellow;
			}
			...
			1 2 4变颜色
			<p>div 中的段落 1。</p>
			<p>div 中的段落 2。</p>
			<section><p>div 中的段落 3。</p></section> 非子但属后代
			<p>div 中的段落 4。</p>
  1. +隔开：相邻兄弟选择器。识别当前标签的兄弟标签。

兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

  1. ~隔开：相邻兄弟选择器。识别当前元素的后面所有的兄弟标签。
父子选择器示例示例描述
★空格隔开：div p选择
元素内的所有

元素

★>隔开：div > p选择其父元素是
元素的所有

元素

+隔开：div + p选择所有紧随
元素之后的

元素

~隔开:p ~ ul选择前面有

元素的每个

  • 元素

5.伪类选择器(★★★)

某种特定的条件下触发样式

		a:link {color:#000000;}      /* 未访问链接*/
		a:visited {color:#00FF00;}  /* 已访问链接 */
		a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
		a:active {color:#0000FF;}  /* 鼠标点击时 */
  1. :hover：这是最常见的伪类选择器之一，用于选择鼠标悬停在元素上时的状态。通过:hover选择器，我们可以在鼠标悬停在元素上时应用特定的样式，例如改变背景颜色或添加阴影效果。
  2. :active：这个伪类选择器用于选择元素被激活或点击时的状态。一般来说，当用户点击一个元素时，它会立即变为:active状态，直到用户释放鼠标按钮。通过:active选择器，我们可以为点击时的元素应用样式，例如改变文字颜色或添加动画效果。
  3. :focus：这个伪类选择器用于选择当前获得焦点的元素。当用户在一个可编辑的输入框或文本区域中输入时，该元素会获得焦点。通过:focus选择器，我们可以为获得焦点的元素应用样式，例如改变边框颜色或添加特殊效果。
  4. :first-child：这个伪类选择器用于选择父元素的第一个子元素。通过:first-child选择器，我们可以为第一个子元素应用样式，例如改变字体大小或添加特定的边距。
  5. :last-child：这个伪类选择器用于选择父元素的最后一个子元素。通过:last-child选择器，我们可以为最后一个子元素应用样式，例如改变背景颜色或添加特定的边框。
  6. :nth-child(n)：这个伪类选择器用于选择父元素的第n个子元素。通过:nth-child(n)选择器，我们可以为特定位置的子元素应用样式，例如改变文字颜色或添加动画效果。其中n可以是一个具体的数字，也可以是关键字odd（奇数）或even（偶数）。
  7. :nth-of-type(n)：这个伪类选择器用于选择父元素中特定类型的第n个子元素。通过:nth-of-type(n)选择器，我们可以为特定类型的子元素应用样式，例如改变字体大小或添加特定的边距。
  8. :not(selector)：这个伪类选择器用于选择不符合特定选择器的元素。通过:not选择器，我们可以排除某些元素，然后为其他元素应用样式，例如隐藏特定的元素或改变它们的背景颜色。

6.属性选择器

选择这个标签所有具有该属性的元素。

选择器例子例子描述
[attribute][target]选择带有 target 属性的所有元素。
★[attribute=value][target=_blank]选择带有 target=“_blank” 属性的所有元素。
★[attribute~=value][title~=flower]选择带有包含 “flower” 一词的 title 属性的所有元素。
[attribute|=value][lang|=en]选择带有以 “en” 开头的 lang 属性的所有元素。
[attribute^=value]a[href^=“https”]选择其 href 属性值以 “https” 开头的每个 元素。
[attribute$=value]a[href$=“.pdf”]选择其 href 属性值以 “.pdf” 结尾的每个 元素。
★[attribute*=value]a[href*=“w3school”]选择其 href 属性值包含子串 “w3school” 的每个 元素。

7.通用选择器(★★★)

选择页面上的所有的 HTML 元素。

  * {   
  	text-align: center;
	color: blue;
		  }

8.分组选择器(★★★)

同时改变多个标签样式

h1, h2, p {
	text-align: center;
	color: red;
	}

三. CSS样式

1.背景(background)

1.1 背景颜色(background-color)

属性指定元素的背景色。

1.opacity 属性指定元素的透明度。取值范围为 0.0 - 1.0。值越低，越透明：

div {
  background-color: green;
  opacity: 0.3;
}
1.2 背景图像(background-image)

属性指定用作元素背景的图像。

1.3 背景重复(background-repeat)

repeat(重复)

默认情况下，background-image 属性在水平和垂直方向上都重复图像。

如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;)，则背景看起来会更好：

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

image-20231225114036388

CSS background-repeat: no-repeat 还可指定只显示一次背景图像：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

background-position 属性用于指定背景图像的位置。

把背景图片放在右上角：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}
1.4 背景附着(background-attachment)

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

image-20231225115419139

指定背景图像应随页面的其余部分一起滚动：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

2.边框(border)

border 属性允许您指定元素边框的样式、宽度和颜色。

2.1 边框类型(border-style)

border-style 属性指定要显示的边框类型。

允许以下值：

  • dotted - 定义点线边框
  • dashed - 定义虚线边框
  • solid - 定义实线边框
  • double - 定义双边框
  • groove - 定义 3D 坡口边框。效果取决于 border-color 值
  • ridge - 定义 3D 脊线边框。效果取决于 border-color 值
  • inset - 定义 3D inset 边框。效果取决于 border-color 值
  • outset - 定义 3D outset 边框。效果取决于 border-color 值
  • none - 定义无边框
  • hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

		<style>
			p.dotted {border-style: dotted;}
			p.dashed {border-style: dashed;}
			p.solid {border-style: solid;}
			p.double {border-style: double;}
			p.groove {border-style: groove;}
			p.ridge {border-style: ridge;}
			p.inset {border-style: inset;}
			p.outset {border-style: outset;}
			p.none {border-style: none;}
			p.hidden {border-style: hidden;}
			p.mix {border-style: dotted dashed solid double;}
		</style>
				......

			<p class="dotted">点状边框。</p>
			<p class="dashed">虚线边框。</p>
			<p class="solid">实线边框。</p>
			<p class="double">双线边框。</p>
			<p class="groove">凹槽边框。</p>
			<p class="ridge">垄状边框。</p>
			<p class="inset">3D inset 边框。</p>
			<p class="outset">3D outset 边框。</p>
			<p class="none">无边框。</p>
			<p class="hidden">隐藏边框。</p>
			<p class="mix">混合边框。</p>

image-20231225145306398

2.2 边框宽度(border-width)

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），

也可以使用以下三个预定义值之一：thin、medium 或 thick：

<style>
    p.dotted {border-style: dotted;}
    p.dashed {border-style: dashed;}
    p.solid {border-style: solid;}
    p.double {border-style: double;}
    p.groove {border-style: groove;}
    p.ridge {border-style: ridge;}
    p.inset {border-style: inset;}
    p.outset {border-style: outset;}
    p.none {border-style: none;}
    p.hidden {border-style: hidden;}
    p.mix {border-style: dotted dashed solid double;}
</style>
			...
    <p class="dotted">点状边框。</p>
    <p class="dashed">虚线边框。</p>
    <p class="solid">实线边框。</p>
    <p class="double">双线边框。</p>
    <p class="groove">凹槽边框。</p>
    <p class="ridge">垄状边框。</p>
    <p class="inset">3D inset 边框。</p>
    <p class="outset">3D outset 边框。</p>
    <p class="none">无边框。</p>
    <p class="hidden">隐藏边框。</p>
    <p class="mix">混合边框。</p>

image-20231225145506165

2.3 边框各边

可用于指定每个边框（顶部、右侧、底部和左侧）：

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}![image-20231225151446681](https://s2.loli.net/2023/12/25/cPFX4UxhkdY7Lfs.png)

2.4 简写边框属性

border 属性是以下各个边框属性的简写属性：

  • border-width
  • border-style（必需）
  • border-color
p {
  border: 5px solid red;
}

左边框

p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

3.外边距(margin)

margin 属性用于在任何定义的边框之外，为元素周围创建空间。

内边距(padding)同理

简写属性示例工作原理
如果 margin 属性有四个值margin: 25px 50px 75px 100px;上外边距是 25px
右外边距是 50px
下外边距是 75px
左外边距是 100px
如果 margin 属性设置三个值margin: 25px 50px 75px;上外边距是 25px
右和左外边距是 50px
下外边距是 75px
如果 margin 属性设置两个值margin: 25px 50px;上和下外边距是 25px
右和左外边距是 50px
如果 margin 属性设置了一个值margin: 25px;所有四个外边距都是 25px
auto 值margin: auto;使元素在其容器中水平居中。
然后，该元素将占据指定的宽度
并且剩余空间将在左右边界之间平均分配
外边距合并

当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

image-20231225151156115

4.高度和宽度(height和width)

  • auto - 默认。浏览器计算高度和宽度。
  • length - 以 px、cm 等定义高度/宽度。
  • % - 以包含块的百分比定义高度/宽度。
  • initial - 将高度/宽度设置为默认值。
  • inherit - 从其父值继承高度/宽度。
height设置元素的高度。
max-height设置元素的最大高度。
max-width设置元素的最大宽度。
min-height设置元素的最小高度。
min-width设置元素的最小宽度。
width设置元素的宽度。

-------------- |
| max-height | 设置元素的最大高度。 |
| max-width | 设置元素的最大宽度。 |
| min-height | 设置元素的最小高度。 |
| min-width | 设置元素的最小宽度。 |
| width | 设置元素的宽度。 |

​css笔记 本文章参考于 W3C 学习

YQ_233
关注
HTML5+CSS3 精美登陆界面源码
01-19
CSS3引入了许多新功能，如选择器的扩展（如:nth-child()、:hover、:focus等），使得更精细的样式控制成为可能；多列布局（column-count, column-gap等），让创建杂志风格的布局变得轻松；以及最重要的，动画和过渡...
CSS新世界1
08-04
【CSS新世界1】这本书是关于CSS3的深入探索，主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景，强调了模块化带来的灵活性和扩展性，让读者对CSS3有一个整体的认识。接着，作者详细讲解了...
Less简介——CSS
mantou_riji的博客
04-18 3620
文章目录CSS的高级功能定义变量可以直接传计算式子问题：这些属性比较新，很多浏览器不支持less简介less基础语法嵌套结构注释变量可以通过`$属性名`，直接对属性值进行引用父元素扩展extend第二种扩展：混合函数混合函数函数 CSS的高级功能 定义变量 css也可以进行变量的定义 可以在html中定义全局变量，之后想要修改的时候直接修改全局变量即可。 变量定义格式： --变量名:变量值; 变量的使用格式： var(--变量名) eg： <!DOCTYPE html> <html l
CSS详解
亦翼的博客
07-11 2577
文章目录概念CSS与HTML的结合方式方式一：内联/行内样式方式二：内部样式表方式三：外部样式表CSS的使用CSS选择器元素（标签）选择器类选择器 & id选择器选择器组派生选择器CSS伪类CSS基本属性文本属性背景属性列表属性边框属性轮廓属性盒子模型CSS定位默认定位浮动定位相对定位绝对定位固定定位Z-indexCSS3圆角盒子阴影渐变线性渐变径向渐变背景背景位置背景裁切背景大小过渡 & 动画过渡动画 概念 CSS 即层叠样式表 Cascading Style Sheets 通过CSS可
CSS MASK
weixin_41897680的博客
01-26 8430
CSS MASK的简单学习
为什么我的 CSS 样式没有应用到元素上？
官方推荐
09-22 1万+
为什么我的 CSS 样式没有应用到元素上？
PostCss
xun__xing的博客
08-29 2971
PostCss一、PostCss1.什么是PostCss2.安装3.配置文件4.插件5.postcss-preset-env1.自动的厂商前缀2.未来的CSS语法3.变量4.自定义选择器5.嵌套6.postcss-apply7.postcss-color-function8.[扩展]postcss-import9.stylelint 一、PostCss 本节课的内容和webpack无关！！！ 1.什么是PostCss 学习到现在，可以看出，CSS工程化面临着诸多问题，而解决这些问题的方案多种多样。 如果
CSS居中方式总结
热门推荐
qq_54334713的博客
03-24 2万+
行内元素 1.和其他元素都在同一行 2.高，行高及外边距和内边距部分可以改变 3.宽度只与内容有关 4.行内元素只能容纳文本或者其他行内元素 5.a,img,input,lable,select,sapn,textarea,font 块级元素 1.总是在新行上开始，占据一整行 2.高度，行高以及外边距和内边距都课控制 3.宽度始终与浏览器的宽度一样，与内容无关 4.可以容纳行内元素和其他块级元素 5.div,p,table,form,h1,h2,h3,dl,ol,ul,li 居中方式分为三种： .
CSS笔记
qq_43008103的博客
02-04 2797
pink老师前端入门笔记CSS篇
css分散对齐
qq_44766377的博客
05-20 2352
在开发过程中一般会遇到表单之类的东西 但是表单的提示文字一般要对齐 （如下图） 使用text-align-last:justify; width: 200px; border: 1px solid red; text-align-last: justify;
CSS定位
weixin_61789925的博客
10-16 4523
定位，即position，css的基本属性之一，分为相对定位relative，绝对定位absolute，固定定位fixed以及粘性定位sticky，现在来一一介绍。
CSS长度单位
越努力，越幸运！
02-02 2473
前言 说到css的单位，大家应该首先想到的是像素单位px，我们在网页布局中一般都是用px，但是近年来自适应网页布局越来越多，em和百分比也经常用到了。然后随着手机的流行，web app和hybrid app的开发，都用到了css3技术，在css3中，新增了许多单位，rem、vw和vh、vmin和vmax、ch和ex等等，那现在对这些单位分别做一下详细的介绍吧。 一、CSS单位 CSS 有几个不同的单位用于表示长度，一些设置 CSS 长度的属性有 width，margin，padding，font-si
css3.0参考手册 css3.0参考手册
06-16
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
postcss-css-variables:PostCSS插件将CSS自定义属性（CSS变量）语法转换为静态表示形式
05-01
PostCSS CSS变量 插件可将语法转换为静态表示形式。 该插件提供了使用大多数CSS变量功能（包括选择器级联和一些警告）的一种面向未来的方式，因为它只能看到CSS，而不能看到应用CSS的潜在动态HTML和DOM。 安装 npm ...
CSS画出三角形的做法
mingangel的博客
10-01 458
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS-Day3
m0_74039531的博客
09-29 422
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
CSS 盒子属性
m0_74012211的博客
10-02 493
CSS 盒子属性
CSS——文字打字机效果
最新发布
懒羊羊大王的博客
10-06 1110
本文通过纯 CSS 实现文字的打字机效果，然后借助 JS 实现了扩展。基本思路：使用伪元素覆盖原文字，并且使用伪元素模拟闪烁的光标效果。
css
05-29
CSS（层叠样式表）是一种用于描述网页中内容展示样式的计算机语言。它可以用来控制网页中各个元素的位置、大小、颜色、字体等方面的样式。通过 CSS，我们可以实现网页的美化和布局。CSS 的基本语法包括选择器、属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值