Sayt dizayni bilan ishlash - Информатика и ИТ - Презентации

Sayt dizayni bilan ishlash

Загружено в:

28.07.2023

Скачано:

0

Размер:

6193.5 KB

Sayt dizayni bilan ishlash 1

• Режа: 1. CSS kodlar veb sahifa 2. A {text-decoration:none; } 3. CSS. Пример 4. Селекторы

3CSS – bu stillar bilan ishlay oladigan kaskadli stillar majmuasidir. Web sahifalarga har xil stillar berish uchun ishlatiladi. HTML xujjat ichida teglar bilan birga foydalaniladi. CSS kodlarini kompilyastiya qilish uchun qandaydir kompillyatorlar, qandaydir dasturlar, va bu kod tushuna oladigan qandaydir redaktorlar kerak bo’lmaydi. Bu kodlarni HTML singari web brauzerning o’zi kompilyastiya qiladi va natijani chiqarib beradi. Bu stillar jadvali(CSS) to’liq holatda 1997 yilda tashkil topib, “WWW Consorcium” ida qo’llab quvvatlangan va foydalanishga taqdim etilgan. O’sha paytlarda HTML ning 3 versiyasi ommabop edi. CSS ni dastlab Netscape Navigator 4.0 va Internet Explorer 4.0 brouzerlarida ko’rish mumkin bo’lgan. Hozirda barcha brouzerlar css da yozilgan kodlarni tushuna oladi. Bu stillarga oid dasturlash tilini o’rganish sodda bo’lib, yangi stillar qo’shilishi natijasida kengayib bormoqda.

1. Web sahifada ishlatiladigan CSS kodlari orqali hosil qilinadigan stillarni hammasini bitta faylga yozib, uni serverda saqlaymiz. So’ng, sahifadan, serverdagi saqlab qo’yilgan faylga murojaat qilib, kerakli stilni olamiz. Bu usul katta hajmdagi web sahifalar yaratishda foydali hisoblanadi. Faylga murojaat, <head> tegi ichida amalga oshiriladi va quyidagi ko’rinishga ega bo’ladi. <LINK REL=STYLESHEET TYPE=»text/css» HREF=»URL»> <link> tegi sahifa biror faylga murojaatni amalga oshirmoqda degani, REL – fayl qandaydir stillardan iborat degani, TYPE — stillar css kodlaridan iborat va fayl joylashgan manzil yoziladi.

52. CSS kodlar veb sahifa ichidagi <head> tegi orasida beriladi. Bunda yaratilgan stillar shu sahifaga tegishli bo’ladi, bu degani faqat shu sahifada ishlatilish mumkindir. <head>< STYLE TYPE=»text/css»> <!— A {text-decoration:none; } — > </—STYLE></head>

63. Navbatdagi turi, bu har bir element uchun alohida teg ichida stil berib chiqishdan iborat. Misol uchun, “p” tegi ichida biror matn yozilsa, shu matn uchun teg ichida alohida stil beriladi va bu stil shu teg uchun xususiy bo’ladi. Bu usuldan foydalanishni maslahat bermiman, chunki bu usul kodlarni chalkash va tushunarsiz bo’lishiga olib keladi. Shoshilinch vaziyatlarda yoki stil qay tartibda namoyon bo’lishni ko’rib olish uchun bu usuldan foydalanishni maslahat beraman. Undan tashqari <style> tegi orqali css faylni import qilish mumkin bo’ladi. @import: url(mystyles.css);

Клиентская часть 7Серве рКлиент CSSHTMLВерстка, структура Оформление форматирова ние Интерактивно сть, «общение» с сервером Javascript

CSS 8

CSS. Пример 9

Синтаксис 10

Синтаксис 11

Пример.Шрифт 12h1 { font-family : Georgia , serif ; }

Пример. Размер 13h1 { font-size: 60px; }

Селекторы 14• название тега • класс тега – class (.) • идентификатор тега – id (#) • атрибут тега – [] • * все элементы страницы

Селекторы тегов 15

Селекторы тегов 16

Селекторы идентификаторов 17

Селекторы идентификаторов 18

Селекторы классов 19

Селекторы классов 20

Селекторы атрибутов 21

Селекторы атрибутов 22

Комбинирование селекторов 23

Комбинирование селекторов 24

Группировка селекторов 25

$Конфликт селекторов? 26HTML: <div class="hello_class" id="hello_id">Привет, мир</div> CSS: div { font-size: 11pt; font-weight: bold; } #hello_id { font-size: 27pt; text-decoration: underline; } .hello_class { font-size: 14pt; font-style: italic; }$ Вес селекторов 27• название тега имеет вес 1 балл; • присвоенный тегу класс — 10 баллов; • идентификатор тега — 100 баллов. !important - способ явно повысить вес определенного CSS- свойства div { font-size: 11pt !important ; font-weight: bold; }

Вес селекторов 27• название тега имеет вес 1 балл; • присвоенный тегу класс — 10 баллов; • идентификатор тега — 100 баллов. !important - способ явно повысить вес определенного CSS- свойства div { font-size: 11pt !important ; font-weight: bold; }

Каскадирование стилей. Вес стилей 28• Стиль браузера. • Стиль пользователя. • Стиль автора. • Стиль автора с добавлением !important. • Стиль пользователя с добавлением ! important.

Псевдоклассы и псевдоэлементы 29• : active • : link • :focus • :hover • :visited • :first-child • :lang • : after • : before • :first-letter • :first-line селектор : псевдокласс селектор : псевдоэлемент

Текст. Цвет 30• p {color:green;} • p {color:rgb(0,255,0);} • p {color:#00ff00;} color

Текст. Выравнивание 31• p.ta1 {text-align:center;} (По центру) • p.ta2 {text-align:left;} (Слева) • p.ta3 {text-align:right;} (Справа) • p.ta4 {text-align:justify;} (По ширине) text-align

Текст. Выравнивание 32

Текст. Оформление 33

Текст. Отступ между словами и буквами в тексте 34

Текст. Отступ между словами и буквами в тексте 35

Текст. Другие свойства 36

Текст. Шрифт 37p {font-family:Arial;} Шрифт: font-family p.fz1 {font-size:20px;} Размер шрифта: font-size

Текст. Безопасные шрифты 38

Шрифт. Размер 39

Шрифт. Стиль 40

Оформление фона 41background-attachment background-color background-image background-position background-repeat background: body { background- color:green; } body { background- image:url('http://www.w isdomweb.ru/editor/spid er2.gif'); }

Оформление фона: цвет 42

Оформление фона: картинка 43

Оформление фона: картинка 44

Оформление фона: картинка 45

Оформление ссылок 46a:link - определяет оформление обычной не посещенной ссылки. a:visited - определяет оформление посещенной пользователем ссылки. а:hover - определяет оформление ссылки, на которую наведен курсор мыши. a:active - определяет оформление ссылки, на которую щелкнули мышкой.

Оформление ссылок 47

Оформление списков 48

Оформление таблиц 49

Блоковая модель 50

Блоковая модель 51

Блоковая модель 52

Стиль границ 53

Стиль границы в одной строке 54

Padding: внутренний отступ 55

Padding: внутренний отступ 56

Padding: краткая форма записи 57

Margin: внешний отступ 58

Скрытие элементов 59

Скрытие элементов 60

Блочные и строковые элементы 61

Блочные и строковые элементы 62

Размещение элементов 63#pos1 { position:absolute; top:10px; left:200px; }

Размещение элементов 64

Относительное размещение 65

Наложение элементов 66

Выравнивание с margin 67

Выравнивание с float 68

Float: обтекание элемента 69

Очищение от float 70

Способы подключения к HTML 71• Внутренние стили (внутри тегов, атрибут style) • Глобальные стили (указанные внутри тега style) • Связанные стили (отдельный файл CSS , подключение в html через link) • Импорт стилей (еще один вариант подключения внешних CSS- файлов)

Строковое подключение стиля 72<p style="font-size:1.3em"> Абзац оформленный с помощью CSS. </p>

Внутренние стили 73<head> <style type='text/css'> h1 {color:red;} p {margin-right:38px;} div {float:left;} </style> </head>

Подключение внешнего файла 74<head> <link rel="stylesheet" type="text/css" href=" адрес_внешнего_файла_стилей" /> </ head>

Похожие

WEB sayt яратиш

Elektron pochta bilan ishlash

Excelda diagrammalar bilan ishlash

Muloqot oynalari bilan ishlash

Pythonda sonlar bilan ishlash