• HTML---CSS


    层叠样式表 Cascade Style Sheet

    用来装饰HTML/XML的标记集合.

    #:id  .:class

    head里的标签有 meta, base, title, style, link, script.

    css由head的style指定:

    H1就是选择符, 所以说CSS是用来装修标签的.

    <html>
     <head>
      <style type="text/css">
      H1{font-size:16pt;color:red}
      H2{font-size:10pt;color:green}
      </style>
     </head>
     <body>
      <h1>Hello</h1>
      <h2>World</h2>
     </body>
    </html>
    

    body里指定:

    <html>
     <head>
     </head>
     <body>
      <h1 style="font-size:20pt;color:blue">Hello</h1>
      <h2 style="font-size:10pt;background:yellow; font-family:courier">World</h2>
     </body>
    </html>
    

    link方式:

    <html>
     <head>
     <title>link</title>
     <link REL=stylesheet href="03.css" type="text/css">
     </head>
     <body>
      <h1>Hello</h1>
      <h2>World</h2>
     </body>
    </html>
    

    css内容:

    H1{font-size:16pt;color:red}
    H2{font-size:10pt;color:green}
    

    同时装饰的优先级:就近: hello2 用css文件, body里的就用自己的.

    <html>
     <head>
      <link REL=stylesheet href="03.css" type="text/css">
     </head>
     <body>
      <h1 style="font-size:20pt;color:blue">Hello</h1>
      <h2 style="font-size:10pt;background:yellow; font-family:courier">World</h2>
      <h1>Hello2</h1>   //用css文件的
     </body>
    </html>
    

    类选择符class:

    <html>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <head>
      <style type="text/css">
       P.code{font-size:16pt;color:red}
       P.comment{font-size:10pt;color:green}  
      </style>
      <title>CSS字体属性</title>
     </head>
     <body>
      <P class="comment">Hello World!!!</P>
      <pre>  //保留下面的格式
      <P class="code">
      public class Hello{
    	public static void main(String args[]){
    		System.out.println("Hello world!!!");
    	}
      }
      </P>
      </pre>
     </body>
    </html>
    

      

    任何调用code都用这个格式

    <html>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <head>
    	  <style type="text/css">
    			.code{font-size:16pt;color:red}
    	  </style>
    	  <title>CSS字体属性</title>
     </head>
     <body>
    	  <h1 class="code">Hello World!!!</h1>
    	  <pre>
    	  <P class="code">
    		  public class Hello{
    			public static void main(String args[]){
    				System.out.println("Hello world!!!");
    			}
    		  }
    	  </P>
    	  </pre>
     </body>
    </html>
    

    这就是类选择符, class选择符 和class对应

    <html>
     <head>
      <style type="text/css">
       .font1{font-family:verdana;font-style:italic;font-variant:small-caps;font-weight:lighter;font-size:18pt;color:green}
       .code{font-size:16pt;color:red}
      </style>
      <title>CSS字体属性</title>
     </head>
     <body>
      <p class="font1">Hello World!!!</h1>
     </body>
    </html>
    

    还有一种情况, 选择符之间有空格:

    <html>
     <head>
      <style type="text/css">
       h1,p{font-size:16pt;color:red}
       p a{font-size:16pt;color:blue}
      </style>
      <title>CSS字体属性</title>
     </head>
     <body>
    	  <h1>Hello World!!!</h1>
    	  <pre>
    	  <P>
    		  public class Hello{
    			public static void main(String args[]){
    				System.out.println("Hello world!!!");
    			}
    		  }
    	  </P>
    	  </pre>
    	  <p>
    		<a name="test">hello</a>
    	  </p>
     </body>
    </html>
    

      

    • id选择符: 和#对应 用于js里的getElementById
    <html>
     <head>
      <style type="text/css">
       #code1{font-size:16pt;color:red}
       #code2{font-size:16pt;color:blue}
      </style>
      <title>CSS字体属性</title>
     </head>
     <body>
    	  <h1 id="code1">Hello World!!!</h1>
    	  <pre>
    	  <P id="code2">
    		  public class Hello{
    			public static void main(String args[]){
    				System.out.println("Hello world!!!");
    			}
    		  }
    	  </P>
    	  </pre>
     </body>
    </html>
    

      

    CSS字体属性:'

    font-family  各种字体

    font-style  字体样式 italic, oblique

    font-variant:small-caps  小体大写

    font-weight  字体粗细 bold, bolder,lighter

    font-size  大小 absolute, relative, %

    color 颜色

    css颜色与背景属性:

    color

    background-color

    background-image

    background-repeat: repeat-x, repeat-y  no-repeat

    background-attachment: 背景滚动 scroll, fix

    background-position: %  n em  top  left  right bottom

    <!doctype html>
    <html>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    	<head>		
    		<style type="text/css">
    			.font{font-family:verdana; font-style:italic; font-variant:small-caps; font-weight:lighter;font-size:18pt;color:red}
    			.p1{background-image:url(images/nm.jpg);background-repeat:repeat-y;}
    		</style>
    		<title>背景属性</title>
    	</head>
    	<body>
    		<p class="font">这是一只猫,Miao! <br> </p>
    		<p class="p1">
    			
    			这是一只猫,喵喵喵! <br>
    			这是一只猫,喵喵喵! <br>
    			这是一只猫,喵喵喵! <br>
    			这是一只猫,喵喵喵! <br>
    			这是一只猫,喵喵喵! <br>
    			这是一只猫,喵喵喵! <br>					
    		</p>
    	</body>
    </html>
    

    文本属性:

    word-spacing:单词之间距离

    letter-spacing 字母间距

    text-decoration装饰样式  underline , overline, line-through, blink

    vertical-align: sub, super,top,text-top,middle, bottom, text-bottom

    text-transform: 转为其他形式  capitalize, uppercase, lowercase

    text-align: left, right, center, justify

    text-indent:缩进  n em  , %

    line-height: pixels, n em, %

    <!doctype html>
    <html>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    	<head>		
    		<style type="text/css">
    			.text{word-spacing:4; letter-spacing:4; text-decoration:line-through; font-size:16pt;color:red}			
    		</style>
    		<title>CSS字体属性</title>
    	</head>
    	<body>
    		<p class="text">
    			long long ago, there's a girl named betty, she was 5 years old. 很久很久以前,有个小姑娘名字叫betty, 她5岁了<br>		
    		</p>
    	</body>
    </html>
    

      

    装饰超链接, 伪类选择符, 链接颜色变化:

    <html>
     <head>
      <style type="text/css">
      /*我是注释*/
    	a:link{color:green;text-decoration:none}
    	a:active{color:blue;text-decoration:none}
    	a:visited{color:orange;text-decoration:none}
    	a:hover{color:red;text-decoration:underline}
      </style>
     </head>
     <body>
      <a href="css1.html">我就是用来说明问题的链接</a>
     </body>
    </html>
    

    边界属性:margin:

    margin-top: n em , %

    margin-right, margin-bottom,margin-left

    填充属性: padding:

    padding-top: n em , %

    padding-right, padding-bottom,padding-left

    <!doctype html>
    <html>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    	<head>		
    		<style type="text/css">			
    			.p1{background-image:url(images/nm.jpg);background-repeat:repeat-y; margin-left:5em; padding-left:5em}
    		</style>
    		<title>背景属性</title>
    	</head>
    	<body>		
    		<p class="p1">			
    			这是一只猫,喵喵喵! <br>
    			这是一只猫,喵喵喵! <br>
    			这是一只猫,喵喵喵! <br>
    			这是一只猫,喵喵喵! <br>
    			这是一只猫,喵喵喵! <br>
    			这是一只猫,喵喵喵! <br>
    			这是一只猫,喵喵喵! <br>
    			这是一只猫,喵喵喵! <br>
    			这是一只猫,喵喵喵! <br>
    			这是一只猫,喵喵喵! <br>
    		</p>
    	</body>
    </html>
    

      

      

    边框属性:

    border-top-width  n em, thin, medium, thick

    border-right-width, border-bottom-width, border-left-width,

    border-width,

    border-color,

    border-style, 边框样式 dotted, dash,solid, double, groove, ridge, inset, outset

    border-top(right,bottom,left): border-width, border-style, color

    <html>
     <head>
      <style type="text/css">
    	p{border:5px double purple}
      </style>
      <title>边框属性</title>
     </head>
     <body>
      <p align="center">
      <br>
    	生命诚可贵<br>
    	爱情价更高<br>
    	若为自由故<br>
    	两者皆可抛<br>
      <br>
      </p>
     </body>
    </html>
    

    列表属性:

    <html>
     <head>
      <title>列表属性</title>
      <style type="text/css">
    	li{list-style-image:url(images/03.jpg)}
      </style>
     </head>
     <body>
      <p>
      <ul>
    	<li>list1</li>
    	<li>list2</li>
    	<li>list3</li>
       </ul>
       <img src="images/02.jpg" width="280" height="185">
       </p>
     </body>
    </html>
    

    鼠标属性:

    <html>
     <head>
      <title>鼠标属性</title>
     </head>
     <body>
    	<h1>鼠标效果</h1>
    	<div style="font-family:隶书; font-size:24pt;color:green">
    		<span style="cursor:hand">手的形状</span><br>
    		<span style="cursor:move">移动</span><br>
    		<span style="cursor:ne-resize">反方向</span><br>
    		<span style="cursor:wait">等待</span><br>
    		<span style="cursor:help">求助</span><br>
    	</div>
     </body>
    </html>
    

     

    定位属性:

    position: absolute, relative, static

    left/top, width, height: n em, %

    clip:剪切: shape, auto

    overflow: 内容超出时: visible, hidden, scroll, auto

    z-index: 立体效果  integer

    visibility: 可见性  inherit, visible, hidden

    <!doctype html>
    <html>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    	<head>	
    		<title>定位属性</title>
    		<style type="text/css">			
    			#container1{position:absolute; top:100px ;margin-left:5em;}
    			#container2{visibility:hidden; position: absolute; top:100px;margin-left:5em;}
    			p{font-size: 12pt; margin-left:5em}
    		</style>		
    	</head>
    	<body>		
    		<p style="font-size:15pt; color:##cc33cc; font-family:行书体" >请选择一副图片:</p>
    		<DIV id=container1>
    			<image height=280 src="images/qin.jpg" width=185>
    			<p style="font-size:12pt; color:#cc9933; font-family:行书体 margin-left:10em">名称:宝宝</p>
    		</DIV>
    		<DIV id=container2>
    			<image height=280 src="images/nm.jpg" width=185>
    			<p style="font-size:12pt; color:#3366cc; font-family:行书体 margin-left:10em">名称:奶猫</p>
    		</DIV>
    		<form name=myform>
    			<p>
    				<input onclick="container1.style.visibility='visible'; container2.style.visibility='hidden'" type=button value=宝宝>
    				<input onclick="container2.style.visibility='visible'; container1.style.visibility='hidden'" type=button value=奶猫>
    			</p>
    		</form>
    	</body>
    </html>
    

     z-index: 

    <!doctype html>
    <html>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <head>	
    	<title>zindex</title>
    	<style type="text/css">			
    		.pile{left:2in;  3in; position: absolute; top:2in; height:3in}
    		.pile1{left:3in;  1in; position: absolute; top:2in; height:1in}
    	</style>		
      </head>
      <body>		
    	<img class= pile id=image style="z-index:1" src="images/qin.jpg">
    	<DIV class= pile id=text1 style="z-index:3;  color:#ffff33">
    		<font size=5 color="red"><b>将覆盖在图片上</b></font>
    	</DIV>
         <img class= pile1 id=image style="z-index:2" src="images/cat.gif">
      </body>
    </html>
    

      

      

      

      

      

      

  • 相关阅读:
    memcached+magent的集群部署详细过程
    HBase的安装配置
    vim操作知识累积
    Missing artifact jdk.tools:jdk.tools:jar:1.6
    hadoop2.X解压后的配置步骤
    免密码的SSH配置过程
    Linux网卡重启出现"No Suitable Device found:no device found for XXX"
    钉钉、钉应用(微应用和E应用)开发介绍
    Intellij-Idea使用小细节
    SpringMVC项目使用elastic search搜索
  • 原文地址:https://www.cnblogs.com/wujixing/p/5396337.html
Copyright © 2020-2023  润新知