admin 管理员组文章数量: 887017
2024年2月24日发(作者：easybcd怎么引导linux)
常用CSS代码大全（工作必备）
用html+css可以很方便的进行网页的排版布局，但不是每一种属性或者代码我们都铭记于心，最近我把CSS中的常用代码进行了归纳总结，方便自己以后查看，同时也分享给大家，希望对你们有用。
一.文本设置
1、font-size: 字号参数
2、font-style: 字体格式
3、font-weight: 字体粗细
4、颜色属性 color:
参数 注意使用网页安全色
二、超链接设置
text-decoration: 参数
主要目的是在浏览器显示文本链接时更改下划线。
参数取值范围：
underline：为文字加下划线
overline：为文字加上划线
line-through：为文字加删除线
blink：使文字闪烁
none：不显示上述任何效果
三、背景
1、背景颜色 padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70,
77); font-size: 16px; border-left: 1px solid rgb(128,
128, 128); background: rgb(238, 238, 238); box-shadow:
rgba(7, 17, 27, 0.05) 0px 4px 8px 0px; box-sizing:
border-box; border-radius: 8px; font-family:
"Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑,
Tahoma, Arial, sans-serif;">2、背景图片
background-image: url(URL)
URL就是背景图片的存放路径，none表示无。
3、背景图片重复 background-repeat: 参数
参数取值范围 ：
no-repeat：不重复平铺背景图片
repeat-x：使图片只在水平方向上平铺
repeat-y：使图片只在垂直方向上平铺
如果不指定背景图像重复属性，浏览器默认水平和垂直平铺背景图像。
4.固定背景图片固定背景图片控制背景图片是否随着网页的滚动而滚动。如果不设置背景图片的固定属性，浏览器默认的背景图片会随着网页的滚动而滚动。为了避免在滚动时分散观众对花哨背景图片的注意力，它通常被设置为固定
background-attachment: 参数
参数取值范围：
fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动
scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动
四、区块
1、单词间距
word-spacing: 间隔距离
2、字母间距
letter-spacing: 字母间距
3、文本对齐
text-align: 参数
参数的取值：
left：左对齐
right：右对齐
center：居中对齐
justify：相对左右对齐
4、垂直对齐
vertical-align: 参数
top：顶对齐
bottom：底对齐
text-top：相对文本顶对齐
text-bottom：相对文本底对齐
baseline：基准线对齐
middle：中心对齐
sub：以下标的形式显示
super：以上标的形式显示
5、文本缩进
text-indent: 缩进距离
12px相当于一个文字距离
6、空格
white-space: 参数
normal 正常
pre 保留
nowrap 不换行
7、显示样式
display: 参数
参数取值范围：
block：块级元素，在对象前后都换行
inline：在对象前后都不换行
list-item：在对象前后都换行，增加了项目符号
none：无显示
五、方框
1、height 高度 2、width 宽度 3、padding 内边距 4、margin 外边距 5、float（浮动）：可以让块级元素在一行中排列，例如横向菜单。 6、clear 清除浮动
六、边框
1、样式
border style 参数
边框样式的参数：
none：无边框
dotted：边框为点线
dashed：边框为长短线
solid：边框为实线
double：边框为双线
2、宽度
border width 参数
3、颜色 border color 参数
七、列表
list-style-type 列表样式
不同浏览器中的列表符号可能会有所不同，这可能会影响网页，所以网页中的列表大部分是通过背景图片来显示的。控制用户界面的样式
八、鼠标
cursor：鼠标形状参数
CSS鼠标形状参数表：
鼠标形状：CSS代码
style="cursor:hand" 手形
style="cursor:crosshair" 十字形
style="cursor:text" 文本形
style="cursor:wait" 沙漏形
style="cursor:move" 十字箭头形：
style="cursor:help" 问号形 style="cursor:e-resize" 右箭头形 style="cursor:n-resize"
上箭头形 style="cursor:nw-resize" 左上箭头形
style="cursor:w-resize" 左箭头形
style="cursor:s-resize" 下箭头形
style="cursor:se-resize" 右下箭头形
style="cursor:sw-resize" 左下箭头形
版权声明：本文标题：常用CSS代码大全(工作必备) 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1708771973h530958.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论