HTML Tutorials |
|
XML Tutorials |
|
Browser Scripting |
|
Server Scripting |
|
.NET (dotnet) |
|
Multimedia |
|
Web Building |
|
Java Tutorials |
|
Programming Langauges |
|
Soft Skills |
|
Database Tutorials |
|
Operating System |
|
Software Testing |
|
SAP Module |
|
Networking Programming |
|
Microsoft Office |
|
Accounting |
|
|
Le type de dispositif montrait une page Web telle qu'un écran d'ordinateur s'appelle Media. Comme concevoir votre site Web devient plus que juste un jeu de navigateur, mais avec de plus en plus les dispositifs non traditionnels tels qu'un tenu dans la main, un téléphone portable ou même votre montre voulant accéder au Web.
|
Types de supports de CSS
|
Vous voulez que votre page Web regarde à travers les dispositifs multiples. Le processus est aucun où aussi intimidant qu'il apparaissent, avec le soutien du niveau 2 de CSS des types de supports être parmi les outils simples toi peut employer pour aider à rendre votre emplacement vue-amical à travers des médias
|
3 manières d'indiquer des types de supports de CSS
|
Il y a trois manières d'attacher un type de supports à la feuille de modèle, ainsi notre CSS est appliqué seulement quand les médias d'un détail (IE : tenu dans la main) est employé pour regarder la page :
|
1) Feuilles liées de modèle :
|
Code de CSS
|
<link rel="stylesheet" type="text/css" media="print" href="print.css">
|
|
Avec la déclaration ci-dessus, « print.css » sera seulement appliqué à la page comme il a imprimé (ou vu en mode de prévision d'impression dans votre navigateur). Vous pouvez ajouter les feuilles liées additionnelles de modèle visant d'autres types de supports également. Comme note latérale, pour des documents de XML, l'équivalent de ce qui précède sera :
|
Le nom de l'état est la « pseudo classe » qui définit comment les éléments de HTML devraient apparaître, selon lesquels l'état il est po. Au-dessous de est un exemple de changer « lien », « visité état », et le de « vol plané ». Noter l'ordre qui sont définis, car il est la commande appropriée pour faire un lien de fonctionnement de CSS.
|
Code d'équivalent de XML
|
<?xml-stylesheet type="text/css" media="print" href="print.css" ?>
|
|
2) Feuilles importées de modèle :
|
Code de CSS
|
<style type="text/css" media="print, handheld">
@import "basic.css";
</style>
|
|
Les feuilles importées de modèle utilisées ici a l'avantage car il étant conditionnellement téléchargé, signifiant la feuille de modèle sera seulement téléchargé si les matchs de legs qui ont indiqué dans l'attribut de médias. Dans de bas dispositifs de largeur de bande tels que tenu dans la main, n'importe quelle épargne dans la largeur de bande inutile pourrait significatif. L'inconvénient de cette technique est actuellement le manque de à technique relative 1 de soutien de navigateur/dispositif) en haut.
|
3) Feuilles intégrées de modèle, par la règle de @media :
|
Code de CSS
|
<style type="text/css">
@media projection{
body{ background-color:#FFFFFF; }
#heading{ font-size:28px; }
}
</style>
|
|
Vous pouvez voir, quelque déclarations de CSS que vous souhaitez être appliqué en cas de « projection » devrait être enveloppé autour dans le bloc de @media.
|
La règle de @media
|
Au-dessous de l'exemple d'échantillon de la règle de @media
|
Code de CSS
|
<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}
@media print
{
p.test {font-family:times,serif; font-size:10px}
}
@media screen,print
{
p.test {font-weight:bold}
}
</style>
</head>
<body>
....
</body>
</html>
|
|
Les 10 types de supports suivants sont soutenus :
|
Pseudo-class |
Purpose |
all |
Suitable/intended for all devises (default). |
aural |
Intended for speech synthesizers. |
braille |
Intended for braille tactile feedback devices. |
embossed |
Intended for paged braille printers. |
handheld |
Intended for handheld devices (typically small screen, monochrome, limited bandwidth). |
print |
Intended for printed documents (applies to docs viewed in print preview mode too). |
projection |
Intended for projected presentations (ie: projectors or print to transparencies). |
screen |
Intended for computer screens. |
tty |
Intended for media using a fixed-pitch character grid (ie: teletypes or terminals). |
tv |
Intended for television-type devices. |
|
Keywords:
css media style sheet, media types, handheld devices, css media attribute
|
|
HTML Quizes |
|
XML Quizes |
|
Browser Scripting Quizes |
|
Server Scripting Quizes |
|
.NET (dotnet) Quizes |
|
Multimedia Quizes |
|
Web Building Quizes |
|
Java Quizes |
|
Programming Langauges Quizes |
|
Soft Skills Quizes |
|
Database Quizes |
|
Operating System Quizes |
|
Software Testing Quizes |
|
SAP Module Quizes |
|
Networking Programming Quizes |
|
Microsoft Office Quizes |
|
Accounting Quizes |
|
|