CSS3 style:
1.CSS3 (cascading style):
①It is used to design the relative style of web pages to make the web page look more beautiful and clear
②CSS3 is an upgraded version of CSS
2.CSS advantages ①.Separation
of content and performance ②.Web
page The form of expression is more unified, and it is more suitable for flexible modification
. ③. Rich styles make the page layout more flexible.
④ Reduce the amount of code, increase browsing speed, and save broadband traffic.
⑤ Use independent CSS to help web pages be included in search engines
. Syntax:
①Comments in HTML: <!---->
②Comments in CSS3: /* */ ③Syntax
:
selector {
declaration 1;
declaration 2;
.......
}
*The last declaration in CSS can be Do not add ";", but based on the W3C standard specification, it is recommended to add
④ style tag:
<style></style>
4. Basic selector
①ID selector:
#p{ }
style starts with "#" in the
ID selector named It is not allowed to start with a number, and it cannot be recognized in the browser.
② Class selector: start with "." in
.w{ } style ③ Element selector: call with tag name in h1{ } style
④Subclass selector:
ul>li{ }
⑤Descendant selector:
div p{ }
⑥Pseudo-class selector:
a:hover{ }
⑦Attribute selector:
input[type="text"]{ }
5. Basic selection Selector priority:
①ID Selector > Class Selector > Tag Selector
② Tag Selector does not follow the proximity principle
③ No matter which reference CSS style is used, it generally follows (ID Selector > Class Selector > Tag Selector) priority
6. Advanced selectors of CSS3
(1) Hierarchical selector
Type selector description
① Descendant selector EF selects the matching F element, the matching F element is included in the E element
② child selector E>F selects the matching F element , the matching F element is the child element of the matching E element
③The adjacent sibling selector E+F selects the matching F element, and the matching F element is located immediately after the matching E element
④The universal sibling selector E~F selects the matching element F element, all matching F elements located after the matching E element
(2) Structural pseudo-class selector
Extension: CSS has been defined, and it is not allowed to modify
the four pseudo-class selectors in
CSS ① first-line: for a certain element The first line of text uses the style
②filt-letter: use the style for the first word after the first letter of the text of
an element ③before: insert some content before an element
④after: insert some content after an element
selector: pseudo-class element (style):
*first-child{}
*last-child{}
*nth-child{}
net-last-child{}
nth-last-chile{}
nth-of-chile{}
( 3) Attribute selector
Selector function description
①E[attr] Selects and matches the E element with attribute attr
②E[attr=val] Select to match the E element with attribute attr, and the attribute value is val (val is case sensitive)
③E[attr^=val] selects the matching element E, and the E element defines the attribute attr, where the attribute value is any string starting with val
④E[attr$=val] selects the matching element E, and the E element defines the attribute attr, where the attribute value is any string ending with val
⑤E[attr*=val] Select the matching element E, and the E element defines the attribute attr, where the attribute value contains "val", which matches any position
(4). How to introduce CSS into HTML?
①The most commonly used, import style sheet, import method:
<link href="css/stytle.css" rel="styleshell" type="text/css" />Default style
②In the HTML head <style></style>, write the style inside
<style type="text/css">
p{background:red;}
</style>
③Write the style directly in the tag
<div style=" color:red"></div> Introduce js
file and assign it to a certain tag
7. Ways of introducing CSS styles in HTML
(1) Commonly used reference style sheets
" type="text/css" />
(2) In the HTML head <style></style>, write the style inside
<style type="text/css">
</style>
(3) Directly refer to
<div color=blue>
</div> in the tag
CSS styles
1. <style> tag:
Introduce CSS styles in HTML by using the <style> tag. The <style> tag is used to define style information for the HTML document. The <style> tag is inside the <head> tag.
2. CSS selector:
(1). Tag selector:
An HTML page consists of many tags, such as <h1>~<h6>, <p>, <img/> and so on. CSS tag selectors are used to declare these tags.
(2). Class selector:
Use the class attribute of the tag to refer to the class style, that is, <tag name class="class name">tag content</tag name>
(3). ID selector:
The use of ID selector is the same as The class selector is basically the same, the difference is that the ID selector can only be used once in an HTML page, so it is more targeted.
*ID selectors are used with "#classname" when used in <style> tags.
ID selector syntax:
<html>
<head>
<style>
#classname{font-size:16px;}
</style>
</head>
<body>
<p id="classname"></p>
< /body>
</html>
3. CSS style
(1). Inline style: Inline style
is to use the style attribute to set CSS style directly in the HTML tag. The style attribute provides a generic way to change the way all HTML elements behave.
*Syntax:
<p style="font-size:14px">Set the style directly in the HTML tag</p>
(2) Internal style sheet:
Use the CSS code in the <style> tag of <head>.
(3) External style sheets:
① Connecting external style sheets
Connecting external style sheets is to use <link/> tags to connect external style sheets in HTML pages. The <link/> tags must be placed in the <head> tag of the page.
Syntax:
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
<head>
*href="style.css" is the location of the file
*rel="stylesheet" Refers to using this external style sheet in the page
*type="text/css" means that the type of the file is style sheet text.
②Importing external style sheets:
Use @import to import external style sheets in HTML. The statement to import style sheets must be placed in the <style> tag, and the <style> tag must be placed in <head> within the label.
Syntax:
<head>
<style>
@import url("style.css")
</style>
</head>
@import indicates the import file, there must be an @ symbol in front, and url("style.css") indicates the location of the style file.
4. Style Priority
(1). Inline Styles > Internal Style Sheets > External Style Sheets
(2). ID Selector > Class Selector > Tag Selector
5. CSS conforms to selectors:
(1). Descendant selectors
use spaces
(2). Intersection selectors
(3). Union selectors
commas