1.字体:
body{font-family:"宋体";}2.设置斜体:
p a{font-style:italic;}3.为文字设置为下划线样式:
p a{text-decoration:underline;}
4.设置删除线:
.oldPrice{text-decoration:line-through;}5.段落排版-缩进:
p{text-indent:2em;}6.行间距(行高):
p{line-height:1.5em;}7.间距:设置文字间隔或者字母间隔可以使用letter-spacing 来实现,可以使用 word-spacing 来实现英文单词之间的间距
h1{letter-spacing:50px;}
h1{word-spacing:50px;}8.对齐:
h1{text-align:center;}
9.html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:
<img>、<input>
10.在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置
display:block
就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点
a{display:block;}11.内联元素:在html中,<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可以通过代码
display:inline
将元素设置为内联元素
div{display:inline;}
12.内联块状元素:同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素
a{
display:inline-block;
width:20px;/*在默认情况下宽度不起作用*/
height:20px;/*在默认情况下高度不起作用*/
background:pink;/*设置背景颜色为粉色*/
text-align:center; /*设置文本居中显示*/
}
13.盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)
p{border:2px dotted #ccc;}
dashed(虚线)| dotted(点线)| solid(实线)
14.为 p 标签单独设置下边框
div{border-bottom:1px solid red;}
15.宽度高度:css内定义的宽(width)和高(height),指的是填充以里的内容范围;一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
16.填充:元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可分为上、右、下、左(顺时针)
div{ padding-top:20px; padding-right:10px; padding-bottom:15px; padding-left:30px; }17.元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左
div{ margin-top:20px; margin-right:10px; margin-bottom:15px; margin-left:30px; }PS:padding和margin的区别,padding在边框里,margin在边框外