css常用样式标签

article/2025/8/3 10:49:11

css常用样式标签

css 字体的设置 font-family
font-size 设置字号大小
设置字体样式 font-style
normal : 正常显示。浏览器默认的样式
italic ：斜体显示文字
oblique : 歪斜体显示，比斜体的倾斜角度更大
font-weight 设置字体加粗可取值为hold和normal
调整字符间距 letter-spacing 可以设置两个字符之间的间距（英文，中文，数字）

调整单词间距 word-spacing 主要用于单词之间的距离。

<style>div,button{letter-spacing: 0.5em;word-spacing: 1em;}
</style><body><div>这是div1</div><div id="d2">hello world!</div><button>点击我</button>
</body>

添加文字修饰 text-decoration

under line 给文字加下划线

over line 给文字加上划线

line-through 给文字加删除线

案例

代码

<style>.gray{ color:gray;}.red{color:red;}.large{font-size: 1.5em;}.small{font-size:0.6em}#old{text-decoration: line-through;/*加删除线*/}.btn{background-color:#40c19d ;color: #ffffff;border-radius: 3px;padding:3px}</style></head><body><span class="gray">￥</span><span class="red large">49</span><span class="red">.00</span><span class="gray small" id="old">￥98.00</span><span class="btn">包邮</span></body>

设置文本排列方式

text-align (水平对齐)：left 、center 、right

水平对齐和垂直对齐

水平对齐分为三种：左、居中、右

left. Center.right【用于元素在块级里面】

垂直对齐分为三种: 顶端、居中、底部

【元素与元素之间】

元素之间的垂直对齐方式

<style>div,span{background-color: gray;text-align: center;}img{width: 100px; vertical-align: middle;}
</style>

调整行高 line-height

<style>div{line-height: 10px;}p{width: 100px;height: 50px;border:2px red dotted;text-align: center;line-height: 50px;}/*dotted 点线 solid 实线*/</style>
</head>
<body><div>hello <br> world</div><p>女士上衣</p>
</body>

让line-height等于自己的高度

设置垂直居中

boder 后面加3个值。像素、颜色、线型

color设置前景（字体）颜色

color：颜色关键字 | RGB函数 | 6位16进制数
CSS中设置背景颜色 background-color
插入背景图片：background-image

导入图片用url引入

如果取100%或cover将图片设置为和容器一样大

如果大小变小了，他会重复，因此现在用

用backgound-repeat：no-repeat；
background-size 背景图片的大小
background-repeat 设置背景图片的重复方式
background-position 背景图片的位置调整

background-attachment 可以使得背景图片固定

<style>body{background-image: url(./image/bg2.jpg);  /* 插入背景图片 */background-size: 200px  100px; /*背景图片的大小*/background-repeat:no-repeat ;  /*不重复*/background-position: center;   /*背景图片的位置调整*/min-height: 100vh;margin:0px;background-attachment: fixed; /*使背景图片固定*/}div{line-height: 10px; /*调整行高*/background-image: url(./image/bg1.jpg);}p{width: 100px;height: 800px;border:2px red dotted;  /*boder 后面加3个值。像素、颜色、线型*/text-align: center;  /*水平对齐*/line-height: 50px;}
</style>
</head>
<body><div>hello <br> world</div><p>花开富贵</p>
</body>

min-height 可视化高度
border

颜色 border-color 默认值为black

粗细 border-width 默认值为1.5

线型 border-style 无默认值
```
边框：broder
内边距：padding
盒子间距：margin
```
background-attachment：fixed；

设置背景图片固定，拉动滚动条，图片不动

案例

border:red 2px solid;
可以拆分为三个单独的样式。
border-color: green;
border-width: 5px;
border-style: outset;
border-top: red 2px dotted;
border-bottom: green 3px solid;
border-bottom-color: pink;

border-color:red; 四个共用
border-color:red green; 第一个分给上下 第二个分给左右
border-color:red green blue ; 第一个分给上，第二个分给左右，第三个分给下
border-color:red green blue purple; 按照顺时针方向，上 右 下 左

代码

 <style>div{border:5px solid;border-color:red green blue purple;}</style>
</head>
<body><div>hello <br> world</div><p>女士上衣</p>
</body>

列表样式

列表样式 list-style 或 list-style-type

取值：

disc : CSS1 默认值。实心圆

circle : CSS1 空心圆

square : CSS1 实心方块

decimal : CSS1 阿拉伯数字

lower-roman : CSS1 小写罗马数字

upper-roman : CSS1 大写罗马数字

lower-alpha : CSS1 小写英文字母

upper-alpha : CSS1 大写英文字母

none : CSS1 不使用项目符号

armenianl : CSS2 未支持。传统的亚美尼亚数字

cjk-ideographic : CSS2 未支持。浅白的表意数字

georgian : CSS2 未支持。传统的乔治数字

lower-greek : CSS2 未支持。基本的希腊小写字母

hebrew : CSS2 未支持。传统的希伯莱数字

hiragana : CSS2 未支持。日文平假名字符

hiragana-iroha : CSS2 未支持。日文平假名序号

katakana : CSS2 未支持。日文片假名字符

katakana-iroha : CSS2 未支持。日文片假名序号

lower-latin : CSS2 未支持。小写拉丁字母

upper-latin : CSS2 未支持。大写拉丁字母

none：没有列表符号。

案例

代码

<style>ul{border:1px gray solid;list-style:none ;padding:0px;width:120px;text-align: center;}li:hover{ border-color:#cccccc #999999;background-color: #999999;color:white;}li{font-weight: bold;border:8px solid;border-color:white;}</style></head><body><ul><li>Home</li><li>Contact us</li><li>Web Dev</li><li>Web Design</li><li>Map</li></ul></body>

数字