CSS新手入门笔记整理:CSS常用属性表

字体样式

属性

属性值

说明

font-family

微软雅黑/苹方

字体类型

font-size

数值

字体大小

font-weight

数值/关键字

字体粗细(字重)

font-style

  • normal(正常(默认值))
  • italic(斜体)
  • oblique(斜体)

字体风格

color

色值

字体颜色

文本样式

属性

属性值

说明

text-indent

数值/2em

首行缩进

text-align

  • left(左对齐(默认值))
  • center(居中对齐)
  • right(右对齐)
  • justify(两端对齐)

水平对齐

text-decoration

  • none(去除所有的划线效果(默认值))
  • underline(下划线)
  • line-through(中划线)
  • overline(顶划线)

文本修饰

text-transform

  • none(无转换 (默认值))
  • uppercase(转换为大写)
  • lowercase(转换为小写)
  • capitalize(只将每个英文单词首字母转换为大写)

大小写转换

line-height

数值

行高

letter-spacing

数值

字间距

word-spacing

数值

词间距(只针对英文单词)

vertical-align

  • top(顶部对齐)
  • middle(中部对齐)
  • baseline(基线对齐)
  • bottom(底部对齐)

垂直对齐


边框样式

属性

属性值

说明

border

  • 宽度值 样式 颜色值

边框的整体样式

border-width

  • 数值

边框的宽度

border-style

  • none(无样式)
  • dashed(虚线)
  • solid(实线)

边框的外观

border-color

  • 颜色名称
  • 色值
  • transparent(透明)

边框的颜色

border-radius

  • 数值

边框圆角

列表样式

属性

属性值

说明

list-style-type

  • none(去除列表项符号)

列表项符号

list-style-image

url(图片路径)

列表项图片


表格样式

属性

属性值

说明

caption-side

  • top(标题在顶部(默认值))
  • bottom(标题在底部)

标题位置

border-collapse

  • separate(边框分开,有空隙(默认值))
  • collapse(边框合并,无空隙)

边框合并

border-spacing

  • 数值

边框间距


图片样式

属性

属性值

说明

width

数值

宽度

height

数值

高度

border

数值

边框

text-align

  • left(左对齐(默认值))
  • center(居中对齐)
  • right(右对齐)

水平对齐

vertical-align

  • top(顶部对齐)
  • middle(中部对齐)
  • baseline(基线对齐)
  • bottom(底部对齐)

垂直对齐

float

left(元素向左浮动)

right(元素向右浮动)

文字环绕方式

背景样式

属性

属性值

说明

background-color

  • 色值

背景颜色

background-image

  • url(图片路径)

背景图片地址

background-repeat

  • repeat(在水平方向和垂直方向上同时平铺)
  • repeat-x(只在水平方向(x轴)上平铺)
  • repeat-y(只在垂直方向(y轴)上平铺)
  • no-repeat(不平铺)

背景图片平铺方式

background-position

  • 像素值/关键字;

背景图片位置

background-attachment

  • scroll(随元素一起滚动)
  • fixed(固定不动)

背景图片固定


超链接样式

属性

说明

a:link0

超链接“未访问”的样式

a:visited

超链接“访问后”的样式

a:hover

鼠标“经过”超链接的样式

a:active

鼠标“单击”超链接时的样式

cursor

鼠标外观


盒子模型

属性

属性值

说明

width

数值

宽度

height

数值

高度

border

数值

边框

margin

数值

外边距

padding

数值

内边距

浮动布局

属性

属性值

说明

float

left

左浮动

right

右浮动

clear

both

清除浮动

定位布局

属性

属性值

说明

position

fixed

固定定位

relative

相对定位

absolute

绝对定位

static

静态定位

溢出声名

属性

属性值

说明

overflow

visible

若内容溢出,则溢出内容可见(默认值)

hidden

若内容溢出,则溢出内容隐藏

scroll

若内容溢出,则显示滚动条

auto

auto 跟 scroll 很相似,不同的是 auto 值在盒子需要的时候会给它一个滚动条

元素类型转换

属性值

说明

display

inline

行内元素

block

块元素

inline-block

行内块元素

table

以表格形式显示,类似于 table 元素

table-row

以表格行形式显示,类似于 tr 元素

table-cell

以表格单元格形式显示,类似于 td 元素

none

隐藏元素


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/278255.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++ 学习系列 -- 模板 template

一 C 模板介绍? C 为什么引入模板? 我的理解是: C 引入模板的概念,是为了复用重复的代码,当某些代码除了操作的数据类型不同以外,其他逻辑全都相同,此时就适合采用模板的方式。 定义模板类或者…

转载:TableView性能优化

转载:TableView性能优化 原文链接:https://juejin.cn/post/6955731915672387592 tableView性能优化 Cell重用、标识重用 使用 static 修饰重用标识名称能够保证这个标识只会创建一次,提高性能。接着调用dequeueReusableCellWithIdentifie…

多分类预测 | MATLAB实现CNN-LSTM-Attention多输入分类预测

分类预测 | MATLAB实现CNN-LSTM-Attention多输入分类预测 分类效果 需要源码和数据的私信(微微有偿取哦)

【Jmeter】Jmeter基础5-Jmeter元件介绍之线程(用户)

2.5.1、线程组 一个线程组即一个虚拟用户组,线程组中的每个线程即为1个虚拟用户,每个线程互相隔离,互不影响参数说明: 在取样器错误后要执行的动作 继续:忽略错误,继续执行启动下一进程循环: 终…

Repo代码仓库搭建

使用rockchip sdk二次开发,代码十几个G,都放在一个git仓库的话,每次git status要等好久,决定拆分一下,官方是用repo做代码管理的,我打算也搭建个类似开发环境。 1.首先在git服务器上创建一个manifest仓库&…

架构设计系列之常见架构(二)

五、DDD(领域驱动设计) 领域驱动设计(Domain-Driven Design,DDD)是一种开发思想,强调将软件系统的注意力集中在业务领域上,将领域视为应用的核心。在架构设计中,DDD 提供了一种不同…

云端赋能大湾区:华为云照亮数字化转型之路

编辑:阿冒 设计:沐由 在中国的经济版图上,大湾区是极其重要的增长引擎。这块富有活力和创新力的经济区域里,荟聚了大量的高新技术企业,以及一批创新孵化器和科研机构,产业升级和技术创新的氛围格外浓烈。 1…

深眸科技聚焦AI+机器视觉产业化建设,加速智能制造国产替代升级

随着科技的不断发展,传统的制造生产已经无法满足现代制造业的需求,智能制造应运而生,以智能化、柔性化等生产优势,大幅提升制造效率和生产质量。智能制造是指具有信息自感知、自决策、自执行等功能的先进制造过程、系统与模式的总…

Django 表单处理:从前端到后台的全流程指南

概要 Django作为一个高级Python Web框架,它的表单处理能力强大,可以有效地处理用户输入,进行数据验证以及错误处理。本文将详细介绍如何在Django中创建、处理和使用表单。 1. Django表单系统的核心 Django的表单系统处理表单的生命周期&…

Unity | Shader基础知识(第六集:语法<如何加入外部颜色资源>)

目录 一、本节介绍 1 上集回顾 2 本节介绍 二、语法结构 1 复习 2 理论知识 3 Shader里声明的写法 4 Properties和SubShader毕竟不是一家人 三、 片元着色器中使用资源 四、代码实现 五、全部代码 六、下集介绍 相关阅读 Unity - Manual: Writing Surface Shaders…

多条件三元表达式如何写?

在某些业务需求情况下,如何书写多条件三元表达式?(例如,父组件传值给子组件,子组件根据不同的值去响应不同的颜色变化该如何实现?) 父组件: 父组件传testData的值给子组件&#xff…

一个适用于搭建企业内部培训平台的开源系统

大家好,我是 Java陈序员。 问君能有几多愁,唯有开源项目解千愁! 最近领导给了个任务,搭建一个企业内部培训平台!好不容易刚完成上个任务,又来一个活,这不又得加班了! 还好&#x…