CSS样式与布局详解-CSDN博客

本文链接：https://blog.csdn.net/ShunXiangL/article/details/52895614

1、关联选择器

　　标签是可以嵌套的，要让相同的标签中的不同标签显示不同样式，就可以使用此选择器

p { color:#00FF00; }
p b { color:#FF0000; }

<p>P标签<b>刘德华</b>段落样式</p>
<p>P标签段落</p>

2、组合选择器

　　对于多个不同选择器进行相同样式设置的时候应用此选择器。

p,div { color:#FF0000; }
<p>P标签显示段落。</p>
<div>DIV标签显示段落</div>

　　多个不同的选择器要用逗号分隔开。
这里写图片描述

3、伪元素选择器

　　其实就是在html中预先定义好的一些选择器。称为伪元素。是因为 CSS 的术语。

格式：标签名：伪元素。类名标签名。类名：伪元素。都可以。

a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移动到超链接上的状态（未点击）。
a:active 点击超链接时的状态。
使用顺序： L - V - H - A
P:first-line 段落的第一行文本。
P:first-letter 段落的第一个字母。
:focus 具有焦点的元素。IE6浏览器不支持，在FireFox中可以看到效果。

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">

        /*!*关联选择器，选择器中的选择器*!
        span b{
            background-color: #09F;
            color: #FFF;
        }

        !*组合选择器,对多种选择器进行相同样式定义*!
        .haha, div b {
            background-color: #000;
            color: #F00;
        }*/


        /*超连接的状态*/

        /*未访问*/
        a:link {
            background-color: #06F;
            color: #FFF;
            text-decoration: none;
            font-size: 18px;
        }
        /*鼠标悬停*/
        a:hover {
            background-color: #FFF;
            color: #F00;
            font-size: 24px;
        }
        /*点击效果*/
        a:active {
            background-color: #000;
            color: #FFF;
            font-size: 36px;
        }
        /*访问后效果*/
        a:visited {
            background-color: #FF9;
            color: #000;
            text-decoration: line-through;
        }

        div:hover{
            background-color: #FF0000;
            color: #FFFFFF;
        }

        input:focus {
            background: #090;
            color: #FFF;
        }

    </style>
</head>
<body>

    <input type="text"/>
    <input type="text"/>

    <hr />

    <a href="http://www.baidu.com" target="_blank">伪元素选择器演示</a>

    <hr />

    <!--
    css 和 html 结合的第一种方式。
    1、每个html标签中都有一个style样式属性。该属性就的值就是css代码。
    2、使用style标签的方式。一般都定义在head标签中。

    优先级：
    标签选择器 < 类选择器 < id选择器 < style属性

    -->
    <br>
    <div id="qq" >这是一个<b>div区域</b></div>
    <div class="haha">这是一个div区域2</div>
    <span>span<b>区域1</b></span>
    <span>span区域2</span>
    <p>这个一个<b>段落1</b></p>
    <p>这个一个段落2</p>

</body>
</html>

css样式结合运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css演示</title>

    <style type="text/css">

        ul{
            list-style-type: none;
        }

        table {
            border-bottom: #00CC00 double 3px;
            border-left: #FF0000 solid 3px;
            border-right: #FFFF00 dashed 3px;
            border-top: #00CC00 groove 3px;
            width: 500px;
        }

        table td {
            border:#0CF dotted 1px;
            padding: 20px;
        }

        div {
            border:#FF9900 dotted 1px;
            height: 200px;
            width: 400px;
        }

        input {
            border: none;
            border-bottom:#000000 1px solid;
        }

        .haha {
            border: none;
        }

    </style>


</head>
<body>

姓名：<input type="text"/>成绩：<input type="text"/>

<hr/>

<div>div区域</div>

<table>
    <tr>
        <td><input type="text" class="haha"/></td>
        <td><input type="text" class="haha"/></td>
    </tr> <tr>
        <td>单元格一</td>
        <td>单元格二</td>
    </tr>
    <tr>
        <td>单元格一</td>
        <td>单元格二</td>
    </tr>
</table>

<ul>
    <li>无序项目列表</li>
    <li>无序项目列表</li>
    <li>无序项目列表</li>
    <li>无序项目列表</li>
</ul>

</body>
</html>

CSS布局

1、图文混排

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图文混排</title>

    <style type="text/css">

        #imgtext {
            border: #0066FF dashed 1px;
            width: 500px;
        }

        #img{
            float: right;
        }

        #text {
            color: #FF66CC;
            font-family: "华文隶书";
        }

    </style>

</head>
<body>
<div id="imgtext">
    <div id="img">
        <img src="../image/1.PNG"/>
    </div>
    <div id="text">
        这是一张图片，
        哇哇哇！
    </div>
</div>
</body>
</html>

2、图像签名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像签名</title>
</head>

<style type="text/css">

    #imgtext {
        position: absolute;
        top: 80px;
        left: 200px;
    }

    #text {
        font-family: "宋体";
        font-size: 24px;

        position: absolute;
        top: 50px;
        left: 10px;

    }

    #imgtext {
        border: #FF6600 dashed 1px;
        width: 500px;
    }

</style>

<body>

<div id="imgtext">
    <div id="img">
        <img src="../image/1.PNG" height="300" width="500"/>
    </div>
    <div id="text">我的截图,哈哈哈哈哈哈呵呵呵呵呵呵呵!</div>
</div>
</body>
</html>