HTML+CSS零基础学习笔记（二）

最新推荐文章于 2021-01-31 18:32:07 发布

继续努力就好

最新推荐文章于 2021-01-31 18:32:07 发布

阅读量318

点赞数 1

分类专栏： HTML+CSS 文章标签： html css

本文链接：https://blog.csdn.net/weixin_47516343/article/details/106944408

版权

HTML+CSS 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

内容概览

CSS学习笔记（一）

CSS学习笔记（一）

CSS，即：层叠样式表（Cascading Style Sheets）
CSS文档，后缀名为：.css

CSS的引入方式如下：① 行间样式；② 页面级CSS；③ 外部CSS文件。

<!-- 1. 行间样式 -->
<p style="width: 30px;height: 30px;background-color: aqua;">小方块</p>

<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>CSS学习笔记</title>
		<!-- 2. 页面级样式 -->
		<style>
	        p {
	            width: 30px;
	            height: 30px;
	            background-color: aqua;
	        }
		</style>
	</head>
	<body>
		<p>小方块</p>
	</body>
</html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS学习笔记</title>
	<!-- 3. 引入外部CSS文件 -->
    <link rel="stylesheet" href="123.css">
</head>
<body>
    <p>小方块</p>
</body>
</html>

一、CSS选择器

<div id="one" class="box">
    <h1 class="header">我是标题</h1>
    <p class="content">内容</p>
    <span>结尾</span>
    <div>
	   	<span>123</span>
    </div>
</div>
<div id="two" class="square">方块1号</div>
<p class="square">方块2号</p>

对以上（HTML文档中的）元素进行选择并应用CSS样式可采取的选择器类型有如下几种：

id选择器（一对一，标签和id名之间呈一一对应的关系）
```
/* 结构为：# + id名 */
#one {
	width:30px; height:30px;
}
```

class选择器（多对多，标签和class类名之间呈多对多的关系）

/* 结构为：. + class类名 */
.square {
	width:30px; height:30px;
}

标签选择器

/* 结构为：标签名 */
div {
	width:30px; height:30px;
}

通配符选择器（*）— 常用来初始化所有标签的样式
```
/* 结构为：* (星号) */
* {
	color: #f40;
}
```

属性选择器

/* 结构为：[属性名]  或  [属性名=属性值]*/
[id] { /* 对设有id属性的标签设置样式]*/
	width:30px; height:30px;
}
[id="one"] { /* 对设有id属性且id值为one的标签设置样式]*/
	backgound-color: #f40;
}

父子选择器（又称：派生选择器）

/* 结构为：父级元素 + 空格 + 子级元素 + ...*/
#one span {	/* 即：为id为one的标签下所有的span标签设置样式 */
	color: #f40;
}

★★★ 浏览器在遍历父子选择器时，遍历顺序为：自右向左!

直接子元素选择器

/* 结构为：父级元素 + "大于"符号（>） + 子级元素 + ...*/
#one > span {	/* 即：为id为one的标签的直接子元素（即：此处内容为“结尾”的span标签）设置样式 */
	color: #f40;
}

并列选择器（标签选择器和其他选择器并列时，应该将标签选择器放在最前面！）

/* 结构为：任意选择器(条件1) + 任意选择器(条件2)（注意：两个条件之间不能有空格） */
div.square {	/* 即：为class类名为square的div标签设置样式 */
	color: #f40;
}

分组选择器（可用来简化代码）

/* 结构为：不同标签之间用英文逗号隔开，最好用一下格式写，方便维护 */
#one .header,
#one .content,
p.square {	/* 即：将这三个标签中的内容的字体颜色设置为“淘宝红” */
	color: #f40;
}

伪类选择器

/* 结构为：在目标元素后加上：":hover" 等 */
.box:hover {	/* 即：当鼠标移动到该class类名为box的元素上时，其上的字体颜色变为“淘宝红” */
	color: #f40;
}

二、CSS权重

在这里插入图片描述
★优先级★：!important > 行间样式 > id… > class… / 属性选择器 / 伪类… > 标签选择器 / 伪元素… > 通配符选择器（注意：class选择器和属性选择器的优先级一样，谁在后面谁说了算！）

★上述优先级的 底层原理 如下表（浏览器会根据各自的权重值来计算谁的优先级更大）：

类型	权重值
!important	Infinity（正无穷）
行间样式	1000
id	100
class / 属性 / 伪类	10
标签 / 伪元素	1
通配符	0

1）CSS权重值采用的是：256进制
2）权重值越大，优先级越高；权重值一样，后面的覆盖前面的。

三、常用CSS样式

字体

font-size: 12px;
<!-- 注意：① 浏览器默认的字体大小为：16px ; ② 一般网页的字体大小是：12px或14px ; ③ 设置字体的大小实际设置的是字体的高度。-->
font-weight: bold;
<!--  注意：font-weight 的属性值有：lighter / normal / bold / bolder / 100、200、... 、900（定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。） -->
font-style: italic;
<!--  注意：italic 表示 斜体。 -->
font-family: arial;
<!--  注意：font-family 可定义各种字体样式。前端最常用的字体是：arial（乔布斯发明的）。 -->
color: #f40;
<!--  注意：颜色的设置方法为：① 纯英文单词 eg：red ；② 颜色代码 eg： #f40 或 #ff4400 ； ③ 颜色函数 eg：rgb(255, 255, 255)  -->

边框

border: 1px solid #f40;
/* border-width: 1px;
border-style: solid;
border-color: #f40; */

border-left: 1px;
/* border-right: 2px;
border-top: 3px;
border-bottom: 4px; */

★ 利用 border 绘制三角形 ★

文本
text-align: center; 文本对齐方式（center、left、right）
line-height: 30px; 单行文本的行高（单行文本的高度 = 容器的高度 ------ 垂直居中）
text-indent: 2em; 文本首行缩进（单位为：em）

①【1em = 1 * font-size】
eg：文字的行高是1.2倍字体高度（line-height: 1.2em;）
② 分辨率：每英寸能容纳的的垂直像素点数。
（一个像素点只能展示一个颜色单位，像素是相对单位）

text-decoration: line-through; 中划线（属性值：line-through、underline、none、overline）
cursor: pointer; 光标设置（属性值：pointer、help、……）

四、元素的分类

行级元素（又称：内联样式）— inline
★特点★：1）内容决定元素所占位置；2）不可以通过CSS改变宽高。
eg：span、strong、em、a、del
块级元素 — block
★特点★：1）独占一行；2）可以通过CSS改变宽高。
eg：div、p、ol、ul、li、form、address
行级块元素 — inline-block
★特点★：1）内容决定元素所占位置；2）可以通过CSS改变宽高。
eg：img

【注意】凡是带有 inline 的元素，都具有文字特性！！！
在这里插入图片描述

五、开发经验

下图内容是一种常用的开发技巧：（现在CSS中定义功能，后在HTML中选配功能，用以提高开发效率，减少代码冗余度。）
标签选择器，常被用来初始化标签：
通配符选择器，常被用来初始化所有标签：

六、CSS盒模型

内边距样式
设置方式属性值的含义
padding: 6px 6px 6px 6px; 上—右---下—左
padding: 6px 6px 6px; 上—左右—下
padding: 6px 6px; 上下—左右
padding: 6px; 四个方向都一样
外边距样式
设置方式属性值的含义
margin: 6px 6px 6px 6px; 上—右---下—左
margin: 6px 6px 6px; 上—左右—下
margin: 6px 6px; 上下—左右
margin: 6px; 四个方向都一样
CSS盒模型
CSS盒模型的计算问题
小实例（绘制一个简易的“远视图”）

【补充】<body></body>标签有一个默认的 margin 为：8 px

设置方式	属性值的含义
`padding: 6px 6px 6px 6px;`	上—右---下—左
`padding: 6px 6px 6px;`	上—左右—下
`padding: 6px 6px;`	上下—左右
`padding: 6px;`	四个方向都一样

设置方式	属性值的含义
`margin: 6px 6px 6px 6px;`	上—右---下—左
`margin: 6px 6px 6px;`	上—左右—下
`margin: 6px 6px;`	上下—左右
`margin: 6px;`	四个方向都一样

七、定位（position）

absolute（绝对定位）
★特点★：1）脱离原来位置进行定位；2）相对于最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位。
relative（相对定位）
★特点★：1）保留原来位置进行定位；2）相对于自己原来的位置进行定位。
fixed（固定定位）
★特点★：将DOM元素固定在可视窗口的某个位置，并且其位置不随滚动条的滚动而变化。

z-index ：此属性只能在有定位的DOM元素中生效。该属性可以设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。（如果为正数，则离用户更近，为负数则表示离用户更远。）

八、Demo（实现：奥运五环）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>奥运五环</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .wrapper {
            position: relative;
            margin: 30px auto;
            width: 340px;
        }
        .top {
            margin: 0 auto;
            width: 100%;
            height: 106px;
        }
        .bottom {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 224px;
            height: 106px;
            margin-left: -112px;
            margin-right: -53px;
        }

        .circle {
            width: 100px;
            height: 100px;
            border: 3px solid #000;
            border-radius: 50%;
            float: left;
            margin-left: 10px;
        }
        .circle:first-child {
            margin-left: 0;
        }
        .blue {
            border-color: blue;
        }
        .black {
            border-color: black;
        }
        .red {
            border-color: red;
        }
        .orange {
            border-color: orange;
        }
        .green {
            border-color: green;
        }

    </style>
</head>
<body>
    
    <div class="wrapper">
        <div class="top">
            <div class="blue circle"></div>
            <div class="black circle"></div>
            <div class="red circle"></div>
        </div>
        <div class="bottom">
            <div class="orange circle"></div>
            <div class="green circle"></div>
        </div>
    </div>

</body>
</html>