前端学习笔记2：CSS

CSS学习笔记

文章目录

• CSS学习笔记
• • • CSS简介
    • CSS语法
    • 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选择器>类选择器>元素选择器

[----待续------]