CSS学习笔记（二）

最新推荐文章于 2024-07-19 15:50:46 发布

Rnight阿布

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量197

点赞数 1

分类专栏： HTML、CSS、JavaScript 文章标签： css javascript html css3 js

本文链接：https://blog.csdn.net/m0_46394124/article/details/105315165

版权

HTML、CSS、JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

一、HTML部分
二、css部分
笔记为本人学习css时一些疑问得到解答后，自己总结的一些理解，还有本人学习时一些常用的属性，以及学习时自己搜集的一些资料，笔记可能有些地方表达叙述时不太正确，希望可以得到纠正，互相学习！

一、HTML部分

1、标签页图标

 <link rel="shortcut icon" href="">`

在这里插入图片描述
写在head标签内部，href为图标的存储路径

2、外部样式css文件引入

<link rel="stylesheet" href="">

写在head标签内部，href为文件的存储路径

3、外部脚步文件引入（js）

<script type="text/javasceipt" src=""></script>

一般写在body内的最底部，因为文件内的一些引用要等html的标签全部加载出来才能引用，src为文件存储地址

二、css部分

1、text-decoration属性

<html>
<head>
    <style type="text/css">
        h1 {text-decoration: overline}
        h2 {text-decoration: line-through}
        h3 {text-decoration: underline}
        a {text-decoration: none}
    </style>
</head>

<body>
    <h1>这是标题 1</h1>
    <h2>这是标题 2</h2>
    <h3>这是标题 3</h3>
    <a href="http://www.w3school.com.cn/index.html">这是一个链接</a>
</body>

</html>

在这里插入图片描述
text-decoration:none; 去除a标签下划线
text-decoration:underline; 在文本下加一条下划线
text-decoration:overline; 在文本上方加一条线
text-decoration:line-through; 画一条穿过文本的的线
text-decoration:inherit; 继承父标签的属性

2、去除有序或无序列表前的标记

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <ol>
        <li>去除前</li>
    </ol>
    <ol style="list-style-type:none">
        <li>去除后</li>
    </ol>
</body>
</html>

在这里插入图片描述
list-style-type:none 去除前有“1.”这个标记去除后没有

3、设置内容垂直居中

line-height:行高
设置行高，使内容在垂直方向居中

4、margin：auto和text-align:center的区别

margin:auto; 使盒子本身居中
text-align:center; 使盒子中的内容居中

5、outline和border的区别

两者都是把盒子的边框画出来，但是outline不占空间，border占空间，就是outline画出来的边框能看得到，但是他不占位置，border画出来的边框1px就要占1px的位置

6、背景图设置

background-image:url("背景图路劲路径");/*设置背景图*/
background-repead:no-repead;/*背景图不平铺，只显示一次*/
background-repead:repead-x;/*背景图横向平铺*/
background-repead:repead-y;/*背景图竖向平铺*/
background-repead:repead;/*背景图在整个盒子内平铺*/
background-repead:inherit;/*继承父标签的属性*/

7.浮动

在使用块级标签使，块级标签是要独占一行的，有时我们需要使两个或两个以上的块级标签显示在同一行就需要用到浮动，浮动会使标签向泡泡一样浮到最上方的左边或右边

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动</title>
	<style>
		#a {
			float:left;
			border:1px solid green;
		}
		#b {
			float:right;
			border:1px solid green;
		}
		#main {
			border:1px solid red;
		}
	</style>
</head>
<body>
	<div id="main">
		<div id="a">aaaaaaaaaaaaa</div>
		<div id="b">bbbbbbbbbbbbb</div>
	</div>
</body>
</html>

在这里插入图片描述

float:letf;/*向左浮动*/
float:right;/*向右浮动*/

用完浮动后，要使下面的标签不浮动的话，需使用clear:both;清除浮动，这样下面不需要使用浮动的标签就不会浮到上面去

8、设置内边距时盒子被撑大问题

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>

<body>
    <div style="outline:1px solid red;height:100px;width:100px;">原来的大小</div>
    <div style="outline:1px solid red;height:100px;width:100px;padding:10px;">设置内边距后的大小</div>
    <div style="outline:1px solid red;height:100px;width:100px;padding:10px;box-sizing:border-box;;">设置内边距后再设置box-sizing属性后的大小</div>
</body>
</html>

在这里插入图片描述
box-sizing:border-box;
如上图所示，设置内边框时，盒子会被撑大，设置box-sizing后能反正盒子被撑大

9、弹性布局

display: flex; /*弹性布局,让子节点在该盒子内分布均匀*/
/*配合弹性布局使用,子节点如何分布*/
/*space-between代表平分均等,中间保留一定空白间隙*/
justify-content: space-between;

以及还有一些其他属性值，截图自菜鸟教程

10、字符之间的间隔（字间距）

letter-spacing:1px;/*字符间间距1px*/

11、动画效果

transition: all 0.5s;/*所有的动画效果时间为1.5s*/

具体属性如下截图，截自w3school
在这里插入图片描述

笔记为本人学习css时一些疑问得到解答后，自己总结的一些理解，还有本人学习时一些常用的属性，以及学习时自己搜集的一些资料，笔记可能有些地方表达叙述时不太正确，希望可以得到纠正，互相学习！

Rnight阿布

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记（二）

文章目录一、HTML部分1、标签页图标2、外部样式css文件引入3、外部脚步文件引入（js）二、css部分1、text-decoration属性2、去除有序或无序列表前的标记3、设置内容垂直居中4、margin：auto和text-align:center的区别5、outline和border的区别6、背景图设置7.浮动8、设置内边距时盒子被撑大问题9、弹性布局10、字符之间的间隔（字间距）11、...
复制链接

扫一扫