Css+Html

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>

 




posted @ 2017-04-07 18:51  liusheng11188  阅读(177)  评论(0)  编辑  收藏  举报