前端CSS笔记之小白入门（二）_前端autumn-优快云博客

本文链接：https://blog.youkuaiyun.com/AutumnorLiu/article/details/106844363

本文详细介绍了CSS中常用的文本、字体、背景和其他属性的使用方法，包括颜色、对齐方式、阴影、字体大小、背景图片等。同时，深入探讨了CSS布局方式，如盒子模型、浮动和定位，帮助读者掌握网页布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文为他人笔记搬运版

1.CSS常见属性使用说明

CSS里不仅要使用选择器找到标签，找到标签以后还需要使用CSS的属性键值对设置标签的属性。CSS的属性键值对非常的多，我们只给大家列举一些开发中比较常见的属性，其他样式大家可以自行尝试。CSS属性列表

1.1文本相关属性

属性	取值	描述
color	可以直接写颜色英文单词，可以直接用十六进制、也可以用rgb()值代替	设置文本颜色
text-align	center\left\right\justify	居中、左对齐、右对齐、分散两端对齐
text-indent	数字/百分比	表示文字缩进的距离
text-height	数字/百分比	设置行高
text-shadow	x-offset\y-offset color	用来给文字设置阴影效果
text-decoration	underline\overline\line-through	设置文字装饰样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{

            color:red;
            text-align:left;
            text-shadow:3px -2px 1px green;
        }
    </style>
</head>
<body>
<p>我是一个p</p>
</div>
</body>
</html>

在这里插入图片描述

1.2字体相关属性设置

属性	取值	描述
font-family	系统可用字体	用来设置字体
font-size	数字/百分比	用来设置字体大小
font-style	normal\italic\oblique	设置字体样式，后两个表示斜体
font-weight	关键字和数字	设置字体粗细
font	设置字体相关属性，可连写	至少要设置font-size和font-family属性，且必须放在最后面

p{
      /* font-style font-weigth font-size/line-height font-family */
        font:italic 700 20px/40px "Kai";
}

1.3背景相关属性设置

属性	取值	描述
background-color	颜色取值	设置背景颜色
background-image	url(路径)	设置背景图片
background-size	宽高	设置背景图片大小
background-repeat	no-repeat\repeat-x\y	设置背景图片是否重复
background-position	关键字或px值	设置背景图片位置
background-attachment	fixed\scrolll	设置背景图片是否随着内容滚动
background		设置背景所有相关属性

p {
            width: 400px;
            height: 400px;
            /*background-color: blue;
            background-image: url(fj.JPG);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: 10px 10px;*/
            background: blue url(fj.JPG) no-repeat fixed 10px 10px/200px 200px;
        }

1.4其他属性

属性	取值	描述
border-collapse	separate\collapse	只能用于表格元素，默认值是separate，不合并
over-flow	visible\hidden\scorll\auto	用来规定超出父元素范围后的表现形式

2.CSS布局

CSS不仅可以给HTML的标签添加样式，同时还可以对HTML里的标签进行布局，修改标签的位置。HTML里常见的布局方式有三种:

盒子模型，通过设置元素的宽高，修改内外边距来布局
浮动，修改float属性对应的值，让元素向左或者向右浮动。
定位，修改元素的position属性，将元素直接放在指定的位置上。

2.1盒子模型

属性	取值	描述
width	数字	设置元素的宽度
height	数字	设置元素的高度
padding	数字	设置内边距
margin	数字	设置外边距
border	数字样式颜色	设置边框的线宽、颜色、样式
display	line\block\inline-block\none	修改元素的显示方式
box-sizing	conten-box\border-box	用来规定边框padding是否会撑大盒子

2.2 浮动

属性	取值	描述
float	left\right	设置元素向左或向右浮动

浮动脱离了标准流式布局，内部实现起来也比较复杂，只做了解即可

2.3定位

属性	取值	描述
position	static	元素框正常生成
	relative	可修改left right让元素偏移某个某个距离
	absolute	元素框从标准文档流完全删除，并相对于其父元素定位
	fixed	固定定位
left	数字	设置元素向左偏移像素
right	数字	设置元素向右偏移像素