CSS属性大全

已于 2023-11-13 14:30:07 修改
阅读量158 收藏
点赞数
分类专栏： CSS 文章标签： css 前端
于 2023-10-18 19:24:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54825857/article/details/133912307
版权

文章目录

一、文字属性                         简写：font:[style] [weight] size family

   颜色       color:英文名|#FFFFFF/*十六进制，0~9，A~F~,可以#3、4、6位*/|rgb(0~255,0~255,0~255)/*值越大越亮**/|rgb(0~255,0~255,0~255,0~1)/*越大越不透明*/
   倾斜      font-style: normal | italic/*倾斜的*/
   粗细      font-weigth: lighter/*细线，默认*/ | bold//*加粗*/ | bolder/*加粗再加粗*/（100~900整百数，400=normal,700=bold）
   大小      font-size:数值/*px*/|
   字体      font-family:serif/*有衬线的字体,笔画结尾有特殊的装饰线或衬线*/|sans-serif/*无衬线的字体，笔画结尾是平滑的字体*/|monospace/*等宽字体，用于代码*/|cursive/*草书，这种字体有的有连笔，有的还有特殊的斜体效果*/|fantasy/*装饰字体 ，具有特殊艺术效果的字体*/|"中文/多个单词组合","不存在字体会默认宋体要不然就给字体设置备选方案，写多个字体，用，连接"
小型大写字母 font-variant: normal | small-caps | initial | inherit;

中文字体可以处理英文, 而英文字体不能处理中文。
如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面。
并不是名称是英文就一定是英文字体，因为中文字体其实都有自己的英文名称, 所以是不是中文字体主要看能不能处理中文

二、文本装饰属性               阴影简写：text-shadow:h-shadow v-shadow blue color

文本修饰 text-decoration:underline/*下划线*/|line-through/*删除线*/|overline/*上划线*/|none/*常见的用途就是用于去掉超链接的下划线*/
缩进     text-indent:数值/*em*/
字体改变 text-transform:none/*防止任何改变*/|uppercase/*转换为大写*/|lowercase/*转换为小写 */|capitalize/*将所有单词第一个字母转换为大写*/|full-width/*转换为类似于一个等宽字体*/
文本阴影 text-shadow:none/*取消所有阴影*/|h-shadow/*必需,水平阴影的位置。允许负值*/|v-shadow/*必需,垂直阴影的位置。允许负值*/|blur/*模糊的距离*/|color/*阴影的颜色*/
水平对齐 text-align:left|center|right
垂直对齐 line-height: 数值/*px/em,取值为文本高度*/

三、背景属性                  简写:background:color image repeat attachment position(任意一个都可省)

背景图片尺寸    background-size:100% 100%|/*为夫元素的百分之多少*/|auto/*自适应*/|contain/**/|cover
背景颜色        background-color:英文单词|rgb|rgba|十六进制
渐变色          background-image:linear-gradient(red,orange,green);
背景图片        background-image:url(地址)/*1.图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址
​    		                               2.如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充
   		                                   3.如果网页上出现了图片, 那么浏览器会再次发送请求获取图片*/
背景图片平铺满   background-repeat:repeat/*默认, 在水平和垂直都需要平铺*/|no-repeat/*在水平和垂直都不需要平铺*/|repeat-x/*只在水平方向平铺*/|repeat-y/*只在垂直方向平铺*/
背景随滚动条滚动 background-attachment:scroll /*默认值， 会*/| fixed /*不会随着滚动条的滚动而滚动*/
背景图片的位置   background-position:具体方位名词：水平方向(left center right) 垂直方向(top center bottom)
                                  或者具体的像素：100px 200px (可以接收负数,因为图片正常在第四象限)
  • 背景图片和插入图片区别?
       背景图片：是一个装饰, 不会占用位置。有定位属性, 所以可以很方便的控制图片的位置。
    ​   插入图片：会占用位置。                        没有定位属性, 所以控制图片的位置不太方便

​       插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用 插入图片

四、列表属性                         简写:list-style:type image position

设置列表项标志类型 list-style-type:none|disc/*默认，实心圆*/|circle/*空心圆*/|square/*实心正方形*/|decimal/*十进制数字，以1开头*/|lower-rowan/*大写罗马数字*/|upper-roman/*小写罗马数字*/|secimal-leading_zero/*十进制前导零，eg:01、02...99*/
自定义列表项标志   list-style-image:url（地址）
设置列表项标志位置 list-style-position:outside/*出现在主块框的外部*/|inside/*出现在主块框的内部*/
  • 默认样式 :
    ​ ul,ol 元素的margin-top/bottom均为16px(1em) ， padding-left为40px(2.5em)
    ​ li 元素没有设置默认的空白（行间距）
    ​ dl 元素的margin-top/bottom均为16px(1em),但是没有内边距
    ​ dd 元素的margin-left为40px(2.5em)
    ​ p 元素的margin-top/bottom为16px(1em)

五、盒子属性

  • margin（外边距）：标签和标签之间的距离，相邻元素的边距会合并（margin collapsing）
  • border（边框）：padding外边缘与margin内边缘之间，默认值为0
  • padding（内边距）：边框和内容之间的距离
  • content（内容）：设置内容区的宽高。盒子高度默认为内容的高度。

1、内容

width:px|em|%/*块级元素默认 100%，行内由内容决定。*/
height:      /*由内容决定。*/
max-width:   /*定义元素的最大宽度。该属性值会对元素的宽度设置一个最高限制。不允许指定负值*/
ming-height: /*定义元素的最小高度。该属性值会对元素的高度设置一个最低限制。不允许指定负值*/

2、内边距

padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

连写：padding: 上 右 下 左;

  • 注意点:
    ​ 1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化
    ​ 2.给标签设置内边距之后, 内边距也会有背景颜色

3、边框                            简写:border:[width] style [color]

宽度        border-width:数值px
样式        border-style:none/*无边框*/|hidden/*与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突*/|dotted/*点状边框。在大多数浏览器中呈现为实线*/|dashed/*虚线。在大多数浏览器中呈现为实线。*/|solid/*实线*/|double/*双线。双线的宽度等于 border-width 的值*/|groove/*3D 凹槽边框*/|ridge/*3D 垄状边框*/|inset/*3D inset 边框*/|outset/*3D outset 边框*/
颜色        border-color: 
圆角边框半径 border-radius:绝对值 px/mm/cm | 相对值 em/rem/%

3.1、非连写(方向+要素)
​ border-left-width: 20px;
​ border-left-style: double;
​ border-left-color: pink;

3.2、连写(分别设置四条边的边框)
​border-top/right/bottom/left: 宽度 样式 颜色;
border-width: 上 右 下 左;
​border-style: 上 右 下 左;
​border-color: 上 右 下 左;

  • 注意点:
    ​ 1.三个属性的取值是按照顺时针来赋值,
    ​ 2.margin:1px 2px 3px 4px 上1，右2，下3，左4
        margin:1px 2px 3px        上1，左右2，下3
        margin:1px 2px               上下1，左右2
        margin:1px                      上下左右都是1

4、外边距

margin-top:
margin-right:
margin-bottom:
margin-left:

连写：margin: 上 右 下 左;
    浏览器是默认左对齐的。看起来margin-right没有生效，其实有效果的，只是在默认即标准流的情况的下显示不出来效果，可以加右浮动脱离标准流。
    外边距的那一部分是没有背景颜色的

  • 外边距合并现象
    ​ 在默认(标准流)布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的。但水平方向上的外边距会叠加.

六、隐藏属性

显示方式切换 display:inline/*行内*/|block/*块*/|inline-block/*行内块*/|none/*不显示，不占据屏幕空间*/|flex/*伸缩盒布局*/
显示与隐藏   visibility:hidden/*隐藏，占据屏幕空间*/|visible/*显示*/
透明度       opacity:0~1/*取值为0的时候完全透明，占据屏幕空间*/

1.display:none block显示元素 不占据原先在浏览器的空间 绑定js事件不生效 会引起浏览器重排
2.visiblity:hidden visible显示元素 占据原先在浏览器空间 绑定js事件不生效 会引起浏览器重绘
3.opacity:0   隐藏元素 占据原先在浏览器空间 绑定js事件生效 一般引起重绘(一个图层 一个标签)

6.1 重排（回流）和重绘

  • 重排
    ：当一个dom元素的几何位置发生改变，引起浏览器重新排列，将其正确显示在页面上的过程就叫重排，也叫回流。

  • 重绘
    ：当一个dom元素的外观发生改变，并不影响布局排列，浏览器将其重新绘制的过程就叫重绘！

重排一定会触发重绘，重绘不一定触发重排。
重排重绘会影响浏览器性能(占据cpu)造成页面卡顿，ui迟缓！
引起重排操作：dom元素增加 删除 插入
重绘：visiblity

七、布局属性

浮动     float:none/*默认值，元素默认在标准流(文档流/普通流)中排列*/|left/*元素会立即脱离标准流(文档流/普通流)，向页面的左侧浮动*/|right/*素会立即脱离标准流(文档流/普通流)，向页面的右侧浮动*/
清楚浮动 clear:left/*清楚左侧浮动影响*/|right/*清楚右侧*/|both/*清楚两侧*/

定位 position:static/*静态*/|relative/*相对*/|absolute/*绝对*/|fixed/*固定*/|sticky/*粘滞*/

八、过渡                                   简写：transition:property duration [timing-function] [delay]

CSS transitions 可以决定哪些属性发生动画效果 (明确地列出这些属性)，何时开始 (设置 delay），持续多久 (设置 duration) 以及如何动画 (定义timing function，比如匀速地或先快后慢)。

多个属性值之间用逗号隔开

  • 过渡三要素 ​
    1.1必须要有属性发生变化 ​
    1.2必须告诉系统哪个属性需要执行过渡效果 ​
    1.3必须告诉系统过渡效果持续时长
过渡属性名                transition-property:none|all|CSS属性name
花费时间                  transition-duration:
运动时间/过渡效果的时间曲线 transition-timing-function: ease/*默认，慢快慢*/ | ease-in/*慢开始*/ | ease-out/*慢结束*/ | ease-in-out/*慢开始慢结束*/ | linear/*匀速*/ | cubic-bezier(n,n,n,n)/*在这个函数中自己定义值，0~1*/ 
延迟时间/何时开始          transition-delay:
  • 过渡触发
    1、:hover 鼠标悬停触发
    2、:active 用户单击元素并按住鼠标时触发
    3、:focus 获得焦点时触发
    4、@media触发 符合媒体查询条件时触发
    5、点击事件 用户点击元素时触发

如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为 transition:all 0s;

 <style>
    div{
      width: 100px;
      height: 100px;
      background-color: red;
      /* 设置过渡属性 设置多个属性过渡 需要使用,隔开 */
      transition-property:width,background-color;
      /* 设置过渡持续时间  */
      transition-duration: 2s,1s;
      /* 设置过渡等待时长 */
      transition-delay: 0s;
      /* 设置过渡速度曲线 linear线性匀速 */
      transition-timing-function:linear;
    }
    /* 过渡触发条件 */
    div:hover{
      width: 200px;
      background-color: pink;
    }
    img{
      width: 100px;
      /* 设置过渡效果 */
      /* 过渡属性简写：transition:property duration timing-function delay */
      /* transition:width 2s linear 0s; */

      /* 设置图片缩放比例过渡 transform(形变 移动 旋转 缩放) */
      transition:transform 2s ease-in 0s;
    }
    img:hover{
      transform: scale(1.2);
    }
  </style>
</head>
<body>
  <div></div>
  <img src="../Day01/音视频/ad7.jpeg" alt="">
</body>

九、动画                                 简写：animation:name duration [timing-function] [delay] [iteration-count] [direction]

Animations由两部分组成：

  1. css动画的配置，
  2. 以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。
  • 过渡和动画之间的异同
    不同点：
    过渡必须人为的触发才会执行动画
    动画不需要人为的触发就可以执行动画
    相同点：
    过渡和动画都是用来给元素添加动画的
    过渡和动画都是系统新增的一些属性
    过渡和动画都需要满足三要素才会有动画效果
动画名称       animation-name:
动画时长       animation-duration:
动画运动速度   animation-timing-function:ease/*默认，慢快慢*/ | ease-in/*慢开始*/ | ease-out/*慢结束*/ | ease-in-out/*慢开始慢结束*/ | linear/*匀速*/ | cubic-bezier(n,n,n,n)/*在这个函数中自己定义值，0~1*/ 
延迟时间       animation-delay:
执行次数       animation-iteration-count:num / infinite/*无限次*/
往返动画       animation-direction:normal/*默认执行完后回到起点执行下一次*/ | alternate/*执行完后往回执行下一次*/ | reverse/*反向执行*/
动画不播放时刻 animation-fill-mode:none/*不做改变*/ | forwards/*让元素结束状态保持动画最后一帧的样式*/ | backwards/*让元素等待状态的时候显示动画第一帧的样式*/ | both/*让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式*/
是否暂停       animation-play-state:running/*执行*/ | paused/*暂停*/
/*动画名不用running，因为animation-play-state的属性之一就为running，易产生错误*/

<style>
    div{
      width: 100px;
      background-color: red;
      height: 100px;
      /* 设置动画名称 */
      animation-name: running;
      /* 设置动画持续时间 */
      animation-duration: 2s;
      /* 设置动画速度曲线 */
      animation-timing-function: ease-in-out;
      /* 设置动画等待时长 */
      animation-delay: 2s;
      /* 设置动画迭代次数 number(动画执行次数) infinite(无限循环)*/
      animation-iteration-count: infinite;
    }

    /* 1.定义动画关键帧 定义动画 */
    @keyframes running{
      /* 动画开始状态 */
      from{ margin-left: 0;}
       /* 动画结束状态 */
      to{margin-left: 200px;}
    }
    或
    @keyframes 动画名称{
      0%{ }
      25%{ }
      50%{ }
      100%{ }
    }
  </style>
</head>
<body>
  <div></div>
</body>
  1. 引入animate的cdn或本地animate.css文件
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
  1. 给指定元素加入class"animate__animated <动效名称>"
<div class="animate__animated animate__fadeInUpBig">你好 animate</div>

十、2D转换                             transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);

transform 属性向元素应用从2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或者倾斜。

旋转     transform:rotate(num deg);
平移     transform:translate(水平方向，垂直方向)/*px*/
缩放     transform:scale(水平方向，垂直方向)/*大于1放大，小于1缩小，两者一样可写为一个*/
形变中心 transform-orign:(水平方向，垂直方向)/*px | % | 特殊关键字如center*/
旋转轴向 transform:rotateX/Y/Z(num deg)/*一般为顺时针旋转*/
  • 注意点: ​
    1.如果需要进行多个转换, 那么用空格隔开 ​
    2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的,按照旋转之后的角度进行平移
3D属性-perspective

属性定义3D元素距视图的距离，以像素计，该属性允许改变3D元素查看3D元素的视图，当为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身

1.什么是透视 ​ 近大远小 ​
2.一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

?其他样式

鼠标聚焦时隐藏输入框 outline:none
溢出处理 overflow:visible/* 默认值。内容不会被修剪，会呈现在元素框之外 */|
                | hidden/*超出内容隐藏   （内容会被修剪，并且其余内容不可见）*/
                | auto/*自适应           （由浏览器定夺，如果内容被修剪，就会显示滚动条）*/
                | scroll/*以滚动条形式显示（内容会被修剪，浏览器会显示滚动条以便查看其余内容）*/
  • cursor  指定光标的样式
default默认光标（通常是一个箭头）
auto默认。浏览器设置的光标。cvf
光标呈现为十字线。
pointer光标呈现为指示链接的指针（一只手）
move此光标指示某对象可被移动。
e-resize此光标指示矩形框的边缘可被向右（东）移动。
ne-resize此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize此光标指示矩形框的边缘可被向上（北）移动。
se-resize此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize此光标指示矩形框的边缘可被向下移动（南）。
w-resize此光标指示矩形框的边缘可被向左移动（西）。
text此光标指示文本。
wait此光标指示程序正忙（通常是一只表或沙漏）。
help此光标指示可用的帮助（通常是一个问号或一个气球）。

CSS函数

 计算函数calc left: calc(50% - 680px);/*指距离左侧的距离是宽度50%-680px*/

px,em,rem区别

1.px就是像素单位
2.em是相对单位，相对于自身font-size而言，如果自身没有font-size，才会参照父元素font-size
默认1em = 16px
3.rem是相对单位,相对于html元素字体大小而言的

<style>
    html{
      font-size: 40px;
    }
    .parent{
      font-size: 48px;
    }
    .child{
      width: 100px;
      height: 100px;
      background-color: red;
      font-size: 28px;
      padding: 1em;/*28，若子为设，则看父*/
      margin: 1rem;/*40，看html*/
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>

在这里插入图片描述

其他样式

其他样式

其他样式

其他样式
丝白嘚MAN
关注
专栏目录
css 属性一览表
04-22
详细介绍了css层叠样式表内的属性，方便我们的属性查询，编辑网页！
css属性大全双文件下载
08-10
CSS属性大全双文件下载 CSS背景属性是CSS中最重要的属性之一，它控制着元素的背景样式。以下是CSS背景属性的详细介绍： 1. background：简写属性，作用是将背景属性设置在一个声明中。 2. background-attachment：...
CSS常用属性
weixin_33894640的博客
07-02 114
要做个BS的网站项目，恶补一下CSS。 CSS常用属性： 字体属性：(font)大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)行高 line-height: normal;(正常) 单位：PX、PD、EM粗...
CSS常用属性（列表属性、表格属性、背景属性、鼠标属性）
最新发布
lvshihao_的博客
07-28 932
CSS的列表属性、表格属性、背景属性、鼠标属性
JavaScript CSS Style属性对照表
weixin_30295091的博客
11-02 46
JavaScript CSS Style属性对照表 盒子标签和属性对照 CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写) border 　　border border-bottom 　　borderBottom border-bottom-color 　　borderBottomColor border-bottom-st...
常用的CSS属性的英文单词总结及用法、解释
awld55183的博客
03-23 260
1、(盒子)布局排版类 - TOPfloat - 浮动：设置块元素的浮动效果。可选常用到参数left、right ；width - 宽：确定盒子本身的宽度，可以使盒子的宽度不依靠它所包含的内容多少。height - 高 ：确定盒子本身的高度；clear - 清除 ：用于清除设置的浮动效果，常用参数both 、left、right；margin - 边距 ：控制围绕边框　的边距大小。其中包...
css属性大全
wpxhjl的博客
07-14 307
属性两个，另一个只写一个默认中间 如:left top;属性值:水平线上的唯一，竖直方向上的位置，模糊度，颜色;
CSS样式属性
零一
12-02 351
一 、 CSS文字属性 字体属性(font)： 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 {font-style: oblique;} (偏斜体) italic; (斜体) normal;(正常) 行高 {line-height: normal;} (正常) 单位：PX、PD、EM 粗细 {fo...
CSS 的简写属性
qq_29902541的博客
04-27 234
CSS 的简写属性
常用css样式属性大全（中文注释）
09-25
主要介绍了常用的css样式属性大全,并以中文注释了每个属性的作用和用法例子,需要的朋友可以参考下
css属性大全（css的所有属性）
01-19
包含css的所有属性包含css的所有属性包含css的所有属性
CSS属性大全完整版网页设计前台设计程序员必备手册
09-25
平时在WEB制作中，您又有用到多少？或者说你在平时使用之时，是否也会碰到，有许多特殊字符要如何打印出来？比如说“笑脸”，比如说“版权号”。要是你用时忘记了这些特殊字符，不要紧，请记住今天这个地址，你就...
语言程序设计资料：DIV_CSS常用的css属性大全.doc
09-17
这份“语言程序设计资料：DIV_CSS常用的css属性大全.doc”涵盖了HTML基础标签的使用以及CSS中的一些基本属性，旨在帮助开发者更好地理解和应用这些元素。下面我们将深入探讨其中的关键知识点。 1. HTML基础标签： ...
css属性大全总结
12-15
整理了常用的css属性，适用于新手查阅，熟悉css基本属性使用等等
CSS的简写属性
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
08-28 891
今天的面试中被问到了，半天才理解面试官到底是什么意思，晕……一开始还以为要问margin合并呢…… background background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [ba
css中的简写属性
annijie7175的博客
03-23 172
1.font 这个简写属性可以在一个声明中设置字体的多个属性。 可以按顺序设置如下属性： font-style font-variant font-weight font-size line-height font-family 例如： p { font: italic bold 16px 1 sans-serif; } 字体大小和行高也...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值