前端学习笔记2：CSS

CSS学习笔记

整理自b站课程《前端实战训练：2个网站+1个APP》

CSS简介

CSS（Cascading Style Sheets）层叠样式表，⼜叫级联样式表，简称样式表 使⽤css的⽬的就是让网页具有

• 美观⼀致的页面 CSS和HTML之间的关系
• HTML用于构建网页的结构
• CSS用于构建HTML元素的样式
• HTML是页面的内容组成，CSS是页面的表现

CSS语法

1.主要组成部分：选择器+一条或者多条声明（样式）

2.css引入方式：

内联样式

<p style="font-size: 20px; color: red;">这是⼀条⾏内样式</p>

内部样式

<style>
     h1{
   		  color: red;
     }
</style>

外部样式（推荐）

<link rel="stylesheet" href="style.css">

CSS常用属性

1.背景属性

属性	描述
background-color	设置背景颜色
background-image	设置背景图片
background-repeat	设置背景图片如何填充，必须先指定background-image
background-size	设置背景图片大小，必须先指定background-image
background-position	该属性设置背景图像的起始位置
background	复合属性

background-color属性

<!-- HTML部分 -->
<div class="box"></div>
/* CSS部分 */
.box{
     width: 300px;
     height: 300px;
     background-color: palevioletred;
}

【注】颜色值

• 单词:red、green
• 十六进制: #000000、#ffffff
• 颜色通道:rgb(255,255,255)、rgba(255,255,255,0.5)

background-image属性

<!-- HTML部分 -->
<div class="box"></div>
/* CSS部分 */
.box{
     width: 600px;
     height: 600px;
     background-image: url("images/img1.jpg");
}

background-repeat属性

值	描述
repeat-x	水平方向平铺
repeat-y	垂直方向平铺
no-repeat	不平铺

.box{
     width: 600px;
     height: 600px;
     background-image: url("images/img1.jpg");
     background-repeat: no-repeat;
}

background-size属性

值	描述
percentage	百分比
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

.box{
     width: 600px;
     height: 600px;
     background-image: url("images/img1.jpg");
     background-repeat: no-repeat;
     background-size: 100% 100%;
}

background-position属性

值	描述
left top	左上角为基准
left center	左 中
left bottom	左 下
right top	右 上
right center	右 中
right bottom	右 下
centertop	中 上
center center	中 中
center bottom	中 下
x% x%	百分比

.box{
     width: 600px;
     height: 600px;
     background-image: url("images/img1.jpg");
     background-repeat: no-repeat;
     background-position: center;
}

background复合属性

background-image、background-repeat、background-position 其中background-size单独书写

2.字体属性

属性	描述
color	规定文本的颜色
font-size	设置文本的大小
font-weight	设置文本的粗细。可以数值定义100~900 或者bold定义粗体
font-family	指定一个元素的字体

3.文本属性

属性	描述
text-align	指定元素文本的水平对齐方式 left 左对齐； right 右对齐； center 居中
text-decoration	规定添加到文本的修饰，如上/下划线、删除线等 underline 下划线；overline 上划线； line-through删除线

4.列表属性

属性	描述
list-style-type	设置列表项标记的类型 none 无标记；disc默认，实心圆；circle空心圆；square实心方块

CSS常用选择器

1.全局选择器

*{
     margin: 0;
     padding: 0;
}

2.元素选择器

• 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。
• ⽆论这个标签藏的多深，⼀定能够被选择上。

p{
 	font-size:222px;
}

3.类选择器

用【圆点+class】的方式定义

<!-- HTML部分 -->
<h2 class="oneclass">你好</h2>
/* CSS部分 */
.oneclass{
	 width:800px;
}

注：

• 类选择器可以被多种标签使
• 类名不能以数字开头
• 同⼀个标签可以使用多个类选择器,用空格隔开。

<p class="classone classtwo">test</p>

4.ID选择器

针对某⼀个特定的标签来使用，只能使用⼀次。css中的ID选择器以#来定义。

<!-- HTML部分 -->
<h2 id="mytitle">你好</h2>
/* CSS部分 */
#mytitle{
	 color:red;
}

5.关系选择器

• 后代选择器

E F{ }选择所有被E元素包含的F元素，中间用空格隔开.

<!-- HTML部分 -->
<ul>
     <li>宝⻢</li>
     <li>奔驰</li>
</ul>

<ol>
 	<li>奥迪</li>
</ol>
/* CSS部分 */
ul li{
	color:green;
}

• 子代选择器

E>F{}选择所有作为E元素的直接子元素F，对更深⼀层的元素不起作用，用>表示

<!-- HTML部分 -->
<div> 
     <a href="#">⼦元素1</a>
     <p> <a href="#">孙元素</a> </p>
     <a href="#">⼦元素2</a>
</div>
/* CSS部分 */
div>a{
	color:red
}

6.合并选择器

语法：选择器1,选择器2,…{ }。可以减少重复代码。

.header,.footer{
	 height:300px;
}

【注】选择器优先级

• css中⽤四位数字表示权重,
• 元素选择器的权重为0001
• class选择器的权重为0010
• d选择器的权重为0100

内联样式的权重为1000

优先级从高到低：行内样式>ID选择器>类选择器>元素选择器

CSS盒子模型

CSS盒模型本质上是⼀个盒⼦，封装周围的HTML元素，它包括：边距（margin），边框（border），填充 （padding），和实际内容（content）。

标准盒子模型：

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

内容区域（Content）
Content内容区域包含宽度（width）和高度（height）两个属性。
块级元素默认宽度为100%，行内元素默认宽度是由内容撑开，不管块级元素还是行内元素，默认高度都是由内容撑开。

内边距（padding）

div{ 
	padding-top:25px; 
    padding-bottom:25px; 
    padding-right:50px; 
    padding-left:50px; 
} 

缩写：

padding:25px 50px 75px 100px; 

依次对应上、右、下、左
【注】padding会撑⼤容器

边框（Border）

div{ 
	border: 1px solid #f1f1f1; 
} 

其中 solid: 定义实线边框

外边距（margin）

div{ 
	margin-top:100px; 
	margin-bottom:100px; 
	margin-right:50px; 
	margin-left:50px; 
}

缩写：

margin:25px 50px 75px 100px;

依次对应上、右、下、左

取值：
1.Auto ；
2.定义⼀个固定的margin ；
3.定义⼀个使⽤百分比的边距。

弹性盒子模型

CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

父元素上的属性
1.display属性
display:flex;开启弹性盒,属性设置后子元素默认水平排列

2.flex-direction属性
flex-direction 属性指定了弹性子元素在父容器中的位置。
取值：
(1) row：横向从左到右排列（左对齐），默认的排列方式。
(2) column：纵向排列。

3.justify-content 属性
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线常用的值就是：center

4.align-items 属性
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
常⽤的值就是：center

子元素上的属性
Flex
根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间(权重)

浮动与定位

浮动
浮动可以让元素脱离⽂档流，向左或向右摆放。其中left：元素向左移动，right：元素向有浮动。
浮动的特性：
1.可以设置大小
2.可以产生压盖现象
3. 浮动的元素互相贴靠，无空隙

清除浮动
当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动，他会影响到后面的元素的位置，所以为了不影响，我们可以清除浮动

.parent{ 
	clear: both; 
	overflow: hidden; 
} 

定位
position 属性指定了元素的定位类型。

值	描述
relative	相对定位
absolute	绝对定位
fixed	固定定位

【注】其中，绝对定位和固定定位会脱离文档流 。
设置定位之后：可以使用四个方向值进行调整位置：left、top、right、bottom
注意：设置定位之后，他是相对于具有具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档为止。

Z-index
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
display
display可以修改元素的类型，让块级元素和内联元素相互转换。

值	描述
block	元素显示为块级元素
inline	元素显示为内联元素
inline-block	元素显示为⾏内块级元素

CSS的媒体查询

设置meta标签
大多数移动浏览器将HTML页⾯放大为宽的视图（viewport）以符合屏幕分辨率。你可以使⽤视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加⼊这个meta标签。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

参数解释:

参数	说明
width = device-width	宽度等于当前设备的宽度
initial-scale	初始的缩放比例（默认设置为1.0）
maximum-scale	允许用户缩放到的最大比例（默认设置为1.0）
user-scalable	用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小

通过媒介查询来设置Media Queries
Media Queries 是响应式设计的核心。
Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。

@media screen and (max-width: 768px) { 
	body{ 
		background-color: red; 
	} 
} 
@media screen and (max-width: 992px) and (min-width: 768px) { 
	body{ 
		background-color: pink; 
	} 
}

@media screen and (min-width: 992px){ 
	body{ 
		background-color: orange; 
	} 
} 

利⽤BootStrap实现响应式设计
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，⽤于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。