css中p标签可以插入img标签吗

html-css0148

css中p标签可以插入img标签吗,第1张

HTML <P>是段落标签,除了可以添加文字内容外,完全可以添加其他html标签也包括IMG图片标签。

一、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属性。