Technology sharing

Tribus modis CSS in paginis adhibetur: styli inlinei, schedae styli infixae, et schedae styli nexae

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Quomodo CSS styli in paginis adhibentur tres modos comprehendit: styli inlinei, schedae styli infixae, et schedae stili nexae.

1. Inline style

Inline stylus est stylus directus relative, directe intra HTML tag definitum et per stylum attributum implemented. Haec methodus ad discendum facilius est, sed non flexibilis.

Exemplum】Applicare genera inlinei ad paginam moderari.

  1. <!-- 在页面元素中定义CSS样式 -->
  2. <p style="font-size: 36px; color:red">您好，欢迎访问 pan_junbiao的博客</p>
  3. <p style="font-size: 24px; font-weight: bold;">您好，欢迎访问 pan_junbiao的博客</p>
  4. <p style="font-size: 18px; font-style: italic">您好，欢迎访问 pan_junbiao的博客</p>
  5. <p style="font-size: 14px; text-decoration: line-through;">您好，欢迎访问 pan_junbiao的博客</p>

Eventus:

2. Embedded style sheet

Rudis style embedded uti <style>...</style> Tags CSS styles in pagina includunt. Forma schedae inlinere non tam directae quam styli inlinei sunt, sed pagina magis regularis erit.

Exemplum】Utere chartis stilo infixis ad paginas tuas scribendas.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="author" content="pan_junbiao的博客">
  6.     <title>CSS在页面中使用的三种方式</title>
  7.     
  8.     <!-- 内嵌式样式表 -->
  9.     <style type="text/css">
  10.         h1, h2, h3{
  11.             font-family: Tahoma, Geneva, sans-serif; /*定义字体*/
  12.             color: blue; /*文字颜色*/
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <h1>大风起兮云飞扬</h1>
  18.     <h2>威加海内兮归故乡</h2>
  19.     <h3>安得猛士兮守四方</h3>
  20. </body>
  21. </html>

Eventus:

3. Coniunctum style sheet

CSS scheda externae conjunctionis modus est communissimus ad stylum referendum.Primum stilum CSS in fasciculo separato definire, deinde in pagina HTML transire<link> Tags ad ea referenda, haec est efficacissima ad stylos utendi CSS.

<link>Syntaxis structurae tagio haec est:

<link rel='stylesheet' href='path' type='text/css'>

rel: Relationes inter documentum externum et documentum vocantem.

href: absolutum vel relativum iter ad documentum CSS.

typus: MIME genus documenti externum

Exemplum】Relatio CSS styli in pagina.

(1) Facere directorium css, ac deinde fasciculum stili css.css in indicem crea.

  1. /*定义CSS样式 */
  2. h1,h2,h3{								
  3.     color:#6CFF;
  4.     font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  5. }
  6.  
  7. p{
  8.     color:#F0CC;	/*定义颜色*/
  9.     font-weight:200;
  10.     font-size:24px;	 /*设置字体大小*/
  11. }

(2) Transi in pagina<link> Tags CSS files stilo in paginam introducere.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="author" content="pan_junbiao的博客">
  6.     <title>CSS在页面中使用的三种方式</title>
  7.  
  8.     <!--页面引入CSS样式表-->
  9.     <link rel="stylesheet" type="text/css" href="/css/css.css">		
  10. </head>
  11. <body>
  12.     <h2>春夜喜雨</h2>
  13.     <p>好雨知时节，当春乃发生。</p>
  14. </body>
  15. </html>

Eventus:

 

4. prioritate style vocat

Ordo elocutionis prioritas vocat sequentia principia:

(1) Stylus definitus in inline stylo summam habet prioritatem.

(2) Alii styli propinquitatem principium sequuntur eo ordine quo in fasciculo HTML apparent vel referuntur.

(3) Ordo prioratus electorum est abnepos selector, classis electrix, ID selector, et prioritas in ordine decrescit.

(4) Styles not defined in any file will follow the default's style.

Personal profile

technologiae technologiae plus quam 30 annos operam dedit et in variis linguis proficit ut java, linux, javascript, php, css, etc. Multas contributiones in aperto fonte campo fecit elit documentorum statione ad communicandas quaestiones technologiarum progressus ad futuram referentiam

mihi contactus notitia

Mail