1.字体样式
p{
font-family:"黑体";//字体类型--注意字体类型加双引号“”
font-size:40px;//字体大小
font-style:oblique;//字体风格-斜体
font-weight:bold;//字体粗细
}
- font-style：normal（正常），italic（斜体），oblique（斜体）
- font-weight：norma（正常），bold（粗体），bolder（更粗体），lighter（细体）
（100-900,400normal，700bold）
2.文本样式
.class1{//类选择器
color:#b4c885;//颜色
text-align:center;//文本水平对齐方式
text-decoration:line-through;//文本线修饰
text-indent:40px;//首行缩进
line-height:80px;//行高
}
img{
vertical-align:middle;//文本垂直对齐方式
}
<p class="class1">第一段<br/>第二行<br/>第三行</p>
前面文字 <img src="bg.jpeg">后面文字
- color：由#开头的6位16进制数，可以通过”alt+左键”调出调色板
- text-align：文本水平对齐方式。只能应用于独占一行的标记（自带换行属性的块级标记：div，p等）
属性值：left，center，right - vertical-align：文本垂直对齐方式。只能用于与其他标记共处一行的标记（不带换行属性行内快标记：img，input，button等）
属性值：top，middle，bottom - text-decoration：文本的修饰（线）
属性值：none（无修饰），underline（下划线），overline（上划线），line-through（中划线/删除线） - text-indent：首行缩进
- line-height：行高。设置后文本内容会在这一行的垂直方向的正中间显示。
3.尺寸样式
.d1{//类选择器
width:200px;
height:200px;
}
<div class="d1">文本样式</div>
- 尺寸样式只支持独占一行显示标记使用。（div独占一行）
4.列表样式
ul{//标签选择器
list-style:none;
}
- list-style设置为none可以去掉列表前的图形或序号。
5.背景样式
.d1{//类选择器
background-color: #589621;//背景颜色
background-image: url(bg.jpeg);//背景图片--没有时可以设为none
background-repeat:repeat;//背景重复
background-size:100%;//背景平铺
}
<div class="d1"></div>
- background-repeat：背景重复
属性值： repeat（重复，直到铺满）， x-repeat（横向重复）， y-repeat（纵向重复），no-repeat（不重复） - background-size：背景大小
属性值：百分比
与background-repeat不能同时使用，属性值为100%，可以将图片平铺满。
6.鼠标样式
.d1{
cursor:pointer;
}
- cursor：设置鼠标样式
default（默认光标），pointer（小手-超链接的指针），wait（正忙），help（帮助-带小问号），text（指示文本），crosshair（十字号）
7.伪类样式
a:link{//未访问时
color:red;
}
a:visited{//访问后
color:orange;
}
a:hover{//鼠标悬停
font-size:50px;
color:yellow;
}
a:active{//单击未释放时
color:green;
}
<a href="https://www.126.com">126</a>
8.透明度样式
.d1{
width:300px;
height:100px;
background-color:orange;
position:absolute;
top:8px;
left:8px;
opacity:0.5;
}
<body>
一段可以变模糊的文字
<div class="d1">
</div>
</body>
- opacity:透明度
- 属性值：0-1，值越小越透明。
218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
