CSS Basic
CSS introduction
- CSS stands for Cascading Style Sheets
- describes how HTML elements (titles, images, paragraph…) are to be displayed on screen, paper, or in other media
- CSS version 2.1/3.0
- IE9 and above browsers support CSS 3.0
CSS in HTML
Usage of CSS in HTMl
- Inline Style 内联样式 (highest priority)
<h1 style="color:blue;">This is a heading</h1>(Not recommended) Internal Style 嵌入样式 (second priority)
1
2
3
4
5
6
7<head>
<style>
h1 {
color: maroon;
}
</style>
</head>External Style 外部样式 (lowest priority)
- Each page must include a reference to the external style sheet file inside the
<link>element. The
<link>element goes inside the<head>section:1
2
3<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>- type attribute: specifies the media type of the linked document
- rel：specifies the relationship between the current document and the linked document
- href：specifies the location of the linked document
- Each page must include a reference to the external style sheet file inside the
- Default Style 缺省样式
- example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<!-- external style -->
<link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
<!-- internal style -->
<style>
h1 {
color: blue;
}
</style>
<body>
<!-- default style -->
<h2>test0</h2>
<h1>test1</h1>
<!-- Inline style -->
<p style="color:brown">test2</p>
</body>
</html>
Syntax
Selector {Property: value; Property: value;}
- example
h1 {color:blue;font-size:12px;}- The selector
- points to the HTML element you want to style.
- The declaration block
- contains one or more declarations separated by semicolons.
- each declaration includes a CSS property name and a value, separated by a colon.
- always ends with a semicolon
- declaration blocks are surrounded by curly braces.
- Comment
/* */
Basic properties
- width - 宽度， 单位px（像素）
- height - 高度
- color - 前景色， 也就是文字的颜色
- background-color - 背景色
- font-size - 字体的大小
CSS Selectors
*All Elements* {color:blue} /*all items set to blue*/- Element name.
p {color:blue} /* all p tag turn to blue */ #id- The id selector uses the id attribute of an HTML element to select a specific element.
- The id of an element should be unique within a page, so the id selector is used to select one unique element!
- To select an element with a specific id, write a hash (#) character, followed by the id of the element.
1
2
3
4
5
<li id=”li-ca”>CA</li>
#li-ca {
color: blue;
}
class- The class selector selects elements with a specific class attribute.
- To select elements with a specific class, write a period (.) character, followed by the name of the class.
1
2
3
4
5.nice {
color: purple;
}
<p class="nice">lalala</p>
<p class="nice">hohoho</p>
Combinator
- Combinator is a selector combined by multiple selectors.
后代选择器
div p: selects all<p>elements inside<div>elements`1
.class h3 {color:red; font-size:25px;}
并集选择器
div, p: selects all<div>elements and all<p>elements1
.class, h3 {color:red; font-size:25px;}
子元素选择器
div > p: selects all<p>elements where the parent is a<div>element1
.class, h3 {color:red; font-size:25px;}
Difference of
div panddiv > p:div pincludes all sons and grandsons, whilediv > phas only direct sons.1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<style>
<!-- All strong whose parent is p -->
p > strong {
color: red;
}
p > span > strong {
color: green;
}
<!-- All strong below div -->
div strong {
font-size: 50px;
}
</style>
<!-- ... -->
<div>
<p id="aa">this is <span><strong>strong under span</strong></span></p>
<p>this is paragraph 3</p>
<p><strong>I am strong under p</strong></p>
</div>Attribute selector: Use a
[]to select attributes1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<style>
<!-- all p with class attribute -->
p[class] {
color:red;
}
<!-- the class of p is "right -->
p[class="right"] {
color:blue;
}
<!-- class~="demo means class contains "demo"-->
p[class~="demo"] {
font-size: 60px;
}
</style>
<body>
<p class="right"> i am div1</p>
<p> i am div2</p>
<p class="left demo"> i am div3</p>
<p id="side"> i am div4</p>
</body>Pseudo Classes 伪类
- :link - (a:link) selects all unvisited links
- :hover - (a:hover) selects links on mouse over
- :active - (a:active) selects the active link
- :visited - (a:visited) selects all visited links\
- :first-child - (p:first-child) selects every
<p>element that is the first child of its parent
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<style>
a:link {
color: red;
}
a:visited {
color: yellow;
}
a:hover {
font-size: 50px;
color: blue;
}
a:active {
color: green;
}
p:first-child {
background-color: brown;
}
</style>Pesudo Elements
- ::first-element (does not work on inline elements, such as span)
1
2
3
4
5
6<style>
p::first-letter {
font-size: 100px;
color: pink;
}
</style>
- ::first-element (does not work on inline elements, such as span)
CSS Cascade and Inheritance
CSS Cascade
- the cascade is a set of rules for determining which style properties get applied to an element.
- It specifies how a web browser should handle multiple styles that apply to the same tag and what to do when CSS properties conflict.
- bottom > top
Inheritance
- some property values applied to an element will be inherited by that element’s children, and some won’t.
- font-family and color to be inherited, as that makes it easy for you to set a site-wide base font by applying a font-family to the
<html>element; - margin, padding, border, and background-image to NOT be inherited
<a>does not support any kind of inheritance unless:a {color: inherit;}- eg.
<span>inside a<p>will be overrided.
Specificity
First Principle
- Inline style > Internal > external > inheritance > default
Second Principle
- id > class/pseudo class > tag > inheritance > default
Specificity Collision
- CSS provides a formula for determining a style’s specificity that’s based on a value assigned to the style’s selector - a tag selector, class selector, ID selector, and so on. Here’s how the system works:
- A tag selector is worth 1 point.
- A class selector is worth 10 points.
- An ID selector is worth 100 points.
- An inline style is worth 1,000 points.
- The bigger the number, the greater the specificity.
- Example
- A tag style for the
tag (specificity = 1)
- A class style named .highlight (specificity = 10)
- An ID style named #logo (specificity = 100)
- Then say your web page has this HTML:
<img id=”logo” class=”highlight” src=”logo.gif”/>. If you define the same property - such as the border property - in all three styles, then the value from the ID style (#logo) always wins out.
- A tag style for the
- A pseudo-element (like ::before) is treated like a tag selector and is worth 1 point. A pseudo-class (:link) is treated like a class and is worth 10 points.
- Since descendant selectors are composed of several selectors - #content p, or h2 strong, for example, the math gets a bit more complicated. The specificity of a descendant selector is the total value of all of the selectors listed.
A descendant selector = 1 tag + 1 tag/class
- If there’s still collision, last style wins
!important;This is an overruling specificity, it means ‘this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!’ For example:1
2
3
4<style>
.nav a { color: red; }
a { color: blue ; }
</style>
