常用css样式大全以及css属性代码大全

亦凉 2024-04-23 21:07 67阅读 0赞

?作者主页：青花锁 ?简介：Java领域优质创作者?、Java微服务架构公号作者?

?简历模板、学习资料、面试题库、技术互助

?文末获取联系方式 ?

![在这里插入图片描述][8e79f79251004be596a5f46b79e5197a.png]

--------------------

## 往期热门专栏回顾 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">专栏</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Java项目实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12345409.html" rel="nofollow">介绍Java组件安装、使用；手写框架等</a></td> 
  </tr> 
  <tr> 
   <td align="left">Aws服务器实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12492968.html" rel="nofollow">Aws Linux服务器上操作nginx、git、JDK、Vue</a></td> 
  </tr> 
  <tr> 
   <td align="left">Java微服务实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12439818.html" rel="nofollow">Java 微服务实战，Spring Cloud Netflix套件、Spring Cloud Alibaba套件、Seata、gateway、shadingjdbc等实战操作 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Java基础篇</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12369312.html" rel="nofollow">Java基础闲聊，已出HashMap、String、StringBuffer等源码分析，JVM分析，持续更新中 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Springboot篇</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12273537.html" rel="nofollow">从创建Springboot项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回、全局异常处理、Swagger文档 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Spring MVC篇</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12295009.html" rel="nofollow">从创建Spring MVC项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回 </a></td> 
  </tr> 
  <tr> 
   <td align="left">华为云服务器实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12426609.html" rel="nofollow">华为云Linux服务器上操作nginx、git、JDK、Vue等，以及使用宝塔运维操作添加Html网页、部署Springboot项目/Vue项目等 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Java爬虫</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_8863085.html" rel="nofollow">通过Java+Selenium+GoogleWebDriver 模拟真人网页操作爬取花瓣网图片、bing搜索图片等 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Vue实战</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12278346.html" rel="nofollow">讲解Vue3的安装、环境配置，基本语法、循环语句、生命周期、路由设置、组件、axios交互、Element-ui的使用等 </a></td> 
  </tr> 
  <tr> 
   <td align="left">Spring</td> 
   <td align="left"><a href="https://blog.csdn.net/s445320/category_12283629.html" rel="nofollow">讲解Spring(Bean)概念、IOC、AOP、集成jdbcTemplate/redis/事务等 </a></td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 前言 ##

> 常用css样式：字体属性、背景属性、区块属性、盒子属性、边框属性、列表属性、定位属性  
>   
>   
> css属性：CSS文字属性、CSS边框空白、CSS符号属性、CSS背景样式、CSS连接属性、CSS框线一览表、CSS表单运用、CSS边界样式

## 1、常用css样式 ##

### 1.1、字体属性：(font) ###

大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
    
    样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)
    
    行高 {line-height: normal;}(正常) 单位：PX、PD、EM
    
    粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)
    
    变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)
    
    大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
    
    修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
    
    常用字体{font-family: "Microsoft YaHei"}(微软雅黑),"MicrosoftJhengHei"(华文细黑), "STHeiti", 
    
    "MingLiu","Courier New", "Courier, monospace", "Times New Roman", "Times", "serif", "Arial",
    
     "Helvetica", "sans-serif"," Verdana"

### 1.2、背景属性： (background) ###

色彩 {background-color: #FFFFFF;}
    
    图片 {background-image: url();}
    
    重复 {background-repeat: no-repeat;}
    
    滚动 {background-attachment: fixed;}(固定) scroll;(滚动)
    
    位置 {background-position: left;}(水平) top(垂直);
    
    简写方法 {background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现，
    要认真的研究*/

### 1.3、区块属性： (Block) ###

字间距 {letter-spacing: normal;} 数值 /*这个属性似乎有用，多实践下*/
    
    对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
    
    缩进 {text-indent: 数值px;}
    
    垂直对齐 {vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle;
                             bottom; text-bottom;
    词间距{word-spacing: normal; 数值}
    
    空格{white-space: pre;(保留)} nowrap;(不换行)
    
    显示 {display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;
    
    (紧凑) marker;(标记)       table; inline-table; table-raw-group; table-header-group; 
    
    table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;
    
    (表格标题) /*display 属性的了解很模糊*/

### 1.4、盒子属性： (Box) ###

width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左
    1.5、边框属性： (Border)
    border-style: dotted;    (点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;
    
    (脊状) inset;(凹陷) outset;
    
    border-width:; 边框宽度
    
    border-color:#;
    
    简写方法:border：width style color; /*简写*/

### 1.6、列表属性： (List-style) ###

类型list-style-type: disc;(圆点)    circle;(圆圈) square;(方块) decimal;(数字) 
    
    lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;
    
    位置list-style-position: outside;(外) inside;
    
    图像list-style-image: url(..);

### 1.7、定位属性： (Position) ###

Position: absolute; relative; static;
    
    visibility: inherit; visible; hidden;
    
    overflow: visible; hidden; scroll; auto;
    
    clip: rect(12px,auto,12px,auto) (裁切)

--------------------

## 2、css属性代码大全 ##

### 2.1、CSS文字属性 ###

color : #999999; /*文字颜色*/
    
    font-family : 宋体,sans-serif; /*文字字体*/
    
    font-size : 9pt; /*文字大小*/
    
    font-style:itelic; /*文字斜体*/
    
    font-variant:small-caps; /*小字体*/
    
    letter-spacing : 1pt; /*字间距离*/
    
    line-height : 200%; /*设置行高*/
    
    font-weight:bold; /*文字粗体*/
    
    vertical-align:sub; /*下标字*/
    
    vertical-align:super; /*上标字*/
    
    text-decoration:line-through; /*加删除线*/
    
    text-decoration: overline; /*加顶线*/
    
    text-decoration:underline; /*加下划线*/
    
    text-decoration:none; /*删除链接下划线*/
    
    text-transform : capitalize; /*首字大写*/
    
    text-transform : uppercase; /*英文大写*/
    
    text-transform : lowercase; /*英文小写*/
    
    text-align:right; /*文字右对齐*/
    
    text-align:left; /*文字左对齐*/
    
    text-align:center; /*文字居中对齐*/
    
    text-align:justify; /*文字分散对齐*/
    
    **vertical-align 属性**
    
    vertical-align:top; /*垂直向上对齐*/
    
    vertical-align:bottom; /*垂直向下对齐*/
    
    vertical-align:middle; /*垂直居中对齐*/
    
    vertical-align:text-top; /*文字垂直向上对齐*/
    
    vertical-align:text-bottom; /*文字垂直向下对齐*/

### 2.2、CSS边框空白 ###

padding-top:10px; /*上边框留空白*/
    
    padding-right:10px; /*右边框留空白*/
    
    padding-bottom:10px; /*下边框留空白*/
    
    padding-left:10px; /*左边框留空白*/

### 2.3、CSS符号属性 ###

list-style-type:none; /*不编号*/
    
    list-style-type:decimal; /*阿拉伯数字*/
    
    list-style-type:lower-roman; /*小写罗马数字*/
    
    list-style-type:upper-roman; /*大写罗马数字*/
    
    list-style-type:lower-alpha; /*小写英文字母*/
    
    list-style-type:upper-alpha; /*大写英文字母*/
    
    list-style-type:disc; /*实心圆形符号*/
    
    list-style-type:circle; /*空心圆形符号*/
    
    list-style-type:square; /*实心方形符号*/
    
    list-style-image:url(/dot.gif); /*图片式符号*/
    
    list-style-position: outside; /*凸排*/
    
    list-style-position:inside; /*缩进*/

### 2.4、CSS背景样式 ###

background-color:#F5E2EC; /*背景颜色*/
    
    background:transparent; /*透视背景*/
    
    background-image : url(/image/bg.gif); /*背景图片*/
    
    background-attachment : fixed; /*浮水印固定背景*/
    
    background-repeat : repeat; /*重复排列-网页默认*/
    
    background-repeat : no-repeat; /*不重复排列*/
    
    background-repeat : repeat-x; /*在x轴重复排列*/
    
    background-repeat : repeat-y; /*在y轴重复排列*/

#### 2.4.1、指定背景位置 ####

background-position : 90% 90%; /*背景图片x与y轴的位置*/
    
    background-position : top; /*向上对齐*/
    
    background-position : buttom; /*向下对齐*/
    
    background-position : left; /*向左对齐*/
    
    background-position : right; /*向右对齐*/
    
    background-position : center; /*居中对齐*/

### 2.5、CSS链接属性 ###

a /*所有超链接*/
    
    a:link /*超链接文字格式*/
    
    a:visited /*浏览过的链接文字格式*/
    
    a:active /*按下链接的格式*/
    
    a:hover /*鼠标转到链接*/

#### 2.5.1、鼠标光标样式 ####

链接手指 CURSOR: hand
    
    十字体 cursor:crosshair
    
    箭头朝下 cursor:s-resize
    
    十字箭头 cursor:move
    
    箭头朝右 cursor:move
    
    加一问号 cursor:help
    
    箭头朝左 cursor:w-resize
    
    箭头朝上 cursor:n-resize
    
    箭头朝右上 cursor:ne-resize
    
    箭头朝左上 cursor:nw-resize
    
    文字I型 cursor:text
    
    箭头斜右下 cursor:se-resize
    
    箭头斜左下 cursor:sw-resize
    
    漏斗 cursor:wait
    
    光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}

### 2.6、CSS框线一览表 ###

border-top : 1px solid #6699cc; /*上框线*/
    
    border-bottom : 1px solid #6699cc; /*下框线*/
    
    border-left : 1px solid #6699cc; /*左框线*/
    
    border-right : 1px solid #6699cc; /*右框线*/
    
    以上是建议书写方式,但也可以使用常规的方式 如下:
    border-top-color : #369 /*设置上框线top颜色*/
    
    border-top-width :1px /*设置上框线top宽度*/
    
    border-top-style : solid/*设置上框线top样式*/

#### 2.6.1、其他框线样式 ####

solid /*实线框*/
    
    dotted /*虚线框*/
    
    double /*双线框*/
    
    groove /*立体内凸框*/
    
    ridge /*立体浮雕框*/
    
    inset /*凹框*/
    
    outset /*凸框*/

### 2.7、CSS表单运用 ###

文字方块
    按钮
    复选框
    选择钮
    多行文字方块
    下拉式菜单 选项1选项2

### 2.8、CSS边界样式 ###

margin-top:10px; /*上边界*/
    
    margin-right:10px; /*右边界值*/
    
    margin-bottom:10px; /*下边界值*/
    
    margin-left:10px; /*左边界值*/

#### 2.8.1、CSS 属性： 字体样式(Font Style) ####

<table> 
 <thead> 
  <tr> 
   <th align="left">序号</th> 
   <th align="left">中文说明</th> 
   <th align="left">标记语法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">1</td> 
   <td align="left">字体样式</td> 
   <td align="left">{font:font-style font-variant font-weight font-size font-family}</td> 
  </tr> 
  <tr> 
   <td align="left">2</td> 
   <td align="left">字体类型</td> 
   <td align="left">{font-family:“字体1”,“字体2”,“字体3”,…}</td> 
  </tr> 
  <tr> 
   <td align="left">3</td> 
   <td align="left">字体大小</td> 
   <td align="left">{font-size:数值 、inherit、medium、large、 larger、 x-large、 xx-large、 small 、smaller、 x-small、 xx-small}</td> 
  </tr> 
  <tr> 
   <td align="left">4</td> 
   <td align="left">字体风格</td> 
   <td align="left">{font-style:inherit、italic、normal、oblique}</td> 
  </tr> 
  <tr> 
   <td align="left">5</td> 
   <td align="left">字体粗细</td> 
   <td align="left">{font-weight:100-900、bold、bolder、lighter、normal;}</td> 
  </tr> 
  <tr> 
   <td align="left">6</td> 
   <td align="left">字体颜色</td> 
   <td align="left">{color:数值;}</td> 
  </tr> 
  <tr> 
   <td align="left">7</td> 
   <td align="left">阴影颜色</td> 
   <td align="left">{text-shadow:16位色值}</td> 
  </tr> 
  <tr> 
   <td align="left">8</td> 
   <td align="left">字体行高</td> 
   <td align="left">{line-height:数值、inherit、normal;}</td> 
  </tr> 
  <tr> 
   <td align="left">9</td> 
   <td align="left">字 间 距</td> 
   <td align="left">{letter-spacing:数值、inherit、normal}</td> 
  </tr> 
  <tr> 
   <td align="left">10</td> 
   <td align="left">单词间距</td> 
   <td align="left">{word-spacing:数值、inherit、normal}</td> 
  </tr> 
  <tr> 
   <td align="left">11</td> 
   <td align="left">字体变形</td> 
   <td align="left">{font-variant:inherit、normal、small-cps }</td> 
  </tr> 
  <tr> 
   <td align="left">12</td> 
   <td align="left">英文转换</td> 
   <td align="left">{text-transform:inherit、none、capitalize、uppercase、lowercase}</td> 
  </tr> 
  <tr> 
   <td align="left">13</td> 
   <td align="left">字体变形</td> 
   <td align="left">{font-size-adjust:inherit、none}</td> 
  </tr> 
  <tr> 
   <td align="left">14</td> 
   <td align="left">字体</td> 
   <td align="left">{font-stretch:condensed、expanded、extra-condensed、extra-expanded、inherit、narrower、 normal、 semi-condensed、semi-expanded、ultra-condensed、ultra-expanded、wider}</td> 
  </tr> 
 </tbody> 
</table>

#### 2.8.2、文本样式(Text Style) ####

<table> 
 <thead> 
  <tr> 
   <th align="left">序号</th> 
   <th align="left">中文说明</th> 
   <th align="left">标记语法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">1</td> 
   <td align="left">行 间 距</td> 
   <td align="left">{line-height:数值、inherit、normal;}</td> 
  </tr> 
  <tr> 
   <td align="left">2</td> 
   <td align="left">文本修饰</td> 
   <td align="left">{text-decoration:inherit、none、underline、overline、line-through、blink}</td> 
  </tr> 
  <tr> 
   <td align="left">3</td> 
   <td align="left">段首空格</td> 
   <td align="left">{text-indent:数值、inherit}</td> 
  </tr> 
  <tr> 
   <td align="left">4</td> 
   <td align="left">水平对齐</td> 
   <td align="left">{text-align:left、right、center、justify}</td> 
  </tr> 
  <tr> 
   <td align="left">5</td> 
   <td align="left">垂直对齐</td> 
   <td align="left">{vertical-align:inherit、top、bottom、text-top、text-bottom、baseline、middle、sub、super}</td> 
  </tr> 
  <tr> 
   <td align="left">6</td> 
   <td align="left">书写方式</td> 
   <td align="left">{writing-mode:lr-tb、tb-rl}</td> 
  </tr> 
 </tbody> 
</table>

#### 2.8.3、背景样式 ####

<table> 
 <thead> 
  <tr> 
   <th align="left">序号</th> 
   <th align="left">中文说明</th> 
   <th align="left">标记语法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">1</td> 
   <td align="left">背景颜色</td> 
   <td align="left">{background-color:数值}</td> 
  </tr> 
  <tr> 
   <td align="left">2</td> 
   <td align="left">背景图片</td> 
   <td align="left">{background-image: url(URL)、none}</td> 
  </tr> 
  <tr> 
   <td align="left">3</td> 
   <td align="left">背景重复</td> 
   <td align="left">{background-repeat:inherit、no-repeat、repeat、repeat-x、repeat-y}</td> 
  </tr> 
  <tr> 
   <td align="left">4</td> 
   <td align="left">背景固定</td> 
   <td align="left">{background-attachment:fixed、scroll}</td> 
  </tr> 
  <tr> 
   <td align="left">5</td> 
   <td align="left">背景定位</td> 
   <td align="left">{background-position:数值、top、bottom、left、right、center}</td> 
  </tr> 
  <tr> 
   <td align="left">6</td> 
   <td align="left">背影样式</td> 
   <td align="left">{background:背景颜色、背景图象、背景重复、背景附件、背景位置}</td> 
  </tr> 
 </tbody> 
</table>

#### 2.8.4、框架样式(Box Style) ####

<table> 
 <thead> 
  <tr> 
   <th align="left">序号</th> 
   <th align="left">中文说明</th> 
   <th align="left">标记语法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">1</td> 
   <td align="left">边界留白</td> 
   <td align="left">{margin:margin-top margin-right margin-bottom margin-left}</td> 
  </tr> 
  <tr> 
   <td align="left">2</td> 
   <td align="left">补白</td> 
   <td align="left">{padding:padding-top padding-right padding-bottom padding-left}</td> 
  </tr> 
  <tr> 
   <td align="left">3</td> 
   <td align="left">边框宽度</td> 
   <td align="left">{border-width:border-top-width border-right-width border-bottom-width border-left-width} 宽度值：thin、medium、thick、数值</td> 
  </tr> 
  <tr> 
   <td align="left">4</td> 
   <td align="left">边框颜色</td> 
   <td align="left">{border-color:数值 数值 数值 数值}　　数值：分别代表top、right、bottom、left颜色值</td> 
  </tr> 
  <tr> 
   <td align="left">5</td> 
   <td align="left">边框风格</td> 
   <td align="left">{border-style:none、hidden、inherit、dashed、solid、double、inset、outset、ridge、groove}</td> 
  </tr> 
  <tr> 
   <td align="left">6</td> 
   <td align="left">边框</td> 
   <td align="left">{border:border-width border-style color}</td> 
  </tr> 
  <tr> 
   <td align="left">-</td> 
   <td align="left">上边框</td> 
   <td align="left">{border-top:border-top-width border-style color}</td> 
  </tr> 
  <tr> 
   <td align="left">-</td> 
   <td align="left">右边框</td> 
   <td align="left">{border-right:border-right-width border-style color}</td> 
  </tr> 
  <tr> 
   <td align="left">-</td> 
   <td align="left">下边框</td> 
   <td align="left">{border-bottom:border-bottom-width border-style color}</td> 
  </tr> 
  <tr> 
   <td align="left">-</td> 
   <td align="left">左边框</td> 
   <td align="left">{border-left:border-left-width border-style color}</td> 
  </tr> 
  <tr> 
   <td align="left">7</td> 
   <td align="left">宽度</td> 
   <td align="left">{width:长度、百分比、auto}</td> 
  </tr> 
  <tr> 
   <td align="left">8</td> 
   <td align="left">高度</td> 
   <td align="left">{height:数值、auto}</td> 
  </tr> 
  <tr> 
   <td align="left">9</td> 
   <td align="left">漂浮</td> 
   <td align="left">{float:left、right、none}</td> 
  </tr> 
  <tr> 
   <td align="left">10</td> 
   <td align="left">清除</td> 
   <td align="left">{clear:none、left、right、both}</td> 
  </tr> 
 </tbody> 
</table>

#### 2.8.5、分类列表 ####

<table> 
 <thead> 
  <tr> 
   <th align="left">序号</th> 
   <th align="left">中文说明</th> 
   <th align="left">标记语法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">1</td> 
   <td align="left">控制显示</td> 
   <td align="left">{display:none、block、inline、list-item}</td> 
  </tr> 
  <tr> 
   <td align="left">2</td> 
   <td align="left">控制空白</td> 
   <td align="left">{white-space:normal、pre、nowarp}</td> 
  </tr> 
  <tr> 
   <td align="left">3</td> 
   <td align="left">符号列表</td> 
   <td align="left">{list-style-type:disc、circle、square、decimal、lower-roman、upper-roman、lower-alpha、upper-alpha、none}</td> 
  </tr> 
  <tr> 
   <td align="left">4</td> 
   <td align="left">图形列表</td> 
   <td align="left">{list-style-image:URL}</td> 
  </tr> 
  <tr> 
   <td align="left">5</td> 
   <td align="left">位置列</td> 
   <td align="left">{list-style-position:inside、outside}</td> 
  </tr> 
  <tr> 
   <td align="left">6</td> 
   <td align="left">目录列表</td> 
   <td align="left">{list-style:目录样式类型、目录样式位置、url}</td> 
  </tr> 
  <tr> 
   <td align="left">7</td> 
   <td align="left">鼠标形状</td> 
   <td align="left">{cursor:hand、crosshair、text、wait、move、help、e-resize、nw-resize、w-resize、s-resize、se-resize、sw-resize}</td> 
  </tr> 
 </tbody> 
</table>

--------------------

资料获取，更多粉丝福利，关注下方公众号获取

![在这里插入图片描述][a74f7d5d03234f7c8a635562034442a0.gif_pic_center]

[8e79f79251004be596a5f46b79e5197a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/a13dea03c3704500b0a382ff529ea345.png
[a74f7d5d03234f7c8a635562034442a0.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/fa531cca73824d4d897b734854e0c6de.gif