dir.by  
  Search  
Programming, development, testing
→
Html & CSS
→
CSS description
  Looked at 5324 times    
 What the CSS ? 
last updated: 5 February 2020
CSS - these are styles (font name, font size, horizontal text alignment, line thickness, ...)
CSS (Cascading Style Sheets) Cascading Document Styles
Placement of styles CSS
CSS fonts, sizes, etc. can be placed:
• inside an HTML file
• in a separate css file
CSS styles inside an HTML file
CSS styles are declared inside the section <style>
<style>
    name1 {style1}
    name2 {style2}
    name3 {style3}
    ...
</style>

Example!
  Html     CSS styles inside an HTML file
<html>

     <head>
          <!-- heading -->
          <meta charset="utf-8">
          <title>Example</title>

          <!-- CSS Styles -->
          <style>
               .my {color:green; font-weight:600;}
          </style>
     </head>

     <!-- page -->
     <body>
          <!-- we use the style my -->
          <font class="my">Hello!</font>
     </body>

</html>
Example result
CSS styles in the file .css
CSS the styles are described as follows:
name1 {style1}
name2 {style2}
name3 {style3}
...
connect the file css to file html
<link rel="stylesheet" href="CSS file name.css">
Example
  CSS     File 1.css
/* CSS Styles */
.my { color:green; font-weight:600; }
  Html     file 1.html
<html>

     <!-- page title -->
     <head>
          <meta charset="utf-8">
          <title>Example</title>
     </head>

     <!-- connect the file css -->
     <link rel="stylesheet" href="1.css">

     <!-- page -->
     <body>
          <font class="my">Hello!</font>
     </body>

</html>
Example result
How to connect CSS style in HTML element?
1. through the attribute class
2. through the attribute id
3. by element name
1. Connecting through the attribute class
HTML element
<... class="Style Name" ...>
CSS
.Style Name {Styles}
  Html     Example
<style>
     .my1 {color:red;}
</style>

<div class='my1'>
     Hello
</div>
2. Connecting through the attribute id
HTML element
<... id="Style Name" ...>
CSS
#Style Name {Styles}
  Html     Example
<style>
     #my2 {color:green;}
</style>

<div id='my2'>
     Good Morning
</div>
3. Connect by item name
HTML element
<Item Name ...>
CSS
Item Name {Styles}
  Html     Example
<style>
     a {color: orange}
</style>

<a href='https://dir.by'>
     Super
</a>
 
← Previous topic
HTML <canvas> drawing a snake with lines moveTo, lineTo
 
Next topic →
After modifying the file css , the browser displays old styles over and over again. Why?
 
Your feedback ... Comments ...
   
Your Name
Your comment (www links can only be added by a logged-in user)
  Объявления  
  Объявления  
 
HTML elements
• HTML tag <a> link to go to another page
• HTML tag <abbr> shows an abbreviated name, if you let the mouse down there will be a pop-up inscription
• HTML tags fieldset and legend. This is a frame with a title
• HTML tag <!-- --> comment
• style="border" in the HTML

HTML поиск элемента, элементов
• document.querySelector(...) это JavaScript метод для поиска элемента из document (то есть во всем HTML)
• yourElement.querySelectorAll(...) это JavaScript метод для поиска элементов внутри другого HTML элемента

HTML svg (vector graphics for drawing lines, rectangles, ellipses, ...)
• <svg> vector graphics, drawing a line<line>, rectangle <rect>, circle<circle>, text<text>

HTML canvas (drawing pictures, text, shapes)
• HTML <canvas> drawing a rectangle
• HTML <canvas> рисуем линии по нажатию мышкой на Canvas
• HTML <canvas> we draw pictures
• HTML <canvas> we draw a picture with a rotation
• HTML <canvas> draw a picture with horizontal reflection
• HTML <canvas> we draw a picture and text
• HTML <canvas> draw a picture many times in a rectangle (template)
• HTML <canvas> how to get mouse coordinates ? Determine the position of the mouse.
• HTML <canvas> drawing a snake with lines moveTo, lineTo
CSS
• CSS description
• After modifying the file css , the browser displays old styles over and over again. Why?
• Books to study CSS
CSS flex (элемент может растягиваться или сжиматься и таким образом заполнять свободное пространство)
• Что такое CSS flex
Freeze
• Шапка в таблице всегда видна при скролинге | freeze header in table | HTML
• Div всегда виден при скролинге (position:fixed, position:sticky) | freeze div | HTML
Do Popup using HTML and Javascript
• How to make a Popup window in a HTML page | Javascript, HTML, CSS
Motion and animation of pictures
• Анимация человечка на месте. Используем HTML элемент <div>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"
• Анимация человечка в движении (sprite). Используем HTML элементы <div>, <img>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"
• Рисуем картинку с движением. Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval
• Drawing a picture with movement and animation (sprite). Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval
Web страница на телефоне
• Открываю web страницу на телефоне в Google Chrome. Почему при двойном нажатии размер страницы увеличивается?
Верстка, дизайн страницы
• What the Front-end development?
• Как определить устройство (планшет, компьютер, телефон) сейчас используется в JavaScript, HTML
• Как сделать чтобы ваш сайт работал на телефоне, планшете, компьютере используем css media и max-device-width и min-device-width | HTML | CSS
• How to make your website fit in size on your phone, tablet? (HTML meta with attribute name='viewport')
• Correct layout HTML. Bad to use table. You need to use div
• Что такое Adaptive design (адаптивный дизайн)? Что такое Responsive design (отзывчивый дизайн) ?
• Меняем цвет scrollbar (полосы прокрутки) для HTML страницы. Используем CSS
WWW sites for learning
• Sites to explore HTML
  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика