информатика 69-70(CSS).pptx

SABAQ 69-70 CSS  CSS Егер HTMLді үйдің кірпіштерден тұратын қаңқасына теңесек, онда CSS ті сол кірпіштерді үйлесімді түрде қалап, оларды біріктіріп тұрған цемент қоспасына теңеуге болады.Екеуінің бірі болмаса сайт та болмайды. Сонымен, CSS деген не және CSS деген HTML мен...

SABAQ 69-70 CSS  CSS Егер HTMLді үйдің кірпіштерден тұратын қаңқасына теңесек, онда CSS ті сол кірпіштерді үйлесімді түрде қалап, оларды біріктіріп тұрған цемент қоспасына теңеуге болады.Екеуінің бірі болмаса сайт та болмайды. Сонымен, CSS деген не және CSS деген HTML мен қалай байланысады. CSS дегеніміз ағылшынша Cascading Style Sheets , яғни қазақша стилдік каскад таблицалары деп аталады.|  CSS Біз HTML ге арналған сабақтан аздап болса да web парақшаны қалай жасауға болатынын көрдік.Ол көрген тәсіліміз тек бер жағы ғана.Бізге ол парақшаның ешкімнің сайт парақшасына ұқсамайтын өзгеше болғанын қалаймыз, яғни оны әрлендіруіміз керек.Міне осы әрлендіруді жасайтын сол CSS. HTML ді кірпішпен қаланып, төрт қабырғасы тұрғызылып және төбесі жабылған үйге ұқсатуға болады.Ал сол үйдің ішін сырлап, еденін төсеп, мебельдерін қойып дегендей т.б. әрекеттер жасайтын осы CSS.  CSS HTML ге қарағанда CSS тің синтаксисі күрделірек. Себебі, HTML дің бірнеше тегтерінің қалай пайдалану керектігін ұғып алған соң еш қиналмастан парақша бетін жаза беруіңізге болады.Ал CSS стилді белгілеу деп аталады яғни нюанстары көбірек, оның әр сипаттамасын біліп қана қоймай оны қай жерде қалай қолдануға болатынын да үйреніп алу керек.  CSS Сонымен, HTML тілімен бірге CSS ті қолданудың үш түрі бар. Енді осылардың әр қайсысына жеке-жеке тоқталып өтейін.Ескерту: Төмендегі кодтардың бәрі Notepad++ редакторында жазылған, оны компьютерге орнатудың түк қиындығы жоқ.Мен оны қалай орнату керектігіне тоқталып өткенмін, ол туралы барлық мағлұматты сілтеме арқылы таба аласыз. 1. Тікелей HTML тегінің ішінде "style" атрибутын орналастыру арқылы: Редактор бетіне төмендегі HTML парақшасының кодын көшіріп алыңдар. Ішінде р тегінде CSS ережесі орнатылған. Түсінікті болу үшін айтып өтейін:background-фон дегенді білдіреді, #00ff00-жасыл түстің коды, color-бояу түсі, red-қызыл түс. Нәтижесі төмендегідей болып шықты  Атрибут STYLE Практически каждый HTML тег имеет атрибут style, который говорит о том, что к этому тегу применяется некое стилевое описание. Пишетсяэто так: параграф с индивидуальным стилем Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента. Пример: это параграф с индивидуальным стилем пример резуль 2. Web парақшаның шапкасында, яғни арасына "style" елементі арқылы: CSS ті бейнелеудің екінші түрі жазылған төмендегі HTML парақшасының кодын тағы да Notepad ке көшіріп жазып алыңыздар. CSS  Тег Для того, что бы описать необходимые элементы одновременно на всей странице в заголовок HTML документа внедряют тег (не путайте с одноименным атрибутом) в котором и происходит описание нужных  Пример описания стилей: В данном случае стили описываются в заголовке документа между тегами HEAD!!!!! Использование тегов для которых описан стиль: Внутри тега идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису: Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой Ол файлды шақырғанда шыққан нәтиже төмендегідей: 3. CSS стильдер кодын осы парақ шапкасында арқылы сипатталып, жүктелетін бөлек файлға жазып қою арқылы: CSS ті қолданудың үшінші түрінде CSS ережелерін басқа файлға жазамыз.Мен оны testcss2.css деп жаздым да сол қалған файлдар салынған папкаға сақтап қойдым.Сіз де солай жасаңыз CSS Енді оны HTML парақшамның жоғары жағындағы аралығына link арқылы сипаттап жазамын.  енді осы html файлды ашамын, сонда мынадай нәтижесі бар HTML парақшам шығады.  Свойства текста Выравнивание текста  Свойства текста Выравнивание текста  Свойства текста Оформление текста text-decoration позволяет декорировать текст, присвоив ему одно или несколько значений из ниже представленных вариантов оформления текста: Ссылка без подчёркивания В файле CSS "декорировали" ссылку элемент , причем делали это два раза первый раз a {text-decoration: underline} сделали её подчёркнутой, хотя можно было этого и не делать, так как тег подчёркнут по умолчанию, а второй раз использовали так называемый псевдокласс hover и запретили подчеркивание a:hover {text-decoration:none}, Данный псевдокласс указывает на то, что  Свойства текста Отступ первой строкиtext-indent - задаёт отступ первой строки в Свойство текстовом блоке с левой стороны. Расстояние от левого края окна браузера или же элемента родителя (блока в который помещен блок с текстом) может быть заданно в процентах от ширины окна браузера или же единицах измерения принятых в CSS. В примере ниже расстояние отступа от левого края задаётся в пикселях (px):  Свойства текста Трансформация текста text-transform трансформирует символы в Своийство указанном текстовом блоке, делая их заглавными или прописными по одному из правил в зависимости от присужденного значения данному свойству.  Свойства текста Вертикальное выравнивание Вертикальное выравнивание текста в строке устанавливает свойство vertical-align Возможные значения свойства vertical-align:  Свойства текста Вертикальное выравнивание Базовая линия - это линия, на которой располагаются "сидят" символы в текстовой строке, Например буква "А" сидит прямо на этой линии, а вот строчная буква "у" сидит на ней же, но свесив ноги. Вертикальное выравнивание элемента относительно строки может выражаться в процентах, пикселях или любых других принятых в CSS единицах измерения, причем эти единицы могут принимать как положительные, так и отрицательные значения Свойства текста  Свойства текста Пробелы и перенос строки Набранный текст, в каком либо текстовом редакторе браузерами по умолчанию выводится на экран в виде сплошного текста, где переносы строк расставляются автоматически, а так же убираются лишние (более одного) пробелы между символами. Свойство white-space имитирует работу тега , определяя показывать или нет пробелы между символов, если таковых больше чем один, а так же разрешает или запрещает перенос строки.