Basic use of CSS_html/css_WEB-ITnose

Recommend a front-end learning website: http://www.w3school.com.cn/index.html. This article refines the basic knowledge of CSS. As a back-end developer, it is enough to know some basic front-end knowledge, and you can learn the rest as you encounter them.

Introduction to CSS

The full name of CSS is Cascading Style Sheets. The purpose of CSS is to convert html The content and presentation are separated, and through CSS, HTML will pay more attention to the content itself. Using CSS will allow you to define the displayed style in the global scope, and you can directly reference the markup when using it. The advantage is somewhat similar to the function in a programming language. It is defined in one place and used everywhere. By modifying the CSS at the definition point, it can be used. To modify the global style.

Basic syntax

Basic syntax of CSS

CSS rules are composed of two main parts: selection device, and one or more declarations.

selector {declaration1; declaration2; ... declarationN }

Selector is usually an HTML element that you need to change the style of. Each declaration consists of a property and a value.

The property is the style attribute you wish to set. Each attribute has a value. Properties and values ​​are separated by colons.

The following line of code is to define the text color within the h1 element as red and set the font size to 14 pixels.

In this example, h1 is the selector, color and font-size are attributes, and red and 14px are values.

h1 {color:red; font-size:14px;}

You should describe only one attribute per line to increase the readability of the style definition, like this:

     p {          text-align: center;          color: black;          font-family: arial;     }

It should be noted that CSS itself is not case-sensitive, but when referencing the class and id of CSS in HTML, its name is case-sensitive.

Group of selectors

You can group selectors so that grouped selectors can share the same statement. As shown below, all heading elements are green.

h1,h2,h3,h4,h5,h6 {  color: green;  }

Inheritance of properties

According to CSS, child elements inherit properties from their parent elements. Such as:

body {     font-family: Verdana, sans-serif;}

Through CSS inheritance, child elements will inherit the attributes owned by the highest-level element (in this case, body) (these child elements such as p, td, ul , ol, ul, li, dl, dt, and dd). No additional rules are needed, all child elements of the body should display the Verdana font, as well as the child elements of the child element.

CSS also supports special customization. Let's say you want the font of your paragraph to be Times. no problem. Create a special rule for p so that it gets rid of the parent element's rules:

     body  {     font-family: Verdana, sans-serif;     }     p  {     font-family: Times, "Times New Roman", serif;     }

Derived Selector

Derived selectors allow you to style a tag based on the context of the document. This gives you more fine-grained control over the scope of your styles.

For example, if you want the strong element in the list to be in italics instead of the usual bold, you can define a derived selector like this:

li strong {    font-style: italic;    font-weight: normal;  }

Please note the context of the blue code marked :

I am in bold, not italics, because I am not in the list , so this rule doesn't work for me

1. I'm in italics. This is because the strong element is inside a li element.
2. I am a normal font.

id selector

id selector can be marked with HTML elements with specific ids specify specific styles. The id selector is defined with "#".

     下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red {color:red;}#green {color:green;}

     下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

<p id="red">这个段落是红色。</p><p id="green">这个段落是绿色。</p>

     除了在每个标记下使用id选择器控制样式，id选择器还可以结合派生选择器做到进一步的精细控制。

#sidebar p {font-style: italic;text-align: right;margin-top: 0.5em;}

     上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。这个元素很可能是 div 或者是表格单元，尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素。

     即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：

#sidebar p {font-style: italic;text-align: right;margin-top: 0.5em;}

#sidebar h2 {font-size: 1em;font-weight: normal;font-style: italic;margin: 0;line-height: 1.5;text-align: right;}

     在这里，与页面中的其他 p 元素明显不同的是，sidebar 内的 p 元素得到了特殊的处理，同时，与页面中其他所有 h2 元素明显不同的是，sidebar 中的 h2 元素也得到了不同的特殊处理。

     id的用途通常是定义一种风格，结合派生选择器，在不同的元素下有不同的展现。

类选择器

     在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

     在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

     在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

<h1 id="This-heading-will-be-center-aligned">     This heading will be center-aligned</h1><p class="center">     This paragraph will also be center-aligned.</p>

     class 也可被用作派生选择器：

.fancy td {color: #f60;background: #666;}

     在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）

     元素也可以基于它们的类而被选择：

     td.fancy {color: #f60;background: #666;}

     在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。

<td class="fancy">    <p class="sycode">        作为派生选择器和基于类选择用法不同，派生选择器作为范围更大，而基于类的做法必须要在每一个具体的元素下使用该类才会生效。如上例基于类做法中，即使其他表格单元被fancy所修饰表格包含，也不具有此样式。  </p>  <p class="sycode">   <br>  </p>  <strong>CSS的作用域</strong>  <p class="sycode">        可以在三个作用域下定义CSS，以起到不同范围控制的作用。  </p>  <p class="sycode">   <br>  </p>  <p class="sycode">   <strong>内联样式</strong>  </p>  <p class="sycode">        内敛样式是最小作用域的CSS，使用这种方式将享受不到CSS带来的任何好处，要谨慎使用。  </p>  <p class="sycode">        要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：  </p>  <p class="sycode">   </p>
<pre name="code" class="sycode"><p style="color: sienna; margin-left: 20px">     This is a paragraph</p>

内部样式

     当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

     <style type="text/css">          hr {color: sienna;}                 p {margin-left: 20px;}          body {background-image: url("images/back40.gif");}     </style>

外部样式表          

     当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：     

     <link rel="stylesheet" type="text/css" href="mystyle.css">

     浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color: sienna;}p {margin-left: 20px;}body {background-image: url("images/back40.gif");}

优先级

     当一个样式在多个作用域中被定义时，会使用哪个样式呢？

1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表(位于标签内)
4. 内联样式(在HTML元素内部)

     从1-4，优先级逐渐增加。