CSS样式技巧精要-优快云博客

一、文字的下划线、顶划线和删除线
text-decoration:underline overline     /*设置为下划线+顶划线，还可同时为line-through删除线或者设置一种或者两种*/
二、英文字母大小写：
text-transform:capitalize;      /*单词首字母大写*/
text-transform:upppercase;      /*全部大写*/
text-transform:lowercase;      /*全部小写*/
三、行间距和字间距：
字母间距：letter-spacing:xpt
单词间距：word-spacing:xpt
行距：line-height:xpt
四、段落对齐方式
水平对齐方式：在CSS中段落的水平对齐是通过属性text-align来控制的
垂直对齐方式：在CSS中段落文字的垂直对齐方式是通过vertical-align属性来具体实现的。
<style>

</style>
五、首字放大：
<style>
<!--
body{
background-color:black; /* 背景色 */
}
p{
font-size:15px; /* 文字大小 */
color:white; /* 文字颜色 */
}
p span{
font-size:60px; /* 首字大小 */
float:left; /* 首字下沉 */
padding-right:5px; /* 与右边的间隔 */
font-weight:bold; /* 粗体字 */
font-family:黑体; /* 黑体字 */
color:yellow; /* 字体颜色 */
}

应用时：
<body>
<p><span>中</span>秋节是远古天象崇拜——敬月习俗的遗痕

六、图片边框样式
<style>
.out {
position:relative; /*相对定位：*/
background:#bbb;
margin:10px auto;
width:285px
}
.in {
background:#fff;
border:1px solid #555;
padding:10px 5px;
position:relative;
top:-5px;
left:-5px;
}
</style>

img {border-color:red} 指四个边框色都是红色
img {border-color:red blue} 指上，下边框是红色，左右边框是蓝色
img {border-color:red blue yellow} 指上边框是红色，左右边框是蓝色，下边框是黄色
img {border-color:red blue yellow green} 指上，右，下，左边框分别是红色，蓝色，黄色和绿色

border-style属性

h1 {border-style:solid} 指边框为实线，none指没有边框，边框不显示，dotted指边框的样式为由短线组成的虚线，double指边框线为双线，双线再加上它们之间的空白部分的宽度就等于border-width设置的宽度，groove指3D沟槽状的边框，inset指3D内嵌边框，outset指3D外嵌边框

h1 {border-style:solid} 指四个边框都是实线
h1 {border-style:solid dotted} 指下，左边框值缺少，则取对边上，右值
h1 {border-style:solid dotted double} 指左边框缺少，则取右侧的边框值
h1 {border-style:solid dotted double ridge} 指四个边框都有值，按上，右，下，左分

七、设置图片与文字间距：
用float、margin-left、margin-right、margin-top等。
CSS中我们可以用float，来让文字在没有清理浮动的时候，显示在图片以外的空白处。如下所示：
把float设置成left，图片会显示在左边，而right则显示在右边，而margin-right是为了不让文字和图片贴在一起需要写的，如果你设置的是float:right;刚相应应该是把 margin-right改成margin-left：

转载于:https://www.cnblogs.com/carekee/articles/2094713.html