css样式学习

zylzl123

于 2015-08-06 16:32:49 发布

阅读量257

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/zylzl123/article/details/47318621

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
	<title>css设计</title>
	<script type="text/javascript"></script>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<text style="font-size:20px;background-color:#FFFFFF">哈哈</text>
<text class="text1">1.我是张三</text>
<text id="text2">2.你是谁呀</text>
<br>
<br>
<h1>你猜你猜啊</h1>
<a href="http://www.baidu.com">伪类选择符</a>
<ul class="food">
<li>
	水果
	<ul class="fruit">
		<li>
			3.香蕉
		</li>
		<li>
			3.苹果
		</li>
	</ul>
</li>
<li>
	零食
</li>
</ul>
<br>
<br>
	<a>7.33333333</a>
    <div>8.流动模型变为浮动模型
    </div>
    <div>8.流动模型变为浮动模型了
    </div>

<p id="word">9.行内元素居中</p>
<div id="center">10.定宽块状元素居中</div>
	<table>
		<tr>
			<td>
				<ul>
					<li>11.不定宽块状元素居中</li>
					<li>haha</li>
					<li>wawa</li>
				</ul>
			</td>
		</tr>
	</table>

	<br>
	

		

</body>
</html>

   h1
		   {
		       font-size:12px;
		       font-family:幼圆;
		       color:#FF00FF;
		       font-weight: bold;
		       font-style: italic;/*斜体*/
		       text-decoration: underline;/*下划线*/
		       text-decoration: line-through;/*删除线*/
		       text-indent: 2em;/*缩进文字的两倍大小即12px*2=24px，段落*/
		       line-height: 1.5em;/*行间距*/
		       word-spacing: :100px;/*字间距*/
		       text-align: right;/*文本居右*/

		   }
		   .text1  /*1.利用class设置样式，可公用*/
		   {
              color:yellow;
               font-family:幼圆;
		   }

		   #text2  /*2.利用id设置样式，不可公用*/
		   {
		      color:gray;
		   }

		   .food>li  /*3.子代选择器，.food li 后代选择器*/
		   {
		   	  color:red;
		   	  border:1px;
		   }

		   .fruit>li  /*子代选择器*/
		   {
		   	 color:yellow;
		   	 font-size: 22px;
		   }

		  *{color:blue;}  /*4.通用选择器*/
          /*  5.*{color:blue !important;}  加了important后通用选择器权值最高*/
		   a:hover  
		   {
                 color:yellow;
		   }

            .food,span  /*分组(组合)选择器*/
            {
            	font-size:25px;
            }

            /*5.对于应用到同个标签的多个样式，按照权值使用样式
            标签权值为1，类选择符为10，id选择符为100
            如果权值相同则应用最后一个样式
            特殊的!important*/

            /*6.块状元素<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
              特点1.每个元素从新的一行开始 2.元素高度宽度底边距均可设置，若不设置宽度，占容器100%
              2.内联元素<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
              特点1.元素在一行 2.高度宽度底边距等不可设置 3.元素宽度为包含的文字图片宽度，不可改变
              3.内联块状元素<img>、<input>
              特点1.元素在一行  2.高宽等可设置
               
               设置为块状元素{dispaly:block;}
               设置为内联元素{dispaly:inline;}
               设置为块状内联元素{dispaly:inline-block;}
            */
           
           a
           {
           	/* 7.盒模型：内容，填充，边框，边界*/
           	/*边框设置border:2px;
           	solid:red;*/
           	/*详细设置border-bottom:2px solid yellow;
           	border-top:1px solid blue;*/
           	width:200px;/*宽度--内容*/
           	/*填充 详细设置padding-top/right/left/bottom
           	   或者 padding 10px 10px 21px 23px
           	                top  right bottom left
           	   边框里面
           	*/
           	padding: 20px;
           	border:10px solid yellow;/*边框*/
           	/*边框外 详细设置同padding*/
           	margin: 5px;/*边界*/
           	/*display: block;没有此句文字出现在div的后面
           	因为div是另占一行的*/
           
           }

           /*8.流动模型,浮点模型，层模型绝对定位,相对定位，固定定位*/
           div
           {
           	width:150px;
           	border: 2px solid purple;
           	/*float:left;无此句则两个模型是各占一行，否则并列*/
           	/*position: absolute;
           	left:500px;
           	top:50px;*/
           }

            /*9.行内元素：文字，图片  直接text-align:center*/
           #word
            {
            	
            	text-align: center;
            }
           /*10.定宽块状元素居中*/
           #center
           {
           	border: 2px solid yellow;
           	width:100px;/*必须定宽*/
           	margin:10px auto;/*紧接此句*/
           }

            /*11.不定宽块状元素居中
            1.加入table标签
            2.父元素text-align:center 子元素设置display:inline
            3.设置position:relavtive,left:50*/
            table
            {
            	margin: 0 auto;
            }

        


		}