I hope you are happy, I hope you are healthy, I hope you are happy, I hope you like it!
Finally, follow meow, follow meow, follow meow, you will see more interesting blogs! ! !
Meow meow meow, you are really important to me!
Table of contents
Disadvantages of traditional HTML
Using CSS to control web pages
CSS definitions and references
Inline style sheets (inline styles)
Characteristics of internal style sheets
The difference between linking to an external style sheet and importing an external style sheet
Preface
•Understand the concepts and characteristics of CSS.•Master the basic syntax, selector classification and declaration structure of CSS.• Master the definition of CSS and how to reference it.• Understand the meaning of CSS inheritance and cascading.
CSS概念
CSS（Cascading S tyle Sheet) Cascading style sheets, also called cascading style sheets, are used to Design web page style.
传统HTML的缺端
l (1) Difficulty in maintenance . In order to modify a special markup format, it takes a lot of time, especially for the entire website, and the later modification and maintenance costs are high.l (2) The page is too bloated . Because there is no unified control over various styles, HTML pages are often too large and take up a lot of valuable bandwidth.l (3) Difficulty in positioning . When laying out the page as a whole, HTML seems to be struggling to adjust the position of each module, and there are too many table tag will make the page complex and difficult to maintain later.
CSS的优势
1.Separation of performance and content
CSS separates page content and display by defining the style of HTML tag, simplifying Web page format design also makes it easier to modify the web page format.
2.Enhanced the expressiveness of the web page
CSS style attributes provide more formatting functions than HTML.
3.Enhanced the consistency of website style
CSS styles are defined in style sheet files, and the styles in the style sheet files are applied to multiple web pages at the same time, ensuring that multiple web pages have a consistent format. You can update the style sheet file at any time to change the website style. Greatly reduces the development and maintenance work of the website.
ExplanationCSS 3
After the completion of l CSS 3 , it has many new functions, namely new styles. But these new styles are not fully supported in browsers. The main reason is that various browsers have differences in handling many details of CSS 3 . For example, one browser supports a certain attribute of a tag, but Another browser does not support it, or both browsers support it, but their display effects are different.
CSSHow to edit
1.PhotographHTMLBunseri;
2.Resistance independent*.CSSWensubri.
UseCSSRestrictionWebScreen
CSSThe control page is implemented throughCSSrules , CSS rules consist of selectors and declarations, and declarations consist of attributes and attribute value pairs.
CSS provides a rich set ofselector types: Tag selector, class selector, id selector and pseudo-class selector, etc.
InHTMLpageApplyCSSStyle sheet, internal style sheet, link to external style sheet and import external style sheet . )Inline(inline: are also more flexible, includingThe rules
CSSBasic language
l CSS definedCSS is a text file containing one or more rules.
l 规则： Selector (selector) , Attributes (properties) Japanese attributes (value)
Selectors are usually tags that need to be styled HTML .A declaration consists of one or more property name and property value pairs.
p{font-size:12px; color:blue; font-weight:bold;}
<style type="text/css">
/* 定义body样式 */
body{background:black;color:red;}
.div{padding:50px;}
.pic{float:right; padding:20px;}
</style>
CSS注释方法 /* 此标记应用在文档中 */
注释不能嵌套。
注意与HTML注释方法不同。
CSSfixed quotation
CSSStandard table type:4type
Inline style sheet (inline style sheet)internal style sheetLink external style sheetsImport external style sheets
Inline style sheets (inline styles)
Basic syntax:
<list style="attributes: Attribute; Attribute: Attribute list;…">
Syntax description:
By using style attribute for various HTML< The /span> element. HTML element tag adds a style, and its scope is only within the specifiedSeparate multiple attributes of style with semicolons ;The style defined in the tag itself takes precedence over all other style definitions.Inline style sheets only affect a single element (marker)
<p style=“color:red;font-size:28px;”>This paragraph takes effect</p>
internal style sheet
l Goho Kaku Shikijoge:<style>
Selection device{ Attribute name1:Attribute name1; Attribute name2:Attribute name2; ... Attribute nameN:Attribute nameN }
</style>
Give a chestnut:
Basic syntax:
<head>
<style type="text/css">
.div1,.div3{background:#99ffff;width:200px;
height:100px;}
#div2{background:#00cc00;width:200px;
height:100px;}
p,h1{ font-size:18px; color:#003366;}
</style>
</head>The style tag is a double tag with type attribute ,must be placed at the head.
Internal stylesheets only affect a single file
Characteristics of internal style sheets
l Internal style is to add CSS style code to <head> and </head> , and use <style> and </style> tags for declaration. This writing method can unify the style of the entire page .l When you need to apply styles to a single page, you can use an internal style sheet.l Suitable for situations where there are few files and CSS there are not many codes.l If a website has many pages, applying internal style sheets will make each page file larger, making later maintenance more difficult.
LinkExternal style sheet
Basic syntax:
<link rel="stylesheet" href="The file name of the external style sheet"/ >
Syntax description:
The Ø <link> tag is a single tag and is placed in the header.Ø External text name required format Last name . css .Ø CSS The file must be in plain text format;Ø After the external style sheet is modified all referenced page styles are automatically updatedØ External style sheets have lower priority than internal style sheets;When linking several external style sheets at the same time, follow the "most recent first principle"
ImportExternal style sheet
Basic syntax:
<style>
@import url("The file name of the external style sheet");
p,p1{font-size:18px; color:blue}
</style>
Syntax description:
import verb after “ ; ” , certain increase required!“ The file name of the external style sheet ” is the name of the style sheet file to be embedded, including Path, suffixed with . css ;@import should be placed at the front of the style element.
The difference between linking to an external style sheet and importing an external style sheet
l The import method will download the entire content of the style file HTML when the browser downloads it a> Copy to @import keyword position to replace the keywordl The link method only needs to be quoted in HTML files When a certain style in the CSS style file is specified, the browser will link to the style file and read the required content
Homework
Apply CSS inline style sheet
- Web page title: Application of CSS inline style sheet
- All content of the web page is placed within the <div> container tag
- The titles use first-level headings and fifth-level headings respectively.
- Useinline style to set the style of the first-level title: font color red, font size 26px
- Useinline style to style the horizontal dividing line:Thick2px Dotted Line Blue
- Useinline style to set the style of the five-level heading: background color yellow, font color blue, font size 14px;
- Useinline styles to style the paragraph: font size 12px
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS行内样式表的应用</title>
</head>
<body>
<div>
<h1 style="color:#F00; font-size:26px;">服务向导</h1>
<hr style="border:2px dashed blue"/>
<h5 style="background-color:yellow; color:blue; font-size:14px;">商城的支付方式有哪些？</h5>
<p>网上银行支付和货到付款</p>
<h5 style="background-color:yellow; color:blue; font-size:14px;">商城上买东西一般几天可以收到货？</h5>
<p style="font-size:12px">一般情况下，若运送方式为快递，同城交易，如果当天发货，当天可以收到；省外的通过空运3小时内可以送达。</p>
<h5 style="background-color:yellow; color:blue; font-size:14px;">卖家发货后一直没有收到货怎么办?</h5>
<p style="font-size:12px">在卖家已经操作发货后，一直未收到货的，可能由于活动量大造成物流延误，建议您进入“我的订单”页面找到对应交易点击“查看物流”，关注您商品的运输流转记录。</p>
<p style="font-size:12px">如交易即将超时打款前您还未收到商品，避免出现钱货都不在您手中的情况，建议及时进入“我的订单”页面找到对应交易点击“退货/退款”。</p>
<h5 style="background-color:yellow; color:blue; font-size:14px;">拍下的商品想要退货退款怎么办?</h5>
<p style="font-size:12px">活动期间成功付款的所有活动商品，不支持7天无理由退换货。如果消费者有退换货需求，在符合《商城处理规范》的相关规定的情况下，所有活动商品只支持退货，不支持换货，交易双方另有约定的从其约定。</p>
<p>非活动期间成功付款的所有交易，按照正常退货退款流程处理，查看如何申请退款。</p>
<h5 style="background-color:yellow; color:blue; font-size:14px;">申请退款后，钱款多久可以退回？</h5>
<p style="font-size:12px">申请退款后，钱款退回的时间取决于双方的协商及卖家对退款处理的快慢。只要退款状态显示为“退款成功”，即说明钱款已退回。</p>
<h5 style="background-color:yellow; color:blue; font-size:14px;">如何举报钓鱼网站/中奖信息网站？</h5>
<p style="font-size:12px">如果您遇到或者收到了非法分子发来的钓鱼网站、中奖信息网站，可以进入“我的账号”—“举报管理”中，进行举报。</p>
</div>
</body>
</html>Apply CSS internal stylesheet
- Web page title: Application of CSS internal style sheet
- All content of the web page is placed within the <div> container tag
- The titles use first-level headings and fifth-level headings respectively.
- Useinternal style sheet to set the style of the first-level title: font color red, font size 26px
- Useinternal style sheet to set the style of the horizontal dividing line: thick 2px dotted blue
- Useinternal style sheet to set the style of the five-level heading: background color yellow, font color blue, font size 14px
- Useinternal style sheet to style the paragraph: font size 12px
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>样式表的应用</title>
</head>
<body>
<div>
<h1>服务向导</h1>
<hr/>
<h5>商城的支付方式有哪些？</h5>
<p>网上银行支付和货到付款</p>
<h5>商城上买东西一般几天可以收到货？</h5>
<p>一般情况下，若运送方式为快递，同城交易，如果当天发货，当天可以收到；省外的通过空运3小时内可以送达。</p>
<h5>卖家发货后一直没有收到货怎么办?</h5>
<p>在卖家已经操作发货后，一直未收到货的，可能由于活动量大造成物流延误，建议您进入“我的订单”页面找到对应交易点击“查看物流”，关注您商品的运输流转记录。</p>
<p>如交易即将超时打款前您还未收到商品，避免出现钱货都不在您手中的情况，建议及时进入“我的订单”页面找到对应交易点击“退货/退款”。</p>
<h5>拍下的商品想要退货退款怎么办?</h5>
<p>活动期间成功付款的所有活动商品，不支持7天无理由退换货。如果消费者有退换货需求，在符合《商城处理规范》的相关规定的情况下，所有活动商品只支持退货，不支持换货，交易双方另有约定的从其约定。</p>
<p>非活动期间成功付款的所有交易，按照正常退货退款流程处理，查看如何申请退款。</p>
<h5>申请退款后，钱款多久可以退回？</h5>
<p>申请退款后，钱款退回的时间取决于双方的协商及卖家对退款处理的快慢。只要退款状态显示为“退款成功”，即说明钱款已退回。</p>
<h5>如何举报钓鱼网站/中奖信息网站？</h5>
<p>如果您遇到或者收到了非法分子发来的钓鱼网站、中奖信息网站，可以进入“我的账号”—“举报管理”中，进行举报。</p>
</div>
</body>
</html>
Summarize
CSS Rules consist of selectors and declarations .Selector includes id selector, class selector, tag selector, pseudo-class selector Device etc.CSS is divided into inline style sheets, internal style sheets, linked external style sheets and imported external style sheets :Inline style sheet is set style attribute within the tag and is only valid for this tag ;Internal style sheet is added in the head tag of the page style tag, which is valid for the entire page; External style sheet is the CSS The rules are written in a separate file, and the file suffix is . css , called a CSS file, tagged via link Or " @import " statement will be independent CSS files are introduced into the page, the former is called link external style sheet , and the latter is called Import external stylesheet .
This chapter is a bit long, so I have divided it into two sections.
I hope you are happy, I hope you are healthy, I hope you are happy, I hope you like it!
Finally, follow meow, follow meow, follow meow, you will see more interesting blogs! ! !
Meow meow meow, you are really important to me!
