Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] CCS con dos tamaños de letra

 Estas en el tema de CCS con dos tamaños de letra en el foro de CSS en Foros del Web. Hola amigos: Quería solicitar vuestra amable ayuda nuevamente para solucionar un pequeño inconveniente: necesito que el tamaño de las letras de algunos párrafos sea diferente. ...
  #1 (permalink)  
Antiguo 20/01/2014, 12:33
 
Fecha de Ingreso: junio-2001
Mensajes: 277
Antigüedad: 23 años, 7 meses
Puntos: 1
CCS con dos tamaños de letra
Hola amigos:

Quería solicitar vuestra amable ayuda nuevamente para solucionar un pequeño inconveniente: necesito que el tamaño de las letras de algunos párrafos sea diferente. O sea, toda la página con un tamaño de letra 14px/1.8em y algunos párrafos con un tamaño de 12px/1.8em

Tengo definido p de este modo:

Código CSS: 
Ver original
  1. p {
  2.     margin:8px 0;
  3.     padding:0 0 8px 0;
  4.     font:normal 14px/1.8em Arial, Helvetica, sans-serif
  5. }

¿Es posible solucionarlo?

Muchas gracias por la ayuda, como siempre.


Este es el código CCS completo:

Código CSS: 
Ver original
  1. body {
  2.     margin:0;
  3.     padding:0;
  4.     width:100%;
  5.     color:#5f5f5f;
  6.     font:normal 12px/1.8em Arial, Helvetica, sans-serif
  7. }
  8. html, .main {
  9.     padding:0;
  10.     margin:0;
  11.     background:#fff
  12. }
  13. .clr {
  14.     clear:both;
  15.     padding:0;
  16.     margin:0;
  17.     width:100%;
  18.     font-size:0px;
  19.     line-height:0px
  20. }
  21. h1 {
  22.     margin:0;
  23.     padding:36px 0 32px 20px;
  24.     color:#fff799;
  25.     font:normal 40px/1.2em Arial, Helvetica, sans-serif;
  26.     text-transform:uppercase
  27. }
  28. h1 a, h1 a:hover {
  29.     color:#fff799;
  30.     text-decoration:none
  31. }
  32. h1 span {
  33.     color:#fff;
  34.     font-weight:bold
  35. }
  36. h1 small {
  37.     padding-left:126px;
  38.     font:normal 13px/1.2em Arial, Helvetica, sans-serif;
  39.     color:#fff;
  40.     text-transform:none
  41. }
  42. h2 {
  43.     font:bold 24px Arial, Helvetica, sans-serif;
  44.     color:#5f5f5f;
  45.     padding:8px 0;
  46.     margin:8px 0
  47. }
  48. p {
  49.     margin:8px 0;
  50.     padding:0 0 8px 0;
  51.     font:normal 14px/1.8em Arial, Helvetica, sans-serif
  52. }
  53. a {
  54.     color:#df732a;
  55.     text-decoration:underline
  56. }
  57. .header, .content, .fbg, .footer, form {
  58.     margin:0;
  59.     padding:0
  60. }
  61. .content_resize, .fbg_resize, .footer_resize {
  62.     margin:0 auto;
  63.     padding:0 40px;
  64.     width:890px
  65. }
  66. .hbg_resize {
  67.     margin:0 auto;
  68.     padding:0 40px 0 0;
  69.     width:930px
  70. }
  71. .content_resize, .fbg_resize {
  72.     padding:24px 40px
  73. }
  74. .header {
  75.     background:#462514 url(images/hbg_bg.jpg) repeat-x center top
  76. }
  77. .header_resize {
  78.     margin:0 auto;
  79.     padding:0;
  80.     width:970px
  81. }
  82. .header .logo {
  83.     padding-left:11px;
  84.     width:auto;
  85.     float:left
  86. }
  87. .header .hbg_r {
  88.     margin-left:30px !important;
  89.     margin-left:15px;
  90.     float:left;
  91.     width:420px;
  92.     color:#fff
  93. }
  94. .header .hbg_r a {
  95.     color:#fff799
  96. }
  97. .header img.hbgimg {
  98.     padding:20px 19px 0 0;
  99.     float:right
  100. }
  101. .header h2 {
  102.     margin:0;
  103.     padding:8px 0 0 0;
  104.     font:bold 24px/1.5em Arial, Helvetica, sans-serif;
  105.     color:#fff;
  106.     text-transform:uppercase
  107. }
  108. .header .nav_menu ul {
  109.     margin:0;
  110.     padding:16px 0 14px;
  111.     float:left;
  112.     width:auto;
  113.     list-style:none
  114. }
  115. .header .nav_menu ul li {
  116.     margin:0;
  117.     padding:0 2px;
  118.     float:left
  119. }
  120. .header .nav_menu ul li a {
  121.     display:block;
  122.     margin:0;
  123.     padding:4px 12px;
  124.     color:#fff;
  125.     text-decoration:none
  126. }
  127. .header .nav_menu ul li a:hover, .header .nav_menu ul li.active a {
  128.     background:#b1531f;
  129.     border-radius:4px;
  130.     -moz-border-radius:4px;
  131.     -webkit-border-radius:4px
  132. }
  133. .inner_copy {
  134.     border:0;
  135.     color:#f00;
  136.     float:right;
  137.     width:50% !important;
  138.     margin:-100% 0 0 0;
  139.     overflow:hidden;
  140.     line-height:0;
  141.     padding:0;
  142.     font-size:11px
  143. }
  144. .content {
  145. }
  146. .content_resize {
  147.     border-top:none
  148. }
  149. .content .mainbar {
  150.     margin:0;
  151.     padding:0;
  152.     float:left;
  153.     width:630px
  154. }
  155. .content .mainbar .article_vert {
  156.     margin:0;
  157.     padding:0 16px 0 0;
  158.     float:left;
  159.     width:297px
  160. }
  161. .content .mainbar .article img, .content .mainbar .article_vert img {
  162.     border:1px solid #dedede;
  163.     padding:3px
  164. }
  165. .content .mainbar img[src$="gran_libro_de_los_nombres.jpg"] {
  166.     padding:0 !important;
  167.     border:0 !important;
  168. }
  169. .content .mainbar img[src$="li_1.jpg"] {
  170.     padding:0 !important;
  171.     border:0 !important;
  172. }
  173. .content .mainbar .article img.ilf {
  174.     float:left;
  175.     margin:0 16px 8px 0
  176. }
  177. .content .mainbar .article, .content .sidebar .gadget {
  178.     margin:0;
  179.     padding:0 0 16px 0
  180. }
  181. .content .sidebar {
  182.     margin:0;
  183.     padding:0;
  184.     float:right;
  185.     width:236px
  186. }
  187. ul.sb_menu {
  188.     width:140px
  189. }
  190. ul.sb_menu, ul.ex_menu {
  191.     margin:0;
  192.     padding:0;
  193.     list-style:none;
  194.     color:#959595
  195. }
  196. ul.sb_menu li, ul.ex_menu li {
  197.     margin:0
  198. }
  199. ul.sb_menu li {
  200.     margin:4px 0;
  201.     padding:4px 0 0
  202. }
  203. ul.ex_menu li {
  204.     margin:4px 0;
  205.     padding:4px 0 0
  206. }
  207. ul.sb_menu li a {
  208.     padding-left:20px;
  209.     background:url(images/li.gif) no-repeat left center
  210. }
  211. ul.sb_menu li a, ul.ex_menu li a {
  212.     color:#5f5f5f;
  213.     text-decoration:none
  214. }
  215. ul.sb_menu li a:hover, ul.ex_menu li a:hover {
  216.     color:#df732a;
  217.     font-weight:bold
  218. }
  219. ul.ex_menu li a:hover {
  220.     text-decoration:none
  221. }
  222. .content .mainbar .comment {
  223.     margin:0;
  224.     padding:16px 0 0 0
  225. }
  226. .content .mainbar .comment img.userpic {
  227.     border:1px solid #dedede;
  228.     margin:10px 16px 0 0;
  229.     padding:0;
  230.     float:left
  231. }
  232. .fbg {
  233.     background:#dcbd99
  234. }
  235. .fbg_resize img {
  236.     border:1px solid #dedede
  237. }
  238. .fbg h2 {
  239.     color:#323a3f
  240. }
  241. .fbg a {
  242.     color:#fff
  243. }
  244. .fbg .col {
  245.     margin:0;
  246.     float:left
  247. }
  248. .fbg .c1 {
  249.     padding:0 16px 0 0;
  250.     width:290px
  251. }
  252. .fbg .c2 {
  253.     padding:0 16px;
  254.     width:290px
  255. }
  256. .fbg .c3 {
  257.     padding:0 0 0 16px;
  258.     width:240px
  259. }
  260. .fbg .c1 img {
  261.     margin:8px 16px 16px 0;
  262.     padding:0;
  263.     float:left
  264. }
  265. .fbg .c3 img {
  266.     margin:4px;
  267.     padding:0
  268. }
  269. .fbg ul.sb_menu {
  270.     padding-left:15px;
  271.     list-style:disc;
  272.     color:#df732a
  273. }
  274. .fbg ul.sb_menu a {
  275.     background:none;
  276.     padding-left:0
  277. }
  278. .footer {
  279.     padding-top:16px
  280. }
  281. .footer p.lf {
  282.     margin:0;
  283.     padding:4px 0;
  284.     float:left;
  285.     width:auto
  286. }
  287. ul.fmenu {
  288.     margin:0;
  289.     padding-bottom:12px;
  290.     list-style:none;
  291.     float:right;
  292.     width:auto
  293. }
  294. ul.fmenu li {
  295.     margin:0;
  296.     padding:0 2px;
  297.     float:left
  298. }
  299. ul.fmenu li a {
  300.     display:block;
  301.     padding:4px 8px;
  302.     color:#5f5f5f;
  303.     text-decoration:none
  304. }
  305. ul.fmenu li a:hover, ul.fmenu li.active a {
  306.     color:#fff;
  307.     background:#b1531f;
  308.     border-radius:4px;
  309.     -moz-border-radius:4px;
  310.     -webkit-border-radius:4px
  311. }
  312. ol {
  313.     margin:0;
  314.     padding:0;
  315.     list-style:none
  316. }
  317. ol li {
  318.     margin:0;
  319.     padding:0;
  320.     display:block;
  321.     clear:both
  322. }
  323. ol li label {
  324.     display:block;
  325.     margin:0;
  326.     padding:16px 0 0 0
  327. }
  328. ol li input.text {
  329.     width:480px;
  330.     border:1px solid #c0c0c0;
  331.     margin:2px 0;
  332.     padding:5px 2px;
  333.     height:16px;
  334.     background:#fff
  335. }
  336. ol li textarea {
  337.     width:480px;
  338.     border:1px solid #c0c0c0;
  339.     margin:2px 0;
  340.     padding:2px;
  341.     background:#fff
  342. }
  343. ol li .send {
  344.     margin:16px 0 0 0
  345. }
Última edición por pzin; 23/01/2014 a las 15:31 Razón: formato código
  #2 (permalink)  
Antiguo 20/01/2014, 12:45
Avatar de paxarin  
Fecha de Ingreso: enero-2010
Ubicación: Santander
Mensajes: 413
Antigüedad: 15 años
Puntos: 6
Respuesta: CCS con dos tamaños de letra
Una opción ya que supongo no sea siempre es hacer uso de la etiqueta <span></span>
luego al declaras en el css con lo que quieres que haga y solucionado.
Espero a verte ayudado.
__________________
http://www.paxarindesign.es
  #3 (permalink)  
Antiguo 20/01/2014, 16:31
Avatar de mdk
mdk
 
Fecha de Ingreso: noviembre-2002
Mensajes: 531
Antigüedad: 22 años, 2 meses
Puntos: 11
Respuesta: CCS con dos tamaños de letra
Puedes asignar a cada párrafo un estilo diferente, según lo prefieras. Te pongo a continuación varios ejemplos.

Código HTML:
<p style="font-size: 20px; color: #3a6ebc;">Primer ejemplo</p>
<p class="ejemplo">Segundo ejemplo</p>
<p id="ejemplo">Tercer ejemplo</p>
Primer ejemplo de CSS aplicando el estilo al parrafo.clase, parrafo#id


Código: 
<style type="text/css">
p.ejemplo { color: #ff0012; }
p#ejemplo { color: #228013; }
</style>
Segundo ejemplo de CSS aplicando el estilo al .parrafo, #id
Código: 
<style type="text/css">
.ejemplo { color: #ff0012; }
#ejemplo { color: #228013; }
</style>
Puedes usar cualquiera de los 2 métodos de CSS según te interese, o usar un estilo directamente en el párrafo.

Un saludo.
__________________
SoY Lo Ke VeS iNKLuSo KuAnDo No Me VeS ;)
  #4 (permalink)  
Antiguo 23/01/2014, 14:17
 
Fecha de Ingreso: junio-2001
Mensajes: 277
Antigüedad: 23 años, 7 meses
Puntos: 1
Respuesta: CCS con dos tamaños de letra
Muchas gracias mdk

Lo tendré en cuenta. Has sido muy amable y claro.

Etiquetas: estilo, fuentes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 00:57.