IT评测·应用市场-qidao123.com

标题: 常用CSS样式及属性代码 [打印本页]

作者: 羊蹓狼 时间: 2024-6-27 20:31
标题: 常用CSS样式及属性代码
媒介

微信小程序的样式与css样式根本一致。
常用css样式：背景、字体、边框、盒子、列表、定位、区块
常用css属性：背景样式、笔墨属性、边界样式、边框空缺、符号属性、毗连属性、表单运用、框线一览表

1.常用css样式

1.1. 背景属性：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.2. 字体属性：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;
大小写：{font-transform: capitalize;}(首字母大写) uppercase;lowercase;none;
修饰：{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
常用字体：{font-family: “Microsoft YaHei”;}(微软雅黑), “MicrosoftJhengHei”(华文细黑)
  1.3. 边框属性：Border

边框样式：{border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;}
边框宽度：{border-width: 1px;}
边框颜色：{border-color: #ccc;}
边框圆角：{border-radius: 10px;}(圆角半径)
简写方式：{border: width style color;}
  1.4. 盒子属性：Box

box-sizing:border-box的作用：
想要清楚这个属性的作用，首先要理解盒子模型，盒子模型是指：外边距（margin）+ 边框（border）+ 内边距（padding）+ 内容（content），可以把每一个容器，比如div，都看作是一个盒子模型。
比如给一个DIV设置了宽高为500px，现实上只设置了content，之后我们又设置了边框和内边距（padding:10px;border:1px solid red;），那么最终这个元素的宽高就是544px（500px + 40px + 4px），就是说一个元素的现实宽高是由 border + padding + content 构成。
如果没有设置box-sizing:border-box属性，元素的宽高会加上border和padding，那么为了不超过给定的宽高，需要我们手动去盘算减去相应的border和padding值，如果设置了box-sizing:border-box属性，盒子模型就会自动调整content的值，不需要手动调整。
1.5. 列表属性：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.6. 定位属性：Position

position-relative; 相对定位
position-absolute; 绝对定位
position-static; 默认定位，使元素定位于通例流（天然流）中，且忽略任何top、bottom、left或right声明
visibility: hidden; 将元素隐藏，但在页面中该占的位置还是占着。
display: none; 将元素体现设为无，且在页面中不占任何的位置。
visibility: inherit; 继承上一个父对象的可见性。
visibility: visible; 对象可视
overflow属性规定当内容溢出时的处理方式：
overflow: visible; 不裁剪超出盒子的部份
overflow: hidden; 将超出盒子部份的内包庇藏
overflow: scroll; x轴和y轴都有滚动条
overflow-x: scroll; x轴强制出现滚动条
overflow-y: scroll; y轴强制出现滚动条
overflow: auto; 自动判定是否出现滚动条
overflow: inherit; 从父元素继承overflow的属性
clip裁剪绝对定位元素
clip 属性允许定义一个元素的可见尺寸，当一幅图像的尺寸大于包含此元素时，此图像就会被修剪并体现为这个元素定义的形状。
position: absolute;
clip: rect(0px,165px,200px,34px) (裁切)
clip:rect(0px,165px,200px,34px)中的0px,165px,200px,34px分别对应图片的上，右，下，左四个方位；clip:rect()需要共同position属性利用，才气对图像进行裁剪。
注意：
● 如果先有"overflow：visible"定义了元素，clip属性就不起作用。
● css中的clip:rect()只能在绝对定位的元素上利用，包罗fixed属性的元素，因为fixed也算绝对定位
  1.7. 区块属性：Block

对齐：{text-align: justify;}(两头对齐) left; right; center;
垂直对齐：{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;
字间距：{letter-spacing: normal | length | inherit ;} normal: 相当于0，length: 数值可为负数
词间距：{word-spacing: normal | length | inherit ;}
缩进：{text-indent: 数值px;}
空格：{white-space: pre;}(保留) nowrap;(不换行)
体现：{display: block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部门) compact;(紧凑) marker;(标记)
2.常用css属性代码

2.1. 笔墨属性设置

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. 边框空缺设置

padding-top:10px; /上边框留空缺/
padding-left:10px; /左边框留空缺/
padding-bottom:10px; /下边框留空缺/
padding-right:10px; /右边框留空缺/
  2.3. 背景样式设置

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

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

list-style-type:none; /不编号/
list-style-type:decimal; /阿拉伯数字/
list-style-type:lower-alpha; /小写英笔墨母/
list-style-type:upper-alpha; /大写英笔墨母/
list-style-type:lower-roman; /小写罗马数字/
list-style-type:upper-roman; /大写罗马数字/
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.6. 链接属性设置

a /所有超链接/
a:link /超链接笔墨格式/
a:visited /欣赏过的链接笔墨格式/
a:active /按下链接的格式/
a:hover /鼠标转到链接/
  2.7. 边框线属性设置

border-top-color : #369 /设置上框线top颜色/
border-top-width :1px /设置上框线top宽度/
border-top-style : solid/设置上框线top样式/
可利用简写方式如下：
border-top : 1px solid #6699cc; /上框线/
border-bottom : 1px solid #6699cc; /下框线/
border-left : 1px solid #6699cc; /左框线/
border-right : 1px solid #6699cc; /右框线/
  2.8. 其他边框线属性设置

solid /实线框/
dotted /虚线框/
double /双线框/
groove /立体内凸框/
ridge /立体浮雕框/
inset /凹框/
outset /凸框/
  2.9. 边界样式设置

margin-top:10px; /上边界/
margin-right:10px; /右边界值/
margin-bottom:10px; /下边界值/
margin-left:10px; /左边界值/
  3.其他

3.1. button按钮样式的4种状态

平凡状态
hover 鼠标悬停状态
active 点击状态（按下弹起）
focus 取得焦点状态（按下不弹起）
.btn:focus{outline:0;}：可以去除按钮或a标签点击后的蓝色边框

3.2. flex弹性布局

display:flex 意思是弹性布局，是css中常用的一种布局本领，可以使元素具有弹性，让页面中的元素随着页面大小的改变而改变。
以下几个属性都是加在父元素身上：

flex-directory:row 布局分列方向
row: 默认值，按行分列，水平方向从左至右
row-reverse: 按行分列，水平方向从右至左
column: 按列分列，方向为垂直方向从上至下
column-reverse: 按列分列，方向为垂直方向从下至上
flex-wrap:nowrap 是否换行处理
nowrap: 默认值，不换行处理
wrap: 换行处理
wrap-reverse: 反向换行
flex-flow: flex-directory flex-wrap 复合写法，顺序一定不能乱
align-items: 每一行中子元素的上下对齐方式
center: 居中对齐

3.3. justify-content

justify-content属性用于描述弹性盒子容器的对齐方式。它包含沿着分布在欣赏器中的 flex 容器的主轴的内容项之间和周围的空间。
注意：此属性不能用于沿垂直轴描述项目或容器。为了垂直对齐项目，我们可以利用align-items 属性
在应用了 lengths 和 auto margins 属性后，对齐是可能的，即，如果在Flexbox 布局中至少有一个具有flex-grow 属性而不是 0 的灵活元素，那么它不会影响并且有任何影响不会有任何可用空间。
句法：

justify-content: flex-start|flex-end|center|space-between|
space-around|space-evenly|initial|inherit;

复制代码

属性值：
flex-start：它是用于从容器开始对齐弹性项目标默认值。
句法：

justify-content: flex-start;

复制代码

flex-end：用于对齐容器末端的弹性项目。
句法：

justify-content: flex-end;

复制代码

justify-content:space-between：指两头对齐，项目之间的隔断都相等
3.4. initial

initial 关键字用于设置CSS属性为它的默认值，可作用于任何CSS样式（IE不支持该关键字）

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)