CSS基础

最新推荐文章于 2024-07-05 14:54:21 发布

EijoaHoaiQ:D

最新推荐文章于 2024-07-05 14:54:21 发布

阅读量225

点赞数 1

分类专栏：前端文章标签： css css基础

本文链接：https://blog.csdn.net/qq_50994235/article/details/119534530

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS基础

一、CSS 层级样式表

作用：

美化页面。
html 和 css 分离。

二、基本语法

选择器 {样式 : 值; 样式: 值;}

<head> 
	<style> 
		选择器{
			样式: 值;
			...
		}
	<style> 
</head>

三、位置分类

标签，行内样式表
页面样式
外部样式表，由link标签引入

四、基础选择器

id选择器，只能修饰该id的样式
- 定义id：< h1 id=”title” >内容< /h1>
- 定义样式： #title{样式}
```
<head> 
	<style> 
		#title{
			样式: 值;
			...
		}
	<style> 
</head>
<body>
	<h1 id="title">内容</h1>
</body>
```
整个html页面id是唯一的。
类选择器，所有使用了该类样式的元素
- 定义类样式： .类样式名称 {样式}
- 定义类样式：< h1 class=”类样式名称” > 内容 < /h1>
```
<head> 
	<style> 
		.title{
			样式: 值;
			...
		}
	<style> 
</head>
<body>
	<h1 class="title">内容</h1>
</body>
```

元素(标签)选择器，所有该元素(标签)

使用：标签名 { 样式}

<head> 
	<style> 
		h1{
			样式: 值;
			...
		}
	<style> 
</head>
<body>
	<h1>内容</h1>
</body>

通配符选择器：*
对页面中的所有元素都生效。

<head> 
	<style> 
		*{
			样式: 值;
			...
		}
	<style> 
</head>
<body>
	<h1>内容</h1>
	<h2>内容</h2>
	<p>内容</p>
</body>

优先级：

id选择器 > 类选择器 > 元素(标签)选择器
元素使用了多个类选择器，且多个类选择器包含相同的样式，以代码顺序最后的一个为准。

五、颜色：color

英文单词 red green blue……
十六进制，#ff0000
rgb方式，rgb(255,0 ,0)

六、文本字体

字体：font-family
粗细：font-weight
大小：font-size
风格：font-style

简写： font : (font-style font-weight font-size font-family) (至少保留font-size font-family)！

行高：line-height ，一般用于设置文本垂直居中
文本：
- 居中方式：text-align: center right left
- 文本修饰：text-decoration : none ，没有下划线
- 文本缩进：text-indent: 2em;

七、复合选择器

并集选择器

CSS并集选择器也叫群选择器，是由多个选择器通过逗号连接在一起的，这些选择器分别是：元素(标签)选择器、类选择器或id选择器等等。

<head> 
	<style> 
		.title,h2,p,div,#content{
			样式: 值;
			...
		}
	<style> 
</head>
<body>
	<h1 class="title">内容</h1>
	<h2>内容</h2>
	<p>内容</p>
	<div>内容</div>
	<span id="content">内容</span>
</body>

属性选择器

可以为拥有指定属性的 HTML元素设置样式，而不仅限于 class 和 id 属性。

选择器	描述
[attribute]	用于选取带有指定属性的元素
[attribute=value]	用于选取带有指定属性和值的元素
[attribute~=value]	用于选取属性值中包含指定词汇的元素
[attribute	=value]
[attribute^=value]	匹配属性值以指定值开头的每个元素
[attribute$=value]	匹配属性值以指定值结尾的每个元素
[attribute]*=value	匹配属性值中包含指定值的每个元素

后代选择器，选择器选择器

只对指定的后代元素起作用。

<head>
	<style>
		h1 em {
			color:red;
		}
	</style>
</head>
<body>
	<h1>This is a <em>important</em> heading</h1>
	<p>This is a <em>important</em> paragraph.</p>
</body>

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。

<head>
	<style>
		/*只对第一个h1元素下面的strong子元素起作用*/
		h1 > strong {
			color:red;
		}
	</style>
</head>
<body>
	<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
	<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>

相邻兄弟元素

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

<head>
	<style>
		/*只对第一个ul和ol元素下面的第二个和第三个子元素li起作用*/
		li + li {font-weight:bold;}
	</style>
</head>
<body>
	<div>
	  <ul>
	    <li>List item 1</li>
	    <li>List item 2</li>
	    <li>List item 3</li>
	  </ul>
	  <ol>
	    <li>List item 1</li>
	    <li>List item 2</li>
	    <li>List item 3</li>
	  </ol>
	</div>
</body>

伪类，伪元素

用于向某些选择器添加特殊的效果。

伪类
W3C：“W3C” 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性	描述	css
:active	向被激活的元素添加样式	1
:focus	向拥有键盘输入焦点的元素添加样式	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式	1
:link	向未被访问的链接添加样式	1
:visited	向已被访问的链接添加样式	1
:first-child	向元素的第一个子元素添加样式	2

伪元素
W3C：“W3C” 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性	描述	css
:first-letter	向文本的第一个字母添加特殊样式	1
:first-line	向文本的首行添加特殊样式	1
:before	在元素之前添加内容	2
:after	在元素之后添加内容	2

八、CSS注释

/* 注释 */

<! – – >是HTML的注释标签,使用 < 和 > 是符合HTML标签语法规则的。
/* /是CSS的注释标签.
/ */（注释代码块）、//（注释单行）是JS的注释标签。

/* */是CSS的注释标签

/* */（注释代码块）、//（注释单行）是JS的注释标签。

九、CSS三大特性

层叠性

口诀：长江后浪推前浪，前浪躺在沙滩上。
继承性

口诀：龙生龙，凤生凤，老鼠的儿子会打洞。
优先级
CSS权重
用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

贡献者贡献值
继承或* 0,0,0,0
每个元素（标签） 0,0,0,1
每个类，伪类 0,0,1,0
每个id 0,1,0,0
每个行内样式 1,0,0,0
每个!important ∞无穷大
比如：
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1

注意：数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不会存在10个div能赶上一个类选择器的情况。

总结优先级：
1. 使用了 !important声明的规则。
2. 内嵌在 HTML 元素的 style属性里面的声明。
3. 使用了 ID 选择器的规则。
4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
5. 使用了元素选择器的规则。
6. 只包含一个通用选择器的规则。

贡献者	贡献值
继承或*	0,0,0,0
每个元素（标签）	0,0,0,1
每个类，伪类	0,0,1,0
每个id	0,1,0,0
每个行内样式	1,0,0,0
每个!important	∞无穷大

十、标签显示模式 display

块级元素 block-level

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有< h1>~< h6>、< p>、< div>、< ul>、< ol>、< li>等，其中**< div>标签是最典型的块元素**。

块级元素的特点：
（1）总是从新行开始。
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%。
（4）可以容纳内联元素和其他块元素。
行内元素 inline-level

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有< a>、< strong>、< b>、< em>、< i>、< del>、< s>、< ins>、< u>、< span>等，其中**< span>标签是最典型的行内元素**。

行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a特殊）
注意：
1. 只有文字才能组成段落，因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，它们都是文字类块级标签，里面不能放其他块级元素。
2. 链接里面不能再放链接。
块级元素与行内元素的区别
- 块级元素的特点：
  （1）总是从新行开始。
  （2）高度，行高、外边距以及内边距都可以控制。
  （3）宽度默认是容器的100%。
  （4）可以容纳内联元素和其他块元素。
- 行内元素的特点：
  （1）和相邻行内元素在一行上。
  （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
  （3）默认宽度就是它本身内容的宽度。
  （4）行内元素只能容纳文本或则其他行内元素。
在行内元素中有几个特殊的标签——< img />、< input />、< td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素 inline-block
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制
标签显示模式转换display
1 块转行内：display:inline;
2 行内转块：display:block;
3 块、行内元素转换为行内块： display: inline-block;

十一、CSS背景 background

属性	描述
background-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
背景的复合写法	background:背景颜色背景图片地址背景平铺背景滚动背景位置

十二、盒子模型 Box Model

盒子边框： border
- 边框语法：border: border-width || border-style || border-color;
- 边框样式：border-style: none;
  没有边框 none，单实线 solid ，虚线 dashed，点线 dotted ，双实线 double。
内边距 padding
外边距 margin
盒子居中
条件1：必须是块级元素
条件2：盒子必须指定了宽度（width）
外边距合并
- 相邻块元素垂直外边距的合并
- 嵌套块元素垂直外边距的合并
宽度和高度(width + height)

盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和
注意：
1. 宽高属性仅适用于块级元素
2. 考虑上下盒子垂直外边距合并的情况
盒子模型属性使用的优先级：
width > padding > margin

十三、文档流

标准流
浮动
定位

十四、浮动：float

什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
浮动特性：
- 浮动首先创建包含块的概念（包裹）。就是说，浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围。
- 浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则浮动元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，浮动元素的顶部会和上一个元素的底部对齐。
总结：浮动
1. 加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
2. 加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏给了标准流的盒子。
3. 特别注意，这是特殊的使用，有很多的不好处，使用时需要谨慎。
清除浮动
- 解决的问题：清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。
- 清除浮动的方法
1. clear属性用于清除浮动，其基本语法格式如下：
  选择器{clear:属性值;}
2. 额外标签法
  在浮动元素末尾添加一个空的标签例如 < div style=”clear:both”>< /div>，或其他标签br等即可。
3. 父级添加overflow属性方法
  overflow为 hidden | auto | scroll 都可以实现。
4. 使用after伪元素清除浮动
  
  clearfix:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; }
  after伪元素空余字符法
  content:"\200B";这个参数，Unicode字符里有一个“零宽度空格”，即 U+200B，代替原来的“.”，可以缩减代码量。而且不再使用visibility:hidden。
  .clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
5. 使用before和after双伪元素清除浮动
  .clearfix:before,.clearfix:after{
  content:".";
  display:table;
  }
  .clearfix:after{
  clear:both;
  }

十五、页面布局

阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。

“版心”是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

布局流程
为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：
1. 确定页面的版心（可视区）。
2. 分析页面中的行模块，以及每个行模块中的列模块。
3. 制作HTML页面，CSS文件。
4. CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
常见布局1：一列固定宽度且居中

在这里插入图片描述

常见布局2：两列左窄右宽型

在这里插入图片描述

常见布局3：通栏平均分布型

在这里插入图片描述

十六、定位

定位详解
定位也是用来布局的，它有两部分组成：
定位 = 定位模式 + 边偏移

边偏移

简单说，我们定位的盒子，是通过边偏移来移动位置的。

在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）

边偏移属性	示例	描述
top	top: 80px	顶端偏移量，定义元素相对于其父元素上边线的距离。
Bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素下边线的距离。
left	left: 80px	左侧偏移量，定义元素相对于其父元素左边线的距离。
right	right: 80px	右侧偏移量，定义元素相对于其父元素右边线的距离。

定位模式 (position)

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：
选择器 { position: 属性值; }

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

值语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
静态定位(static) - 了解

静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，不要定位的时候用。
静态定位按照标准流特性摆放位置，它没有边偏移。
静态定位在布局时我们几乎不用的。
相对定位(relative) - 重要
相对定位是元素相对于它原来在标准流中的位置来说的。
- 相对定位的特点：
  相对于自己原来在标准流中位置来移动的
  原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。
绝对定位(absolute) - 重要
- 绝对定位是元素以带有定位的父级元素来移动位置
  1. 完全脱标 —— 完全不占位置；
  2. 父元素没有定位，则以浏览器为准定位（Document 文档）。
- 绝对定位的特点：
1. 绝对是以带有定位的父级元素来移动位置（拼爹型）如果父级都没有定位，则以浏览器文档为准移动位置。
2. 不保留原来的位置，完全是脱标的。
绝对定位的盒子要和父级搭配一起来使用。
定位口诀 —— 子绝父相，子元素使用绝对定位，父元素使用相对定位。
子绝父相 —— 子级是绝对定位，父级要用相对定位。

疑问：为什么在布局时，子级元素使用绝对定位时，父级元素就要用相对定位呢？

分析：
1. 方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。
2. 父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。
- 如果父级盒子也使用绝对定位，会完全脱标，那么下方的广告盒子会上移，这显然不是我们想要的。
结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。
固定定位(fixed) - 重要
- 固定定位是绝对定位的一种特殊形式
  1. 完全脱标 —— 完全不占位置；
  2. 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性来设置元素的位置；
- 固定定位的特点：
1. 跟父元素没有任何关系；单独使用的
2. 随滚动条滚动。
- 与浮动的对比：
1. 绝对定位：脱标，利用边偏移指定准确位置；
2. 浮动：脱标，不能指定准确位置，让多个块级元素在一行显示。
定位(position)的扩展

绝对定位的盒子居中
注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。
在使用绝对定位时要想实现水平居中，可以按照下图的方法：
1. left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
2. margin-left: -100px;：让盒子向左移动自身宽度的一半。
盒子居中定位示意图
堆叠顺序（z-index）
在使用定位布局时，可能会出现盒子重叠的情况。
加了定位的盒子，默认后来者居上，后面的盒子会压住前面的盒子。
应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。

z-index 的特性如下：
1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
2. 如果属性值相同，则按照书写顺序，后来居上；
3. 数字后面不能加单位。
注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
定位改变display属性
display 是显示模式，可以改变显示模式有以下方式:
- 可以用inline-block 转换为行内块
- 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
- 绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。
所以说，一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

同时注意：
绝对定位(固定定位)元素的都不会触发外边距合并的问题。
也就是说，我们给盒子改为了定位，就不会有垂直外边距合并的问题了。
定位小结
- [ ] 静态static
不脱标
- 相对定位relative
  不脱标，占有位置
  相对自身位置移动
  基本单独使用
- 绝对定位absolute
  完全脱标，不占有位置
  相对于定位父级移动位置
  要和定位父级元素搭配使用
- 固定定位fixed
  完全脱标，不占有位置
  相对于浏览器移动位置
  单独使用，不需要父级
注意：
1. 边偏移需要和定位模式联合使用，单独使用无效；
2. top 和 bottom 不要同时使用；
3. left 和 right 不要同时使用。

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

十七、网页布局总结

一个完整的网页，有标准流、浮动、定位一起完成布局的。

标准流
可以让盒子上下排列或者左右排列的
浮动
可以让多个块级元素一行显示或者左右对齐盒子浮动的盒子就是按照顺序左右排列
定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。但是每个盒子需要测量数值。

十八、元素的显示与隐藏

目的让一个元素在页面中消失或者显示出来
场景
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！
display 显示（重点）

display 设置或检索对象是否及如何显示。
display: none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思。

特点：隐藏之后，不再保留位置。

实际开发场景：
配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛
visibility 可见性 (了解)

设置或检索是否显示对象。
visibility：visible ; 　对象可视
visibility：hidden; 　对象隐藏
特点：隐藏之后，继续保留原有位置。

overflow 溢出(重点)

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

实际开发场景：

清除浮动
隐藏超出内容，隐藏掉, 不允许内容超过父盒子。

显示与隐藏总结

属性	区别	用途
display	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛
visibility	隐藏对象，保留位置	使用较少
overflow	只是隐藏超出大小的部分	1. 可以清除浮动;2. 保证盒子里面的内容不会超出该盒子范围

十九、滑动门

在这里插入图片描述

a 设置背景左侧，padding撑开合适宽度。
span设置背景右侧， padding撑开合适宽度剩下由文字继续撑开宽度。
之所以a包含span就是因为整个导航都是可以点击的。

margin负值之美
- 负边距+定位：水平垂直居中
  一个绝对定位的盒子，利用父级盒子的 50%，然后往左(上) 走自己宽度的一半，可以实现盒子水平垂直居中。
- 压住盒子相邻边框
CSS三角形之美

EijoaHoaiQ:D

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
CSS基础

CSS基础一、CSS 层级样式表作用：美化页面。html 和 css 分离。二、基本语法选择器 {样式 : 值; 样式: 值;}<head> <style> 选择器{ 样式: 值; ... } <style> </head>三、位置分类标签，行内样式表页面样式外部样式表，由link标签引入四、基础选择器id选择器，只能修饰该id的样式定义id：< h1 id=”title
复制链接

扫一扫