HTML CSS style setting--CSS can be learned once_html/css_WEB-ITnose

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 CSS

Address/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:

												<title>网页标题					<link type="”text/css”" rel="”stylesheet”">				</title>					<div id="”all”">						<table>
<!--建立一个表格，1行2列-->							<tr>								<td class="”set”">第1行第1列 内容</td>								<td>第1行第2列 内容</td>							</tr>						</table>					</div>							

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

/*设置表格左边框宽度为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="%E2%80%9Dcss/setTable.css%E2%80%9D"> 

The style sheet setTable.css file is placed in the css folder.