码迷,mamicode.com
首页 > Web开发 > 详细

Css+Html

时间:2017-04-07 20:01:10      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:tar   lan   ref   color   text   code   .com   选择   black   

CSS样式

<style type="text/css">
        tt.tt1 {
<style type="text/css">
        p {
            background-color:yellow;
            font-size:xx-small;
        }
    </style>

  <p style="background:red;font-size:xx-large">今天天气好晴朗,处处好风光</p>
    <p>今天天气好晴朗,处处好风光</p>
    <p>今天天气好晴朗,处处好风光</p>
    <p>今天天气好晴朗,处处好风光</p>

    <tt>床前明月光,疑是地上霜。举头望明月,我叫郭德纲</tt>

样式2   . 是Class选择器


            background-color:red;
        }
        tt.tt2 {
        
            font-size:xx-large;
        }
        tt.tt3 {
            background-color:red;
        }
    </style>
<body>
     <tt class="tt1">床前明月光,疑是地上霜。举头望明月,我叫郭德纲</tt>
     <tt class="tt1">床前明月光,疑是地上霜。举头望明月,我叫郭德纲</tt>
     <tt class="tt2">床前明月光,疑是地上霜。举头望明月,我叫郭德纲</tt>
     <tt class="tt3">床前明月光,疑是地上霜。举头望明月,我叫郭德纲</tt>
</body>

样式3

<style type="text/css">
        p {
        
            background-color:yellow;
        }
        tt {
        
            background-color:green;
        }
    </style>

<p>今天天气好晴朗,处处好风光</p>
     <p>今天天气好晴朗,处处好风光</p>
     <p>今天天气好晴朗,处处好风光</p>
     <p>今天天气好晴朗,处处好风光</p>
     <tt>床前明月光,疑是地上霜。举头望明月,我叫郭德纲</tt>

 I的选择器 #是ID 选择器

<style type="text/css">
        .p1 {
            background-color:red;
        }
        #p2 {
            background-color:green;
        }
        #p3 {
            background-color:blue;
        }
        #p4 {
            background-color:black;
        }

<p class="p1">今天天气好晴朗</p>
    <p class="p1">今天天气好晴朗</p>
    <p id="p2">今天天气好晴朗</p>
    <p id="p3">今天天气好晴朗</p>
    <p id="p4">今天天气好晴朗</p>

关联选择器

<style type="text/css">
        p em {
            background-color:red;
        }
    </style>

 <p><em>今天天气好晴朗</em></p>

 

伪元素选择器

a:link {color: #FF0000} /* 未访问时的状态 */ text
a:visited {color: #00FF00} /* 已访问过的状态 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上时的状态 */
a:active {color: #0000FF} /* 鼠标按下去时的状态 */
first-letter 伪元素,匹配了第一个字母(
P::first-line {第一行
 <style type="text/css">
        A:active {
            text-decoration:none;
        }
        A:hover {
            font-size:xx-large;
        }
        P::first-letter {
        
            font-size:xx-small;
        }
        P::first-line {
        
            font-size:xx-large;
        }
    </style>
 <p>晋太元中,武陵人捕鱼为业,缘溪行,绕路之远近,忽逢桃花林,夹岸数百步<br/>
        晋太元中,武陵人捕鱼为业,缘溪行,绕路之远近,忽逢桃花林,夹岸数百步
    </p>
    <a href="#">超链接</a>
    <a href="#">超链接</a>
    <a href="#">超链接</a>
    <a href="#">超链接</a>
    <a href="#">超链接</

 

组合选择器
<style type="text/css">
        h1, h2, h3, h4, h5, h6, td {
            background-color:red;
        }
 <h1>我是一个粉刷匠</h1>
    <h2>我是一个粉刷匠</h2>
    <h3>我是一个粉刷匠</h3>
    <h4>我是一个粉刷匠</h4>
    <h5>我是一个粉刷匠</h5>
    <h6>我是一个粉刷匠</h6>

 




Css+Html

标签:tar   lan   ref   color   text   code   .com   选择   black   

原文地址:http://www.cnblogs.com/liuweiqiang11188/p/6679580.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!