css样式学习

来源：互联网发布：安卓登录注册界面源码编辑：程序博客网时间：2024/06/05 02:31

<%@ 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;            }        }

0 0