Home >Web Front-end >HTML Tutorial >Starting CSS from scratch (1 2016/9/21)
Starting CSS from scratch (1 2016/9/21)
- WBOYOriginal
- 2016-09-22 08:42:151115browse
1.Basic grammar
CSS rules consist of two main parts: a selector, and one or more declarations.
<span style="color: #800000;">selector </span>{<span style="color: #ff0000;">declaration1; declaration2; ... declarationN </span>}
Selectors are usually HTML elements that need to be styled.
Each declaration consists of an attribute and a value.
Property is the style attribute you wish to set. Each attribute has a value. Properties and values are separated by colons.
<span style="color: #800000;">selector </span>{<span style="color: #ff0000;">property</span>:<span style="color: #0000ff;"> value</span>}
The following line of code sets the text color within the h1 element to red and sets 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.
<span style="color: #800000;">h1</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">14px</span>;}
Most stylesheets contain more than one rule, and most rules contain more than one declaration. Multiple declarations and the use of whitespace make stylesheets easier to edit:
<span style="color: #800000;">body </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #000</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
font-family</span>:<span style="color: #0000ff;"> Georgia, Palatino, serif</span>;
}
2.Advanced Grammar
① Grouping of selectors. You can group selectors so that grouped selectors share the same declaration. Use commas to separate selectors that need to be grouped. In the example below, we have grouped all heading elements. All title elements are green.
<span style="color: #800000;">h1,h2,h3,h4,h5,h6 </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> green</span>;
}
② Inheritance
According to CSS, child elements inherit properties from their parent element. But it doesn't always work this way. Take a look at this rule:
<span style="color: #800000;">body </span>{<span style="color: #ff0000;">
font-family</span>:<span style="color: #0000ff;"> Verdana, sans-serif</span>;
}
According to the above rule, the body element of the site will use the Verdana font (assuming that font exists on the visitor's system).
With CSS inheritance, child elements such as p, td, ul, ol, ul, li, dl, dt, and dd will inherit the properties owned by the top-level element (in this case, body). 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. And in most modern browsers, this is indeed the case.
3.CSS derived selector
You can make markup more concise by defining styles based on the context of an element's location.
In the example below, only the strong element in the li element is styled in italics. There is no need to define a special class or id for the strong element, and the code is more concise.
<span style="color: #800000;">li strong </span>{<span style="color: #ff0000;">
font-style</span>:<span style="color: #0000ff;"> italic</span>;<span style="color: #ff0000;">
font-weight</span>:<span style="color: #0000ff;"> normal</span>;
}
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">><</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用<span style="color: #0000ff;"></</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>我是斜体字。这是因为 strong 元素位于 li 元素内。<span style="color: #0000ff;"></</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>我是正常的字体。<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>
4 ID Selector
The id selector can specify a specific style for HTML elements marked with a specific id. The id selector is defined with "#".
The following two id selectors, the first one can define the color of the element as red, and the second one can define the color of the element as green:
<span style="color: #800000;">#red </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;}<span style="color: #800000;">
#green </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">green</span>;}
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="red"</span><span style="color: #0000ff;">></span>这个段落是红色。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="green"</span><span style="color: #0000ff;">></span>这个段落是绿色。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
① id selector and derived selector
In modern layouts, id selectors are often used to create derived selectors.
The above style will only be applied to paragraphs that appear within elements whose id is sidebar. This element is most likely a div or table cell, although it could also be a table or other block-level element.
<span style="color: #800000;">#sidebar p </span>{<span style="color: #ff0000;">
font-style</span>:<span style="color: #0000ff;"> italic</span>;<span style="color: #ff0000;">
text-align</span>:<span style="color: #0000ff;"> right</span>;<span style="color: #ff0000;">
margin-top</span>:<span style="color: #0000ff;"> 0.5em</span>;
}
② Individual selector
The id selector can function independently even if it is not used to create derived selectors:
<span style="color: #800000;">#sidebar </span>{<span style="color: #ff0000;">
border</span>:<span style="color: #0000ff;"> 1px dotted #000</span>;<span style="color: #ff0000;">
padding</span>:<span style="color: #0000ff;"> 10px</span>;
}
5. Class selector
In CSS, class selectors are displayed with a period:
In the example below, all HTML elements with the center class are centered.
<span style="color: #800000;">.center </span>{<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;"> center</span>}
In the HTML code below, both h1 and p elements have the center class. This means that both will respect the rules in the ".center" selector.
<span style="color: #0000ff;"><</span><span style="color: #800000;">h1 </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span><span style="color: #000000;"> This heading will be center-aligned </span><span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span><span style="color: #000000;"> This paragraph will also be center-aligned. </span><span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
① Like id, class can also be used as a derived selector:
Table cells inside larger elements with class name fancy will display orange text on a gray background. (The larger element named fancy might be a table or a div)
<span style="color: #800000;">.fancy td </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #f60</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> #666</span>;
}
② Elements can also be selected based on their class:
Table cells with class name fancy will be orange with a gray background.
<span style="color: #800000;">td.fancy </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #f60</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> #666</span>;
}
6.CSS attribute selector
Set styles for HTML elements with specified attributes. You can set styles for HTML elements with specified attributes, not just class and id attributes.
① Attribute selector
Set styles for all elements with a title attribute:
<span style="color: #800000;">[title]
</span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;">red</span>;
}
② Attribute and value selectors
Set styles for all elements with title="W3School":
<span style="color: #800000;">[title=W3School]
</span>{<span style="color: #ff0000;">
border</span>:<span style="color: #0000ff;">5px solid blue</span>;
}
③ 属性和值选择器 - 多个值
为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
<span style="color: #800000;">[title~=hello] </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">red</span>; }
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
<span style="color: #800000;">[lang|=en] </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">red</span>; }
7.如何插入CSS
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：外部，内部，内联。
① 外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="mystyle.css"</span> <span style="color: #0000ff;">/></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
<span style="color: #800000;">hr </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> sienna</span>;}<span style="color: #800000;">
p </span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;"> 20px</span>;}<span style="color: #800000;">
body </span>{<span style="color: #ff0000;">background-image</span>:<span style="color: #0000ff;"> url("images/back40.gif")</span>;}
② 内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用