Home >Web Front-end >HTML Tutorial >HTML CSS style setting--CSS can be learned once_html/css_WEB-ITnose
HTML CSS style setting--CSS can be learned once_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:10984browse
HTML CSS style settings
CSS: (Cascading Style Sheets) cascading style settings sheet.
The display effect of a web page has a lot to do with its layout. Typesetting mainly relies on CSS to set and adjust.
The following is the process of joint use of CSS and HTML:
(1) Create a new CSS file (usually placed in the css folder in the same path as the HTML file)
(2) In the
tag of HTML, use to reference the CSSAddress/css file name.css” />
(3) According to the HTML tag or identifier, write the style setting code in the CSS file
CSS Basic syntax is: Selector, Property and Value
The code format is: selector{property: value}
Main selector : tag tag (html's own tag), class identifier (customized) and id identifier (customized).
The selector usage syntax is:
(1) The tag tag directly uses the tag followed by {}, for example body{}, table{}, p{}, font {}wait.
(2) Class identifier, in the form of ".identifier { attribute: attribute value; }", for example .xs{ color:blue; }
(3) id identifier , use the form of "#identifier{ attribute: attribute value; }", for example #xs{ color:blue; }
Supplement: When using the tag tag selector, if multiple tags are set to the same effect, Can be written jointly. Just separate multiple tags with spaces and use a {} to set them. Different effects can be set separately.
Example:
HTML code:
<html> <head> <title>网页标题</tiltle> <link type=”text/css” rel=”stylesheet” </head> <body> <div id=”all”> <table><!--建立一个表格，1行2列--> <tr> <td class=”set”>第1行第1列 内容</td> <td>第1行第2列 内容</td> </tr> </table> </div> </body> </html>
CSS code:
/*id标识符·示例*/ #all{ Background-color:#F0F0F0; /*设置背景颜色为淡灰色*/ width：600px; /*设置这个版块的宽度为600像素*/ height:700px; /*高度为700像素*/ } .set{ /*针对第1行第1列样式设置*/ text-align:center; /*文本居中*/ font-weight:bold /*文本加粗*/ } table{ /*对表格整体进行样式设置*/ width:500px; /*设置表格的宽度为500像素*/ height:400px; /*表格高度400像素*/ } There are four ways to set styles: (please refer to CSS characteristics and four methods of adding to web pages)
The three commonly used ones are:
(1) written directly in the tag, such as
<table style=”border-left-width:2px ”></table> /*设置表格左边框宽度为2像素*/
(2) Written in
, the syntax is: <style type=”text/css”> p{ text-align:center; } /*设置p标签的文本居中*/ </style> (3) Save it as an external .css file and reference it through the statement. Example
<link rel=”stylesheet” type=”text/css” href=”css/setTable.css” />The style sheet setTable.css file is placed in the css folder.