9q13nh 发表于 2024-6-30 08:57:45

web前端css常用的样式集合


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">帮学习web前端的<span style="color: black;">朋友</span>整理好了,方便以后的<span style="color: black;">运用</span>,别光<span style="color: black;">保藏</span>,顺便给个赞吧!</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">css属性代码大全</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一 CSS文字属性:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">color : #999999; /*文字颜色*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">font-family : 宋体,sans-serif; /*文字字体*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">font-size : 9pt; /*文字<span style="color: black;">体积</span>*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">font-style:itelic; /*文字斜体*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">font-variant:small-caps; /*小字体*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">letter-spacing : 1pt; /*字间距离*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">line-height : 200%; /*设置行高*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">font-weight:bold; /*文字粗体*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">vertical-align:sub; /*下标字*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">vertical-align:super; /*上标字*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">text-decoration:line-through; /*加删除线*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">text-decoration: overline; /*加顶线*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">text-decoration:underline; /*加下划线*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">text-decoration:none; /*删除链接下划线*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">text-transform : capitalize; /*首字大写*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">text-transform : uppercase; /*英文大写*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">text-transform : lowercase; /*英文小写*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">text-align:right; /*文字右对齐*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">text-align:left; /*文字左对齐*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">text-align:center; /*文字居中对齐*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">text-align:justify; /*文字分散对齐*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">vertical-align属性</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">vertical-align:top; /*垂直向上对齐*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">vertical-align:bottom; /*垂直向下对齐*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">vertical-align:middle; /*垂直居中对齐*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">vertical-align:text-top; /*文字垂直向上对齐*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">vertical-align:text-bottom; /*文字垂直向下对齐*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">2、</span>CSS边框空白</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">padding-top:10px; /*上边框留空白*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">padding-right:10px; /*右边框留空白*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">padding-bottom:10px; /*下边框留空白*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">padding-left:10px; /*左边框留空白</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">3、</span>CSS符号属性:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">list-style-type:none; /*不编号*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">list-style-type:decimal; /*阿拉伯数字*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">list-style-type:lower-roman; /*小写罗马数字*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">list-style-type:upper-roman; /*大写罗马数字*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">list-style-type:lower-alpha; /*小写英文字母*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">list-style-type:upper-alpha; /*大写英文字母*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">list-style-type:disc; /*实心圆形符号*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">list-style-type:circle; /*空心圆形符号*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">list-style-type:square; /*实心方形符号*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">list-style-image:url(/dot.gif); /*<span style="color: black;">照片</span>式符号*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">list-style-position: outside; /*凸排*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">list-style-position:inside; /*缩进*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">4、</span>CSS背景样式:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">/*背景颜色*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">bac<span style="color: black;">公斤</span>round:transparent; /*透视背景*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">bac<span style="color: black;">公斤</span>round-image : url(/image/bg.gif); /*背景<span style="color: black;">照片</span>*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">bac<span style="color: black;">公斤</span>round-attachment : fixed; /*浮水印固定背景*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">bac<span style="color: black;">公斤</span>round-repeat : repeat; /*重复<span style="color: black;">摆列</span>-网页默认*/</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">bac<span style="color: black;">公斤</span>roun</p>




JameBond 发表于 2024-9-10 01:02:48

我完全同意你的观点,说得太对了。

4lqedz 发表于 2024-10-12 23:10:36

回顾历史,我们感慨万千;放眼未来,我们信心百倍。

m5k1umn 发表于 2024-10-19 08:50:48

论坛外链网http://www.fok120.com/
页: [1]
查看完整版本: web前端css常用的样式集合