Стильдердің ережелердің анықтамасы

Үлгісі коды :

Сұрыптаушы {Қасиет 1: мағына ;Қасиет 2: мағына ;Қасиет 3: мағына ; Келесі бөлшектер көруге бұл жағдайда болады :

· Сұрыптаушы элементтері анықтайды, нақты атпен анықталатындар элементтің қайсыларға ереже қолданылады,.

· Фигуралық жақшаларда қасиет | мағына деген сөздер бар. Қасиеттер анықтайды , не сіздер бөлінген элементтермен істеуді қалаңыздар . Олар жеткілікті әр түрлі бола алады , және элемент түс , фон түс , позицияны , далалар , толтыру , әріп үлгісі сұрау қою , және көптеген басқа болуы мүмкін.

· Мағыналар әр элементтердің мағынасы болып табылады. Бұлар мағыналар қасиеттен тәуелді болады , мысалы , қасиеттің , түске әсер етеді , түс он алтылық мағыналары қабылдай алады , сондайлар rgb сияқты (12,134,22), немесе түстердің аттары , сондайлар red сияқты , green немесе blue .

Қасиеттер, жайға әсер етеді , далалар , енді , биікті және д . т . пикселде , em , пайыздарда , сантиметрлерде немесе өлшеу басқа ұқсас бірліктерінде өлшене алады .

Нақтылы үлгіге қазір қарайық :

P {Margin :5 px ;Font - family : arial ;Color : blue ; Мынау ереже HTML p элементін таңдайды — құжаттарында p әрбір элементіне арналған , коды мынау қолданады , ереже мынау қолданылады. Егер оларға қолданылатын тек қана бар болмаса нақтылы ереже көбірек , мына оқиғада ереже нақтылы ереже көбірек мынау қайтадан анықтайды . Мынау ереже қасиеттерге әсер етеді , параграфты айнала далаларды анықтайды ( margin ), параграфта мәтін әрібі ( font - family ), және мына мәтін түсі ( color ). Өрістер 5 пикселге мөлшермен сұраулар қояды , Arial сияқты әріп сұраулар қояды , ал blue . сияқты мәтін түсі сұраулар қояды.

Барлық жиын бұларды ережелердің стильдердің кестесін бірге қалыптастырады ( дайындаудың ). Мынау CSS тің ең жалпы бар болатын синтаксисы бар болады , бірақ көпсіз — мүмкін , ең бағалы қасиетімен оның қарапайымы келеді .

Түсініктемелері

Ең алдымен қажетті білу , қалай түсініктер жасау . Түсініктер үстейді , олардың орналаса аралық символдармен /*

және түсініктер бірнеше жолдың қамти алады , және жолдың бұлар браузер елемейді :

/*мынау элементтердің негіздік сұрыптаушылары*/Сұрыптаушы {Қасиет 1: мағына ;Қасиет 2: мағына ;Қасиет 3: мағына ;}Блоктық деңгей түсініктері тек қана болады — бір жолдық түсініктер бар болмайды .

Топқа біріктіру сұрыптаушылары

Әртүрлі сұрыптаушылар топқа ұйымдастыруға болады . Болжаймыз , сіздер h1 және p бірдей дайындауды қолдануды қалаңыздар , келесі болуға жазуға сол уақытта болады :

h1 {color:red}p {color:red}

Мынау , бірақ , өте жақсы , дәл осылай емес қалай бірдей хабар қайталанады . Коды қысқартуға сондықтан болады , үтірлер арқасында сұрыптаушылар топтай — жақшаларда ережелер сұрыптаушыларға екеулерге қолданылады :

h1, p {color:red}

Әртүрлі сұрыптаушылар бірнеше бар болады , әрбір қайсылардың белгі әртүрлі бөлімдеріне талапқа сай болады . Үшпен жалпы сұрыптаушылармен ең , жиірек кездеседі барлығы , келесіге келеді :

· p {}: селектор элемента·

барлық р элементтерге сай келеді

· .example{}: селектор класса·

Элементтерге бәріне талапқа сай болады , көрсетілген мағынамен class атрибутын болады , дәл осылай не үлгі жоғарырақ талапқа сай болады < p class =" example ">,< li class =" example "> немесе < div class =" example ">, немесе - басқа элементте мағынамен бірдей example . class белгілеп қоямыз , не сынып сұрыптаушылары элемент ешқандай нақтылы атын тексермейді .

· #example{}: селектор id·

Элементтерге бәріне талапқа сай болады , көрсетілген мағынамен id атрибутын болады , дәл осылай не үлгі соотвествоватьты жоғарырақ болады < p id =" example ">,< li id =" example "> немесе < div id =" example ">, немесе - басқа элементте мағынамен бірдей example . id белгілеп қоямыз , не сұрыптаушылары ешқандай элемент атын тексермейді , және бір сұрыптаушы тек қана болуға болады үшін әрбірдің құжатта - олар әрбір беттердің артынан бірегей келеді .

Лекция №14 CSS қосымша селекторлары.

Мысалдар

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>References</title> <style type="text/css"> @import url("styles.css"); </style></head> <body> <div id="bggraphic"></div> <div id="header"> <h1>References</h1> </div> <div id="references"> <cite class="article">Adams, J. R. (2008). The Benefits of Valid Markup: A Post-Modernistic Approach to Developing Web Sites. <em>The Journal of Awesome Web Standards, 15:7,</em> 57-62.</cite> <cite class="book">Baker, S. (2006). <em>Validate Your Pages.... Or Else!. </em> Detroit, MI: Are you out of your mind publishers.</cite> <cite class="article">Lane, J. C. (2007). Dude, HTML 4, that's like so 2000. <em>The Journal that Publishes Genius, 1:2, </em> 12-34.</cite> <cite class="website">Smith, J. Q. (2005). <em>Web Standards and You. </em> Retrieved May 3, 2007 from Web standards and you.</cite> </div> <div id="footer"> <p>The content of this page is copyright © 2007 <a href="mailto:[email protected]">J. Lane</a></p> </div></body></html> Основные моменты, которые необходимо отметить, следующие:

Строка 1 представляет так называемое объявление типа документа, или doctype. В данном случае страница имеет тип XHTML 1.0 Transitional. Тип документа определяет множество правил, которым следует разметка, и согласно которым будет проверяться.

Строки с 5 по 7 импортируют файл CSS на страницу - стили, содержащиеся в этом файле будут применяться к различным элементам на странице. Содержимое этого файла CSS, который управляет всем форматированием страницы, рассмотрим следующем примере.

Для каждого из различных типов ссылок созданы различные классы. Это позволяет применить различные стили оформления для каждого типа ссылок — например, в данном примере справа от каждой ссылки помещен специальный цветовой индикатор, чтобы облегчить просмотр списка.

Рассмотрим файл CSS, который оформляет этот HTML.

Styles.css

body {background: #fff url('images/gradbg.jpg') top left repeat-x; color: #000; margin: 0; padding:0; border: 0; font-family: Verdana, Arial, sans-serif; font-size: 1em;}div {width: 800px; margin: 0 auto;}#bggraphic {background: url('images/pen.png') top left no-repeat; height: 278px; width: 362px; position: absolute; left: 50%; z-index: -100;} h1 {text-align: center; text-transform: uppercase; font-size: 1.5em; margin-bottom: 30px; background: url('images/headbg.png') top left repeat; padding: 10px 0;} #references cite {margin: 1em 0 0 3em; text-indent: -3em; display: block; font-style: normal; padding-right: 3px;}.website {border-right: 5px solid blue;}.book {border-right: 5px solid red;}.article {border-right: 5px solid green;} #footer {font-size: 0.5em; border-top: 1px solid #000; margin-top: 20px;}#footer a {color: #000; text-decoration: none;}#footer a:hover{text-decoration: underline;}

Стильдердің ережелердің анықтамасы - student2.ru