Home > Developer > Web Develop
CSS syntax and HTML binding
Second, CSS syntax
p{color:red;}
Selector {Property Name: property value;}
The selector must be a curly brace after the name of the property. The attribute is separated by a colon. The attribute value is followed by a semicolon
It is best not to have a space between the property name and the colon.
CSS comments/* * *
The difference between using the selector p{} and the <p> tag:
p{
Font-weight:bold;
Font-style:italic;
}
</style>
<body>
<p> Hello </p>
<p> Hello </p>
<p> Hello </p>
<p style = "color:red" > Hello </p>
Iii. how CSS and HTML are combined
The CSS code is theoretically arbitrary, but is usually written in the Style tab.
There are 3 ways to combine CSS and HTML:
A. row-level style sheet : With the Style property, the range is only applicable for this label
<div style = "border:1px solid red;" > Everybody good </div>
B. inline style sheet: complete with <style> tags. Scope for this page
<style type= "Text/css" >
C. external style sheet: Use the Create style sheet file. for multiple pages.
How to introduce style sheet files:
1): Adopt <link> Label
eg:<link rel = "stylesheet" type = "text/css" href = "a.css" ></link>
<link rel = "stylesheet" type = "text/css" href = "A.css" ></link>
2): Import, must be written in the <style> tag, and must be the first sentence
eg: @import url (a.css);
two ways to introduce the difference:
Cannot write <link> label in external style sheet, but can write import statement
<!doctype html>
<meta charset= "UTF-8" >
<meta name= "Generator" content= "EditPlus" >
<meta name= "Author" content= "" >
<meta name= "Keywords" content= "" >
<meta name= "Description" content= "" >
<link rel = "stylesheet" type = "text/css" href = "A.css" ></link>
<title>Document</title>
<style type= "Text/css" >
/*
How CSS and HTML are combined:
1. Row-level style sheet: complete with the Style property
2. Internal style sheet: complete with style label
3. External style sheet: complete with external CSS file
*/
p{
Font-weight:bold;
Font-style:italic;
}
</style>
<body>
<p> Hello </p>
<p> Hello </p>
<p> Hello </p>
<p style = "color:red" > Hello </p>
</body>
This article from "with June mutual encouragement" blog, please be sure to keep this source http://rickyigoogle.blog.51cto.com/8747999/1683443
DAY2_CSS_CSS syntax and HTML binding
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
