zoukankan      html  css  js  c++  java
  • HTML+CSS样式设置——CSS一学就会

    HTML+CSS样式设置

    CSS:(Cascading Style Sheets)层叠样式设置表。

    网页的展示效果跟其排版有非常大的关系。排版则主要依靠CSS来设置、调节。

    以下说CSSHTML的联合使用的过程:

        (1)新建CSS文件(一般放在与HTML文件同一路径下的css目录中)。

        (2)在HTML<head>标签中,用<link />CSS进行引用

                  <link rel=”stylesheet” type=”text/css” href=”文件地址/css文件名称.css” />  。

        (3)依据HTML的标签或标识符,在CSS文件里编写样式设置代码。

     

    CSS基本的语法为:选择器(Selector)、属性(Property)和属性值(Value

          代码形式为:selector{propertyvalue} 。

     

    基本的选择器tag标签(html自身的标签)、class标识符(自己定义)和id标识符(自己定义)

          选择器使用语法为: 

          (1)tag标签直接使用标签后跟{}。例body{}table{}p{}font{}等。

          (2)Class标识符,用“.标识符属性:属性值; }”的形式,例 .xs{ color:blue; } 。

          (3)id标识符。用“#标识符属性:属性值; }”的形式,例 #xs{ color:blue; } 。

    补充:tag标签选择器在使用时。若多个标签设置同样效果,可联合写。

    将多个标签用空格隔开用一个{}进行设置就可以,不同的效果可单独外加设置。例table tr td{ color:red }。

    举例:

    HTML代码:

    			<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代码:

       			        /*id标识符·演示样例*/
    				#all{
    					Background-color:#F0F0F0;		/*设置背景颜色为淡灰色*/
    					600px;				/*设置这个版块的宽度为600像素*/
    					height:700px;				/*高度为700像素*/
    				}
    				.set{						/*针对第1行第1列样式设置*/
    					text-align:center;			/*文本居中*/
    					font-weight:bold			/*文本加粗*/
    				}
    				table{						/*对表格总体进行样式设置*/
    					500px;				/*设置表格的宽度为500像素*/
    					height:400px;				/*表格高度400像素*/
    				}
    
    

    样式设置的方式有四种:(可參看CSS特点及增加网页的四种方法

    经常使用的3种为:

    (1)直接写在标签中,如

          <table style=”border-left-2px ”></table> /*设置表格左边框宽度为2像素*/

    (2)写在<head>中。语法为:

    		<style type=”text/css”>
    			p{ text-align:center; } /*设置p标签的文本居中*/
    		</style>

    (3)保存为外部.css文件,通过<link />语句引用。例

          <link rel=”stylesheet” type=”text/css” href=”css/setTable.css” /> 

    样式表setTable.css文件放在css目录中。

        这里抽出重点,将CSS的大体框架简要介绍。目的在于能轻松入手,或在长时间未用的情况下。瞅上一眼能回顾起。CSS有丰富的处理效果设置,若全贴于本文,那就成了杀手了。因此,再次埋一个望远镜——CSS的具体处理效果。建议简要浏览《[精通DIV.CSS网页样式与布局].何丽.高清扫描版 带文件夹》

    版权声明:本文博主原创文章。博客,未经同意不得转载。

  • 相关阅读:
    angular流程引擎集成
    angular打印功能实现方式
    文件hash、上传,实现文件上传重复验证
    HDU 6096 String(AC自动机+树状数组)
    HDU 5069 Harry And Biological Teacher(AC自动机+线段树)
    BZOJ 3172 单词(AC自动机)
    LightOJ 1268 Unlucky Strings(KMP+矩阵乘法+DP)
    Codeforces 808G Anthem of Berland(KMP+DP)
    LightOJ 1258 Making Huge Palindromes(KMP)
    UVA 11019 Matrix Matcher(哈希)
  • 原文地址:https://www.cnblogs.com/lcchuguo/p/4909222.html
Copyright © 2011-2022 走看看