HTML/CSS/Text/quote

Материал из Web эксперт
Перейти к: навигация, поиск

Center Callout

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen">

  • .callout {
 display: block;
 width: 300px;
 margin: 20px auto;
 padding: 6px;
 position: relative;
 left: 0%;
 color: black;
 background-color: pink;
 border-left: 1px solid black;
 border-right: 1px solid black;
 border-top: 6px solid black;
 border-bottom: 6px solid black;

} </style> </head> <body> Centered Callout! </body> </html> 

</source>


Create quote with float: right

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CSS Positioning Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style rel="stylesheet" type="text/css"> div { 

 width: 400px;

} div,h1,p { 

 border: 1px solid #000000;
 margin: 5px;

} p#pullQuote { 

 float: right;
 width: 100px;

} </style> </head> <body>

Heading One

a pull-quote.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in neque. Etiam condimentum, dui sed sodales tristique, libero tellus bibendum felis, vel malesuada lacus mauris eget dui.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in neque. Etiam condimentum, dui sed sodales tristique, libero tellus bibendum felis, vel malesuada lacus mauris eget dui. Quisque condimentum volutpat sem. Nunc dictum. Morbi elit lacus, ultricies faucibus, adipiscing non, sollicitudin ut, arcu. Curabitur cursus odio eu felis.

</body> </html> 

</source>


Creating pull quotes in CSS

   <source lang="html4strict">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> 

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Creating pull quotes in CSS</title>

<style type="text/css" media="screen"> blockquote { 

   background: url(quote-open.gif) 0 0 no-repeat;
   margin: 2.4em 2em;

}

blockquote p { 

   color: #555555;
   font-size: 1.3em;
   font-weight: bold;
   text-align: justify;
   background: url(quote-close.gif) 100% 90% no-repeat;
   padding: 0 33px;
   margin-bottom: 0;

}

cite { 

   background: none;
   display: block;
   text-align: right;
   font-size: 1.1em;
   font-weight: normal;
   font-style: italic;

}

blockquote>p+p { 

   background: none;

} </style> </head> <body>

Article heading

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.

This is the quote. This is the quote. This is the quote. This is the quote. This is the quote. This is the quote. This is the quote. This is the quote. This is the quote. This is the quote. This is the quote. This is the quote. This is the quote. This is the quote. This is the quote. This is the quote.

First Name

This is the heading 2

this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. .

This is the level 3

this is a test. this is a test. this is a test. this is a test.

</body> </html> 

</source>


Pull Quote with font, border top bottom

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 

   <title></title>

<style type="text/css" title="text/css"> .pullQuote { 

   float: right;
   width: 180px;
   margin: 0 10px 5px 10px;
   font: italic bold 110% Arial,Helvetica, sans-serif;
   padding: 10px;
   border-top: 10px solid #666666;
   border-bottom: 10px solid #666666;

} </style> </head> <body>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam non eros sed tellus mollis sodales. Nulla et pede eu est placerat ultricies. Integer est. Cras eu lorem quis augue scelerisque cursus. Sed fermentum. Praesent mattis, velit vel hendrerit egestas, turpis risus cursus velit, nec luctus turpis sem ac sapien.

"Lorem ipsum dolor sit amet, . Integer est. Cras eu lorem quis augue scelerisque cursus. Sed fermentum. Praesent mattis, velit vel hendrerit egestas, turpis risus cursus velit, nec luctus turpis sem ac sapien."

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam non eros sed tellus mollis sodales. Nulla et pede eu est placerat ultricies. Integer est. Cras eu lorem quis augue scelerisque cursus. Sed fermentum. Praesent mattis, velit vel hendrerit egestas, turpis risus cursus velit, nec luctus turpis sem ac sapien.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam non eros sed tellus mollis sodales. Nulla et pede eu est placerat ultricies. Integer est. Cras eu lorem quis augue scelerisque cursus. Sed fermentum. Praesent mattis, velit vel hendrerit egestas, turpis risus cursus velit, nec luctus turpis sem ac sapien.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam non eros sed tellus mollis sodales. Nulla et pede eu est placerat ultricies. Integer est. Cras eu lorem quis augue scelerisque cursus. Sed fermentum. Praesent mattis, velit vel hendrerit egestas, turpis risus cursus velit, nec luctus turpis sem ac sapien.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam non eros sed tellus mollis sodales. Nulla et pede eu est placerat ultricies. Integer est. Cras eu lorem quis augue scelerisque cursus. Sed fermentum. Praesent mattis, velit vel hendrerit egestas, turpis risus cursus velit, nec luctus turpis sem ac sapien.

</body> </html> 

</source>


Quote with thick border

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title>A Web page</title>

<style type="text/css" media="Screen"> p { 

 font-family: Georgia, serif;
 font-size: 13px;
 color: red;
 padding-left: 25px;

} .quote { 

 width: 100px;
 font-family: Arial, sans-serif;
 color: white;
 font-size: 18px;
 padding: 5px 15px;
 margin-left: 70px;
 border-left: 5px solid white;
 border-right: 5px solid white;

} </style> </head> <body>

"A quote about something, displayed in black."

</body> </html> 

</source>


Right Floating Callout

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen">

  • .callout {
 float: right;
 width: 200px;
 padding: 6px;
 margin: 10px 30px 10px 40px;
 position: relative;
 top: 10px;
 background-color: pink;
 border-left: 1px solid red;
 border-right: 1px solid red;
 border-top: 6px solid black;
 border-bottom: 6px solid black;

} </style> </head> <body> Wraps under and over </body> </html> 

</source>


Using classes and CSS overrides to create an alternate pull quote

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> 

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title></title>

<style type="text/css" media="screen"> blockquote { 

   background: url(quote-open.gif) 0 0 no-repeat;
   margin: 2.4em 2em;

}

blockquote p { 

   background: url(quote-close.gif) 100% 90% no-repeat;
   padding: 0 33px;
   margin-bottom: 0;

}

cite { 

   background: none;
   display: block;
   text-align: right;

}

blockquote>p+p { 

   background: none;

}

blockquote.floatRight { 

   float: right;
   width: 150px;
   background: none;
   border-top: 5px solid #dddddd;
   border-bottom: 5px solid #dddddd;
   padding: 10px 0;
   margin: 0 0 2em 2.4em;

}

blockquote.floatRight p { 

   text-align: center;
   background: none;
   padding: 0;

} </style> </head> <body>

Article heading

This is the first paragraph. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.

This is the second. This is the second. This is the second. This is the second. This is the second. This is the second. This is the second. This is the second. This is the second. This is the second. This is the second.

This is a quote which is floating. this is a test. this is a test. this is a test.

First Name

This is the header 2

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph.

This is the headering

Nam scelerisque dignissim quam. Ut bibendum enim in orci. Vivamus ligula nunc, dictum a, tincidunt in, dignissim ac, odio.

Habitant morbid

This is a test This is another test. This is a test.

</body> </html> 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Text/quote&oldid=5881»