首页 > 其他分享> 文章详细

css基础

2019-09-04 16:52:18 阅读：162 来源： 互联网

标签：span Title color 基础 red div 选择器 css

css

　　当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

css语法

　　每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

css注释

/*注释*/

css几种引入方式

行内样式：行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

内部样式：嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

外部样式：外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

css选择器

元素选择器

p {color: "red";}

ID选择器

#i1 {
  background-color: red;
}

基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器:标签名*/
        /*p {*/
        /*    color: red;*/
        /*}*/
        /*类选择器:点+类名*/
        /*.c1 {*/
        /*    color: yellow;*/
        /*}*/
    /*    id选择器:#+id值*/
    /*    #d1 {*/
    /*        color: green;*/
    /*    }*/
    /*   通用/全局选择器 */
    /*    * {*/
    /*        color: blue;*/
    /*    }*/
    </style>
</head>
<body>
<div id="d1">老板好 我是23号技师 很高兴为您服务~  换一个!
<p  class="c1">天下唯我独尊~</p>
</div>
<div>老板好 我是23号技师 很高兴为您服务~  换一个!</div>

<p id="d2">天下唯我独尊~</p>
<span>尊 尊 尊 尊你妹尊</span>
<span  class="c1">尊 尊 尊 尊你妹尊</span>
</body>
</html>

组合选择器

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

        /*[hobby="jdb"] {*/
        /*    background-color: pink;*/
        /*}*/
        /*找input 具有属性名是hobby并且值是jdb的input标签*/
        input[hobby="jdb"] {
            background-color: greenyellow;
        }
    </style>
</head>
<body>
<input type="text" name="username" hobby="jdb">
<input type="text">
<span hobby="jdb">span</span>
</body>
</html>

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

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*连接态*/
        a:link {
            color: pink;
        }
        /*鼠标悬浮态*/
        a:hover {
            color: red;
        }
        /*鼠标点击态*/
        a:active {
            color: purple;
        }
        /*访问过后的状态*/
        a:visited {
            color: dimgrey;
        }
    /*    input框被点击的状态 称之为获取焦点*/
        input:focus {
            background-color: orange;
        }
        input:hover {
            background-color: red;
        }

    </style>
</head>
<body>
<a href="https://www.chouti.com">click me!</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: gold;*/
        /*}*/

        p:before {
            content: '$';
            color: gold;
        }
        /*after在解决浮动的问题上 很有用*/
        p:after {
            content: "?";
            color: red;
        }
    </style>
</head>
<body>
<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: red;
        }
        /*.c1 {*/
        /*    color: orange;*/
        /*}*/
        /*p {*/
        /*    color: greenyellow;*/
        /*}*/

    </style>
</head>
<body>
<p id="d1" class="c1" style="color: green">快要下课了,我想吃饭了!</p>
</body>
</html>

标签：span,Title,color,基础,red,div,选择器,css
来源： https://www.cnblogs.com/zrh-960906/p/11460095.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css基础