【css】层叠样式表基础

崽崽攻城狮

已于 2022-09-19 14:49:28 修改

阅读量187

点赞数

分类专栏： css frontend 文章标签： css 学习 html

于 2022-05-11 00:28:48 首次发布

本文链接：https://blog.csdn.net/qq_45222331/article/details/124700695

版权

frontend 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

css 语法

1. css实例

h1 {color: skyblue;}
h1 是选择器
{} 中声明选择器的属性和值
color 是属性
skyblue 是值

2. css注释

注释后的代码，浏览器会忽略这个样式。

	h1 {
		/*  color: skyblue; */
	}

3. css Id 和 Class 选择器

id 选择器只能在同一个page中出现一次，并且在css中使用要在前面添加”#“。
class 选择器在同一个页面中可以出现多次，并且在css中使用要在前面加上”.“
注意：Id 和 class 不要使用数字为第一个字符。Mozilla或Firefox中不起作用。

4. css创建

css样式表有三类。1.外部样式表 2.内部样式表 3.内联样式表.

html中，外部样式表可以通过 link标签引入。

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

html中，内部样式表是书写在

	<head>
	<style>
	hr {color:sienna;}
	p {margin-left:20px;}
	body {background-image:url("images/back40.gif");}
	</style>
	</head>

html中，内联样式表则是与dom元素混合在一起的，如下

	<p style="color:sienna;margin-left:20px">这是一个段落。</p>

若内联样式和外联样式想要修改内联样式需要在属性值后书写"!important".

还有多重样式的情况，同一个dom分别在内联样式，内部样式，外联样式中同时定义了相同属性的值。（任意两个样式表重复出现即为多重样式）。

多重样式的优先级
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

5. CSS 背景

用于定义dom元素背景。

1. background-color	属性定义了元素的背景颜色.
	十六进制 - 如："#ff0000"
	RGB - 如："rgb(255,0,0)"
	颜色名称 - 如："red"
2. background-image	属性描述了元素的背景图像. 
	默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
3. background-repeat 图片平铺 布满dom
	repeat-x  沿x轴平铺（横向）
	repeat-y	沿y轴平铺（纵向）
	no-repeat 不平铺
4. background-attachment  设置背景图是随dom翻滚还是固定不动
	scroll 跟随滚动
	fixed  不滚动
5. background-position  属性改变图像在背景中的位置
6. background-size	设置背景图片尺寸

简写方式(注意顺序)
background: background-color background-image background-repeat background-attachment background-position;

6. CSS 文本格式

1. color				设置文本颜色
	十六进制值 - 如: ＃FF0000
	一个RGB值 - 如: RGB(255,0,0)
	颜色的名称 - 如: red
2. direction			设置文本方向
	ltr	默认。文本方向从左到右。
	rtl	文本方向从右到左。
	inherit	规定应该从父元素继承 direction 属性的值。
3. letter-spacing		设置字符间距
4. line-height			设置行高
5. text-align			对齐元素中的文本
	center - 居中对齐
	right - 右对齐
	left - 左对齐
	justify - 左右对齐
6. text-decoration		向文本添加修饰(文本横线设置)
	none - 不设置任何线
	overline - 文字顶部线
	line-through - 穿过文字的线
	underline - 下划线
7. text-indent			缩进元素中文本的首行
	中文通常 - 2em 
	英文通常 - 使用px缩进
8. text-shadow			设置文本阴影
 	h-shadow	必需。水平阴影的位置。允许负值。
	v-shadow	必需。垂直阴影的位置。允许负值。
	blur	可选。模糊的距离。
	color	可选。阴影的颜色。
9. text-transform		控制元素中的字母
	uppercase - 文本大写
	lowercase - 文本小写
	capitalize - 单词首字母大写
10. unicode-bidi		设置或返回文本是否被重写
	要与direction属性一起使用，值为rtl
	normal	默认。不使用附加的嵌入层面。
	embed	创建一个附加的嵌入层面。
	bidi-override	创建一个附加的嵌入层面。重新排序取决于 direction 属性。
	initial	设置该属性为它的默认值。
	inherit	从父元素继承该属性。
	例子：
	direction:rtl;
    unicode-bidi:bidi-override;
    后文本从右往左读。
11. vertical-align		设置元素的垂直对齐
12. white-space			设置元素中空白的处理方式
	normal	默认。空白会被浏览器忽略。
	pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
	nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
	pre-wrap	保留空白符序列，但是正常地进行换行。
	pre-line	合并空白符序列，但是保留换行符。
	inherit	规定应该从父元素继承 white-space 属性的值。
	word-spacing		设置字间距

7. CSS 字体

1. font	在一个声明中设置所有的字体属性
2. font-family	指定文本的字体系列
 	font-family:"Times New Roman",Georgia,Serif;
3. font-size	指定文本的字体大小
4. font-style	指定文本的字体样式
	normal	默认值。浏览器显示一个标准的字体样式。
	italic	浏览器会显示一个斜体的字体样式。
	oblique	浏览器会显示一个倾斜的字体样式。
	inherit	规定应该从父元素继承字体样式。
5. font-variant	以小型大写字体或者正常字体显示文本。
 	normal	默认值。浏览器会显示一个标准的字体。
	small-caps	浏览器会显示小型大写字母的字体。
	inherit	规定应该从父元素继承 font-variant 属性的值。
	[效果传送门](https://www.runoob.com/try/try.php?filename=trycss_font-variant)

6. font-weight	指定字体的粗细。

8. CSS 链接

这四个链接状态是：
	a:link - 正常，未访问过的链接
	a:visited - 用户已访问过的链接
	a:hover - 当用户鼠标放在链接上时
	a:active - 链接被点击的那一刻
顺序规则：
	a:hover 必须跟在 a:link 和 a:visited后面
	a:active 必须跟在 a:hover后面

9. CSS 列表

无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 ol - 列表项的标记有数字或字母

list-style			简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图像设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type		设置列表项标志的类型。

无序列表
	list-style-type: circle/square; 设置圆点/方框
有序列表
	list-style-type: upper-roman/lower-alpha; 设置罗马数字/英文字母

10. CSS 表格

 table 父元素 表格
 tr	   行
 th	   表头
 td	   单元格
	border-collapse:collapse; // 可以去除各个边框间的缝隙

11. CSS 盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距) - 清除边框外的区域，外边距是透明的。
	margin:topLfet topRight bottomRight bottomLeft;
	margin-top, margin-right, margin-bottom, margin-left
Border(边框) - 围绕在内边距和内容外的边框。
	Border: 线宽 线类型 颜色;
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
	padding:topLfet topRight bottomRight bottomLeft;
	padding-left, padding-top, padding-right, padding-bottom
Content(内容) - 盒子的内容，显示文本和图像。

12. CSS 边框

1. border-style: none/dotted/dashed/solid/double/groove/ridge/inset/outset
	none: 默认无边框
	dotted: 定义一个点线边框
	dashed: 定义一个虚线边框
	solid: 定义实线边框
	double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
	groove: 定义3D沟槽边框。效果取决于边框的颜色值
	ridge: 定义3D脊边框。效果取决于边框的颜色值
	inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
	outset: 定义一个3D突出边框。 效果取决于边框的颜色值
	[效果传送门](https://www.runoob.com/css/css-border.html)
	- 边框-单独设置各边
	- border-top-style:dotted;
	- border-right-style:solid;
	- border-bottom-style:dotted;
	- border-left-style:solid;
	border-style的简写
		4个值: 上右下左
		3个值： 上左右下
		2个值： 上下，左右
2. border-width 边框宽度
	- 边框-单独设置各边
	- border-top-width
 	- border-right-width
 	- border-bottom-width
 	- border-left-width
3. border-color 边框颜色
 	- border-top-color
 	- border-right-color
 	- border-bottom-color
 	- border-left-color
4. border-radius	设置圆角的边框。
边框-简写属性
	border: border-width border-style (required) border-color;

13. CSS 轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

outline	在一个声明中设置所有的轮廓属性	
	outline-color
	outline-style
	outline-width
	inherit	
outline-color	设置轮廓的颜色	
	color-name
	hex-number
	rgb-number
	invert
	inherit	
outline-style	设置轮廓的样式
	none
	dotted
	dashed
	solid
	double
	groove
	ridge
	inset
	outset
	inherit	
outline-width	设置轮廓的宽度	
	thin
	medium
	thick
	length
	inherit

14. CSS margin(外边距)

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

 margin: auto/length/%;
 	auto	设置浏览器边距。
	length	定义一个固定的margin（使用像素，pt，em等）
	%	定义一个使用百分比的边距
 单边外边距属性
 	margin-top		设置元素的上外边距。
	margin-bottom	设置元素的下外边距。
	margin-right	设置元素的右外边距。
	margin-left 	设置元素的左外边距。
 margin简写
 	4个值: 上右下左
	3个值： 上左右下
	2个值： 上下，左右

15. CSS padding（填充）

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。

padding: length/%;
	length	定义一个固定的填充(像素, pt, em,等)
	%	使用百分比值定义一个填充
 单边外边距属性
 	padding-top		设置元素的顶部填充
	padding-bottom	设置元素的底部填充
	padding-right	设置元素的右部填充
	padding-left 	设置元素的左部填充
 padding简写
 	4个值: 上右下左
	3个值： 上左右下
	2个值： 上下，左右

16. CSS 分组和嵌套选择器

分组选择器
在样式表中有很多具有相同样式的元素

h1,h2,p
{
    color:green;
}

嵌套选择器
它可能适用于选择器内部的选择器的样式。
在下面的例子设置了四个样式：

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

17. CSS 尺寸 (Dimension)

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

18. CSS Display(显示) 与 Visibility（可见性）

隐藏元素
- display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
- visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

Display - 块和内联元素
	block：块元素是一个元素，占用了全部宽度，在前后都是换行符。
	inline：内联元素只需要必要的宽度，不强制换行。

19. CSS Position(定位)

position 属性的五个值：
	static		默认，即没有定位，遵循正常的文档流对象
	relative	相对定位元素的定位是相对其正常位置。
	absolute	绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
	fixed		元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
	sticky		基于用户的滚动位置来定位。 粘性定位的元素是依赖于用户的滚动。
	sticky详细说明
		它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
		元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
		这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
		注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix

20 . CSS 布局 - Overflow

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

overflow-x 设置x轴滚动 scroll
overflow-y 设置y轴滚动 scroll

21. CSS Float(浮动)

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。

float: left/right/none/inherit; 指定一个盒子（元素）是否可以浮动。
clear:left/right/both/none/inherit; 指定不允许元素周围有浮动元素。

22. CSS 布局 - 水平 & 垂直对齐

1. 元素居中对齐
 	margin: auto;
2. 文本居中对齐
 	text-align: center;
3. 图片居中对齐
	 margin: auto;
4. 左右对齐 - 使用定位方式
	 position: absolute;
	 left:0;/right:0;
5. 左右对齐 - 使用 float 方式
 	float: left;/ float: right;
6. 垂直居中对齐 - 使用 padding
	padding: 上下高度一致即可 0;
   如果要水平和垂直都居中，可以使用 padding 和 text-align: center:
7. 垂直居中 - 使用 line-height
 	height 等于 line-height
8. 垂直居中 - 使用 position 和 transform
	margin: 0;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

23. CSS 组合选择符

CSS组合选择符包括各种简单选择符的组合方式。
在 CSS3 中包含了四种组合方式:

1. 后代选择器(以空格     分隔)
 	后代选择器用于选取某元素的子元素。
2. 子元素选择器(以大于 > 号分隔）
 	与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。
3. 相邻兄弟选择器（以加号 + 分隔）
 	相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素
4. 后续兄弟选择器（以波浪号 ～ 分隔）
	后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

24. CSS 伪类(Pseudo-classes)

:checked				input:checked			选择所有选中的表单元素
:disabled				input:disabled			选择所有禁用的表单元素
:empty					p:empty					选择所有没有子元素的p元素
:enabled				input:enabled			选择所有启用的表单元素
:first-of-type			p:first-of-type			选择的每个 p 元素是其父元素的第一个 p 元素
:in-range				input:in-range			选择元素指定范围内的值
:invalid				input:invalid			选择所有无效的元素
:last-child				p:last-child			选择所有p元素的最后一个子元素
:last-of-type			p:last-of-type			选择每个p元素是其母元素的最后一个p元素
:not(selector)			:not(p)					选择所有p以外的元素
:nth-child(n)			p:nth-child(2)			选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)		p:nth-last-child(2)		选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)			p:nth-of-type(2)		选择所有p元素第二个为p的子元素
:only-of-type			p:only-of-type			选择所有仅有一个子元素为p的元素
:only-child				p:only-child			选择所有仅有一个子元素的p元素
:optional				input:optional			选择没有"required"的元素属性
:out-of-range			input:out-of-range		选择指定范围以外的值的元素属性
:read-only				input:read-only			选择只读属性的元素属性
:read-write				input:read-write		选择没有只读属性的元素属性
:required				input:required			选择有"required"属性指定的元素属性
:root					root					选择文档的根元素
:target					#news:target			选择当前活动#news元素(点击URL包含锚的名字)
:valid					input:valid				选择所有有效值的属性
:link					a:link					选择所有未访问链接
:visited				a:visited				选择所有访问过的链接
:active					a:active				选择正在活动链接
:hover					a:hover					把鼠标放在链接上的状态
:focus					input:focus				选择元素输入后具有焦点
:first-letter			p:first-letter			选择每个<p> 元素的第一个字母
:first-line				p:first-line			选择每个<p> 元素的第一行
:first-child			p:first-child			选择器匹配属于任意元素的第一个子元素的 <p> 元素
:before					p:before				在每个<p>元素之前插入内容
:after					p:after					在每个<p>元素之后插入内容
:lang(language)			p:lang(it)				为<p>元素的lang属性选择一个开始值（只是插入了对应css文本啊？）

本文学习基于菜鸟教程css 传送门

css参考手册属性传送门

前端MDN 传送门

崽崽攻城狮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【css】层叠样式表基础

css 语法1. css实例h1 {color: skyblue;}h1 是选择器{} 中声明选择器的属性和值color 是属性skyblue 是值2. css注释注释后的代码，浏览器会忽略这个样式。 h1 { /* color: skyblue; */ }3. css Id 和 Class 选择器id 选择器只能在同一个page中出现一次，并且在css中使用要在前面添加”#“。class 选择器在同一个页面中可以出现多次，并且在css中使用要在前面加上”.“注意
复制链接

扫一扫