CSS部分属性及分类

只记录一部分，更多的需要实践中去认识

参考文档w3school
w3school中提供了可在网页上直接运行的代码，可以亲自试一试改变各种属性造成的效果

字体属性(Font) 定义文字的样式

字体

p {font-family:"微软雅黑";}
div {font-family:Arial,"Microsoft YaHei","微软雅黑";}
  • 可以使用汉字描述字体,但推荐使用英文,各字体之间用英文","隔开
  • 有空格隔开的多个单词组成的字体,加引号
  • 可以定义多个字体, 浏览器会依次判断是否安装了字体, 如果有就使用, 没有就判断下一个字体
  • 如果所有字体都没有安装,就使用浏览器默认的字体 (谷歌浏览器默认字体 微软雅黑)
  • 尽量使用浏览器默认的字体, 保证页面在任何浏览器中都能正确显示

文字大小

font-size: 12px;

网页字体大小常用单位: px(像素)
谷歌浏览器默认字体大小 16px
不同浏览器默认字号可能不同, 尽量给一个明确的值, 不要用默认大小
可以给<body>设置 指定整个页面的文字大小 (标题标签比较特殊,需要单独指定字体大小)

字体粗细

font-weight: 400;
属性值 描述
normal 默认值(不加粗)
bold 字体加粗
100--900 400等同于normal，700等同于bold，数字后没有单位
  • 实际开发更推荐使用数字作为值

文字样式

font-style: normal； /* 默认值(标准字体样式) */
font-style: italic； /* 字体倾斜 */
  • 平时很少给文字加倾斜, 反而给斜体标签(em i)改为不倾斜 normal

复合属性写法 连写

/* 顺序 font: font-style font-weight font-size/line-height font-family; */
font: italic 700 16px 'Microsoft YaHei';

优缺点：代码简洁, 但降低了可读性, 增加维护难度

文本属性(text) 定义文本的外观样式

文本颜色

color: #FF0000;               /* 十六进制 */
color: red;                   /* 预定义的颜色值 */
color: rgb(255,255,255);      /* RGB代码 */
color: rgba(240,240,240,.8);  /* RGB代码 加上透明度 */

文本对齐方式

text-align: left;   /* 左对齐(默认值) */
text-align: right;  /* 右对齐 */
text-align: center; /* 居中对齐 */

装饰文本

text-decoration: none;         /* 默认，没有装饰线，常用: 取消<a>超链接的下划线, 并更改颜色 */
text-decoration: underline;    /* 下划线，a链接默认样式 */
text-decoration: overline;     /* 上划线 */
text-decoration: line-through; /* 删除线 */

文本缩进

text-indent: 5px;
text-indent: 2em;
  • 指定文本第一行的缩进, 通常将段落首行缩进
  • 单位 px(像素) 精确单位 (值甚至可以为负值)
  • 单位 em 是一个相对单位, 是当前元素 (font-size) 一个文字的大小
    如果设置段落首行缩进 2 个字, 即 2em

行间距

line-height: 40px;
  • 行间距的组成: 上间距、文本高度、下间距
  • 这里修改的是上下间距, 文本大小不会改变

CSS 背景属性

背景颜色

background-color: red;
取值 描述
color_name 规定颜色值为颜色名称的背景颜色（比如 red）
hex_number 规定颜色值为十六进制值的背景颜色（比如 #ff0000）
rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）
transparent 默认。背景颜色为透明
inherit 规定应该从父元素继承 background-color 属性的设置

背景图片

background-image: none;   /* 默认，无背景图 */
background-image: url(图片路径);
  • 背景颜色和图片可以同时设置, 背景颜色处于背景图片的下层
  • 设置背景图片与父标签一样宽: width = 100%

背景图片平铺

background-repeat: no-repeat;
值 描述
repeat 默认。背景图像将在垂直方向和水平方向重复
repeat-x 背景图像将在水平方向重复
repeat-y 背景图像将在垂直方向重复
no-repeat 背景图像将仅显示一次
inherit 规定应该从父元素继承 background-repeat 属性的设置

图片在背景中的位置

background-position: x y;
  • x、y指x坐标和y坐标，取值可以是方位名词或精确单位
  • 方位名词：x： top/center/bottom；y：left/center/right
    如果只指定了一个方位名词，另一个默认居中对齐
  • 精确单位：百分数或带单位的具体数值(如像素px)
    如果只指定一个值，则该数值为x值，另一个默认垂直居中
  • 取值方式混合使用，第一个值为x，第二个值为y

背景图像固定(背景附着)

background-attachment: scroll;  /* 背景图像会随着页面其余部分的滚动而移动 */
background-attachment: fixed;   /* 当页面的其余部分滚动时，背景图像不会移动 */
background-attachment: inherit; /* 继承父元素的属性设置 */
  • 设置背景图像是否固定或者随着页面的其余部分滚动
  • 可以制作视差滚动效果

背景半透明

background: rgba(255,255,255,.5);
  • 最后一个参数alpha 透明度，取值在0-1之间，小数点前的0可以省略

背景属性简写写法

background: #00FF00 url(bgimage.gif) no-repeat fixed top; /* 推荐的书写顺序 */
  • 一个声明中设置所有背景属性
posted @   ChiseledPumpkin  阅读(54)  评论(0)  编辑  收藏  举报
相关博文：
·  CSS引入方式、元素显示模式、三大特性
·  HTML知识总结
·  CSS|常用CSS属性
·  CSS：字体属性，基础选择器
·  CSS基础属性
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手