一、p标签语法与结构
<p>内容</p>
二、段落p标签使用说明:
常常我们在需要分段大换行时候,对内容前加<p>内容后加</p>即可实现文章换段落。
三、P段落标签使用案例
<p>我是p标签</p>
<p>我是第一段落,</p>
<p>我是第二段落;</p>
<p>我是第三段落,<br />我被br换行。</p>
<p><img src=""图片.jpg></p>
楼主单独为 p中出现了图片的元素定义样式就是了
p img {text-indent: 0
}
不过不建议楼主这样去写样式
p {line-height: 2em
text-indent: 2em
font-size: 14px
font-style: normal
}
弊端太多,网站建设中要用到各种各样的段落显示,并且<p>元素并不仅是显示段落,更多时候我们也把他当做块元素用,楼主这样用 你定义在P元素中的样式属性会影响到网页或网站中所有的P元素,在真正开发中会导致各种各样的问题,当然你只做一个页面除外。
我们最好不要直接给 页面元素定义太多样式
正确的定义方法 字体大小,字体样式,行高定义在body中 p会自动继承。
如果p要用到更多的样式,再好限定一个范围 如下:
.article p{line-height: 2em
color:yellow
background:blue
font-size:100em
}
CSS入门知识-图片水平对齐技巧
在CSS中,图片怎么水平对齐,有哪些技巧呢?我们一起来学习一下吧!
一、图片水平对齐text-align
在“文本水平对齐text-align”这一节我们详细讲解了text-align属性。大家请记住,text-align一般只用在两个地方:文本水平对齐和图片水平对齐。也就是说,text-align只对文本和img标签有效,对其他标签无效。
语法:
text-align:属性值
说明:
text-align属性取值如下表:
表1 text-align属性
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片水平对齐</title>
<style type="text/css">
p
{
width:300px
height:80px
border:1px solid gray
}
.p_img1{text-align:left}
.p_img2{text-align:center}
.p_img3{text-align:right}
img{width:60pxheight:60px}
</style>
</head>
<body>
<p class="p_img1">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</p>
<p class="p_img2">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</p>
<p class="p_img3">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</p>
</body>
</html>
在浏览器预览效果如下:
分析:
很多人都以为设置图片水平对齐是在img标签设置,其实这是错误的。大家记住,图片是要在父元素中进行水平对齐的。在这个例子中,img元素的父元素是p,img元素是相对于p元素进行水平对齐的。因此要想对图片进行水平对齐,就要在父元素(p元素)中设置text-align属性。