首页 > Web开发 > 详细

前端内容之CSS

时间:2019-09-04 19:29:30      阅读:76      评论:0      收藏:0      [点我收藏+]

一、打开css的三种方式

第一种:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三种打开方式</title>
    <!--<link rel="stylesheet" href="mycss.css">-->
</head>
<body>
<p>
  <b>下午好大宝贝儿</b>
</p>
</body>
</html>

第二种:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三种打开方式</title>
    <style>
        p {
            color: aquamarine;
        }
    </style>
</head>
<body>
<p>
  <b>下午好大宝贝儿</b>
</p>
</body>
</html>

第三种(不推荐使用):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三种打开方式</title>
</head>
<body>
<p style="color: bisque">
  <b>下午好大宝贝儿</b>
</p>
</body>
</html>

二、基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <style>
        /*标签选择器:标签名*/
        p {
            color: crimson;
        }
        /*类选择器:点+类名*/
        .c1 {
            color: deeppink;
        }
        /*id选择器:#+id值*/
        #d1 {
            color: dodgerblue;
        }
        /*通用/全局选择器*/
        * {
            color: greenyellow;
           }
    </style>
</head>
<body>
<div id="d1">你以为有钱人很快乐吗?
    <p class="c1">不不不,他们的快乐你根本想象不到</p>
</div>
<div>千万不要自己感动自己。大部分人看似的努力,不过是愚蠢导致的</div>
<p id="d2">别人骂你你要听,别人夸你你别信</p>
<span class="c1">别灰心, 人生就是这样起起落落落落落落落落落落落的</span>
<span>只有正真努力过的人才知道,天赋有多重要</span>
</body>
</html>

三、组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器*/
        div span {
            color: greenyellow;
        }
        /*儿子选择器*/
        div>span {
            color: aqua;
        }
        /*毗邻选择器:紧挨着的下面的一个*/
        div+span {
            color: deeppink;
        }
        /*弟弟选择器:同级别的下面所有的标签*/
        div~span {
            color:saddlebrown;
        }
    </style>
</head>
<body>
<span>div上面的第一个span</span>
<span>div上面的第二个span</span>
<div>
    <span>div里面的第一个span</span>
    <p>div里面的第一个p
        <span>p里面的第一个span</span>
        <span>p里面的第二个span</span>
    </p>
    <span>div里面的最后一个span</span>
</div>
<span>div下面的第一个span</span>
<span>div下面的第二个span</span>
<span>div下面的第三个span</span>
</body>
</html>

四、属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        1.具有某个属性名
        2.具有某个属性名及属性值
        3.具有某个属性名及属性值的某个标签
        */
        /*找到只有hobby这个属性名的所有标签*/
        [hobby] {
            background-color:red;
            color:white;
        }
        /*找到hobby这个属性是“secret”的所有标签*/
        [hobby="secret"] {
            background-color: deeppink;
            color:greenyellow;
        /*找到input 具有属性名是hobby并且值是secret的input标签*/
        input[hobby="secret"]{
            background-color: aquamarine;
        }
    </style>
</head>
<body>
user<input type="text" name="user" hobby="secret">
xxx<input type="text" >
<span hobby="secret">长得丑就是一种病,不然为什么整型医院叫医院</span>
</body>
</html>

五、分组嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            color: aqua;
        }
        div {
            color: greenyellow;
        }
        span {
            color: saddlebrown;
        }
        /*分组*/
        div,span,p {
            color: darkslateblue;
        }
        /*嵌套,多个不用的选择器,可以组合使用*/
        #d1,.c1,span {
            color: deeppink;
        }
    </style>
</head>
<body>
<p id="d1">p1</p>
<p id="d2">p2</p>
<div >div1</div>
<div class="c1">div2</div>
<span>span</span>
</body>
</html>

六、伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*连接态*/
        a:link {
            color:deeppink;
        }
        /*鼠标悬浮态*/
        a:hover {
            color: orangered;
        }
        /*鼠标点击态*/
        a:active {
            color: red;
        }
        /*访问过后的状态*/
        a:visited {
            color: dodgerblue;
        }
        /*input框被点击的状态,称之为获取焦点*/
        input:focus {
            background-color: greenyellow;
        }
        input:hover {
            background-color: deeppink;
        }
    </style>
</head>
<body>
<a href="http://www.4399.com">
    <b>明老师.avi</b>
</a>
这是一个输入框:<input type="text">
</body>
</html>

七、伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:first-letter {
            font-size: 48px;
            color: deeppink;
        }

        p:before {
            content: "%";
            color:gold;
        }
        /*after在解决浮动的问题上,很有用*/
        p:after {
            content: "@";
            color: red;
        }

    </style>
</head>
<body>
<p>春眠不觉晓</p>
<p>春眠不觉晓</p>
<p>春眠不觉晓</p>
<p>春眠不觉晓</p>
<p>春眠不觉晓</p>
</body>
</html>

八、选择器优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="mycss.css">
    <style>
        /*
            1.选择器相同的情况下:就近原则
            2、选择器不同的情况下:
               行内 > id选择器 > 类选择器 > 标签选选择器
        */
        #d1 {
            color: gold;
        }
        .c1 {
            color: deeppink;
        }
        p {
            color: saddlebrown;
        }
    </style>
</head>
<body>
<p id="d1" class="c1">长的丑活得久,长得帅老的快</p>
</body>
</html>

 

前端内容之CSS

原文:https://www.cnblogs.com/spencerzhu/p/11460932.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!