165652 vues

CSS

Sébastien Merour
publié le 13/06/2020 à 16h15 | modifé le 13/06/2020 à 19h00
Catégorie : LangagesCommentaires (1078)
CSS
Description

Le CSS (Cascading Styles Sheets) est un langage informatique permettant de décrire le style, la présentation d'un document HTML. Là où le HTML va se contenter de structurer un document, le CSS va prendre en charge le style, la mise en page d'une page web.

En réalité, le HTML n'a jamais eu besoin du langage CSS pour être exécuté sur un navigateur web. Cependant, le CSS est devenu rapidement une nécessité afin de séparer ce qui relève purement et simplement de la structure d'une page web (c'est le rôle du HTML), de ce qui relève de la mie en page (formes, couleurs, polices de caractères....).

Le style d'une page web peut être défini de 3 façons :

-soit directement dans la page HTML (avec par exemple la balise style, située dans la partie HEAD de la page)

-soit en mode inline (exemple : utilisation de la balise strong pour mettre en gras un texte)

-soit grâce à un fichier CSS, référencé dans la section HEAD de la page.

Il est évident qu'il est préférable d'utiliser la 3ème méthode. En effet : imaginons qu'un développeur souhaite modifier complètement le design d'un site web, sans pour autant modifier la structure des pages web. C'est là que le fichier CSS a son intérêt : le développeur pourra modifier le style du site en ne modifiant que le fichier CSS du site. Ce sera d'autant plus utile si le site web contient de très nombreuses pages.

Il est possible également qu'une page web ou qu'un site fasse appel à plusieurs fichiers CSS. Par exemple, il est fréquent de voir un fichier CSS différent pour chaque taille d'écran, afin de rendre un site 100% responsive.

Par ailleurs, le CSS est devenu de plus en plus puissant au fil des années. Désormais, le CSS permet d'afficher par exemple des animations, ou des graphiques particulièrement complexes.

Les sélecteurs

Le principe du CSS repose sur la sélection : on sélecte un élément (par exemple un type de balise, ou bien une balise possédant un identifiant) pour lui appliquer un style. On pourra par exemple appliquer une couleur rouge pour tous les titres de type H3.

Box Model

Tous les élements HTML (une image, un paragraphe, un formulaire...) peut être considéré comme une boîte. Pour définir cette boîte, on utilise 4 élements :

- Margin (Marge - l'espace qui est en dehors de la bordure)

- Border (Bordure - la bordure qui est autour du padding)

- Padding (Ecart - l'écart entre le contenu et la bordure)

- Content (Contenu - par exemple le texte et les images)

Grid

Grid est un principe CSS permettant d'afficher un Layout en mode "grille". Le développeur peut utiliser ce principe pour positionner des éléments dans une grille, en faisant varier par exemple la taille de chaque case, ou l'orientation de chaque rangée, etc...

Pour afficher un layout en mode Grid, il est nécessaire d'insérer l'instruction display: grid

Flexbox

Auparavant, nous avions 4 formats de Layouts possibles :

- Block, pour les sections d'une page

- Inline, pour le texte

- Table, pour afficher un tableau

- Positioned, pour positionner explicitement un élément.

L'arrivée du concept du Flexbox facilite la création de layout, sans avoir à utiliser les notions de float ou de position.

Pour activer la notion de flexbox sur un élément, il est nécessaire d'appliquer un affichage flex avec l'instruction display: flex

Les proprités d'un conteneur Flex sont les suivantes :

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

Fonctionnalités
Style / Mise en page
Date de création
17/12/1996
Créateur
W3C
Dernière version
3
Langage
CSS
Liens
Aux dernières nouvelles
Depuis 2010, CSS est censé évoluer vers sa version 4. Mais suite au succès de HTML 5 couplé avec CSS 3, il est possible que CSS 4 ne voit jamais le jour, où bien que la notion de version (5 pour HTML et 3 pour CSS) disparaisse, pour devenir des langages en constante évolution.

1078 Commentaire(s)
  1. user
    WilliamRew
    24/11/2024 à 11h22  commentaire modifé
    九州娛樂 THA娛樂城與九州娛樂簡介 THA娛樂城是九州娛樂旗下的一個知名線上娛樂平台,致力於為玩家提供多元化且優質的娛樂服務。九州娛樂是亞洲地區領先的線上娛樂品牌,長期專注於打造穩定、公平且充滿樂趣的遊戲環境,旗下擁有多個知名娛樂平台,而THA娛樂城便是其中的一個旗艦產品。以下將詳細介紹THA娛樂城的特色與服務。 THA娛樂城的遊戲種類 THA娛樂城為玩家提供了多樣化的遊戲選擇,滿足不同玩家的需求與興趣,包括以下幾大類別: 1. 體育投注 體育迷可以在THA娛樂城享受豐富的體育賽事投注,涵蓋足球、籃球、網球等多項國際體育比賽。平台提供即時賠率和多種投注選項,讓玩家隨時掌握比賽動態並進行下注。 2. 真人娛樂 真人娛樂區提供即時互動的遊戲體驗,玩家可透過直播技術與真人荷官互動,遊玩如百家樂、輪盤、骰寶等經典遊戲。這不僅增添了真實感,更讓玩家有身臨其境的感受。 3. 電子老虎機 THA娛樂城匯集了多款高人氣的電子老虎機遊戲,從經典水果機到新潮主題機,皆配備精美的畫面與流暢的操作介面,為玩家帶來無限樂趣。 4. 捕魚遊戲 捕魚遊戲是許多玩家的最愛,THA娛樂城提供多種精美場景和豐富玩法的捕魚遊戲,玩家可以挑戰高額獎勵,享受射擊與策略結合的獨特樂趣。 5. 彩票與其他遊戲 除了以上幾類,平台還提供彩票遊戲及其他創新型娛樂遊戲,適合喜歡嘗試新鮮玩法的玩家。 九州娛樂的技術支持 作為THA娛樂城的母公司,九州娛樂以其強大的技術實力與嚴謹的管理體系為平台提供支持。九州娛樂採用國際領先的安全加密技術,確保玩家的個人資訊與交易數據得到妥善保護。此外,平台的遊戲結果皆經過嚴格的隨機性測試與第三方機構認證,保證公平公正。 優質的會員服務 THA娛樂城致力於打造一個高品質的會員體驗,其服務特色包括: - 優惠活動 平台定期推出多種促銷活動,如新會員註冊禮金、存款返利、週週回饋等,讓玩家享受更多的遊戲資金。 - 快速出入金 平台提供便捷且快速的存提款服務,玩家可以安心進行資金操作,且無需擔心延遲問題。 - 24小時客戶服務 為了確保玩家的需求能即時被解決,THA娛樂城提供全年無休的客服支援,無論是遊戲問題還是技術諮詢,客服團隊都能快速回應。 與其他平台的區別 THA娛樂城之所以能在眾多線上娛樂平台中脫穎而出,不僅因其豐富的遊戲種類與高品質服務,更在於它所帶來的獨特價值: 1. 品牌信譽 作為九州娛樂旗下的品牌,THA娛樂城擁有長期積累的良好信譽,是許多玩家的首選。 2. 創新與多樣性 平台不斷推出新遊戲與創意玩法,讓玩家始終保持新鮮感。 3. 本地化服務 THA娛樂城深諳玩家需求,提供多語言支援與符合本地習慣的服務,提升玩家的使用便利性。 未來展望 隨著線上娛樂行業的快速發展,THA娛樂城也在持續進步與創新,力求為玩家帶來更多驚喜。無論是透過引進新的遊戲技術、擴展遊戲種類,還是改善服務品質,THA娛樂城都希望成為每位玩家的最佳娛樂夥伴。 總結來說,THA娛樂城憑藉其豐富的遊戲內容、可靠的技術支持以及優質的會員服務,已在亞洲娛樂市場佔有一席之地。如果您正在尋找一個結合刺激與信賴的娛樂平台,那麼THA娛樂城絕對值得一試。

  2. user
    Howardabemy
    24/11/2024 à 10h54  commentaire modifé
    Привет всем! Долго не мог уяснить как поднять параметры Ahrefs, Domain Rank, сайт и свои проекты и узнал >>> Прогон ссылок Хрумером помогает ускорить увеличение DR и улучшить Ahrefs. Массовое создание ссылок с помощью Xrumer значительно повышает видимость сайта. Программы для линкбилдинга помогают ускорить процесс получения ссылок. Автоматизация постинга на форумах с Xrumer ускоряет рост ссылочной массы. Начните использовать Xrumer для успешного SEO-продвижения. Нашел крутых ребят, разработали недорогой и главное продуктивный прогон Хрумером - https://yandex.com/search/?text=%D0%BF%D1%80%D0%BE%D0%B3%D0%BE%D0%BD+bullet&lr=10466 Техники увеличения ссылочной массы Улучшение DR через Xrumer Xrumer: настройка для SEO Автоматическое размещение ссылок https://santamail.site Удачи и роста в топах!

  3. user
    Howardabemy
    24/11/2024 à 08h28  commentaire modifé
    Здравствуйте! Долго не мог уяснить как поднять параметры Ahrefs, Domain Rank, сайт и свои проекты и узнал >>> Прогон ссылок с Xrumer помогает быстро и эффективно увеличить DR и улучшить показатели Ahrefs. Массовые рассылки на форумах ускоряют процесс линкбилдинга. Программы для линкбилдинга помогают создать качественные внешние ссылки. Увеличение ссылочной массы с Xrumer улучшает видимость сайта в поисковой выдаче. Попробуйте Xrumer для эффективного SEO-продвижения. Нашел крутых ребят, разработали недорогой и главное продуктивный прогон Хрумером - https://yandex.com/search/?text=%D0%BF%D1%80%D0%BE%D0%B3%D0%BE%D0%BD+bullet&lr=10466 Как поднять DR Ahrefs SEO-прогон для повышения позиций Xrumer: настройка и запуск Форумные проги для SEO https://santamail.site/ Удачи и роста в топах!

  4. user
    Howardabemy
    24/11/2024 à 08h22  commentaire modifé
    Привет всем! Долго думал как поднять параметры Ahrefs, Domain Rank, сайт и свои проекты и узнал >>> Форумный спам с Xrumer помогает увеличить DR и Ahrefs показателя. Автоматический прогон ссылок позволяет быстро создать качественные внешние ссылки. Программы для линкбилдинга, такие как Xrumer, экономят время и силы. Увеличение ссылочной массы с помощью Xrumer даёт значительный рост. Используйте Xrumer для улучшения SEO-позиции вашего сайта. Нашел крутых ребят, разработали недорогой и главное продуктивный прогон Xrumer - https://yandex.com/search/?text=%D0%BF%D1%80%D0%BE%D0%B3%D0%BE%D0%BD+bullet&lr=10466 Программы для линкбилдинга Прогон Хрумер для сайта Как поднять DR Ahrefs SEO рассылки форумов https://santamail.site Удачи и роста в топах!

  5. user
    Howardabemy
    23/11/2024 à 22h03  commentaire modifé
    Привет всем! Долго обмозговывал как поднять параметры Ahrefs, Domain Rank, сайт и свои проекты и узнал >>> С помощью Xrumer вы можете быстро повысить DR и улучшить показатели Ahrefs. Прогон ссылок на форумах с Xrumer позволяет создавать качественные внешние ссылки. Массовые рассылки ссылок ускоряют продвижение сайта. Программы для линкбилдинга позволяют вам улучшить ссылочную массу с минимальными усилиями. Попробуйте Xrumer для эффективного линкбилдинга. Нашел крутых ребят, разработали недорогой и главное продуктивный прогон Xrumer - https://yandex.com/search/?text=%D0%BF%D1%80%D0%BE%D0%B3%D0%BE%D0%BD+bullet&lr=10466 Рассылки с помощью Xrumer Xrumer 2024: советы по настройке Ахрефс показатели сайта Автоматический линкбилдинг Xrumer https://santamail.site/ Удачи и роста в топах!

Ajoutez un commentaire :