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

CSS 01

时间:2019-11-13 22:22:10      阅读:33      评论:0      收藏:0      [点我收藏+]

标签::active   属性选择器   默认   arc   ack   big   some   html   http   

CSS

  • 层叠样式表 Cascading Style Sheet

注释

  • 单行注释
  • 多行注释
/*单行注释*/

/*
多行注释1
多行注释2
多行注释3
*/

CSS的语法结构

  • 选择器 {属性1: 属性值1}

CSS的三种使用方式

  • 通过link标签映入外部CSS文件
    • <link rel="stylesheet" href="test.css">
  • 直接在head内通过style标签写CSS代码
<head>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
  • 行内式 , 通过在body内的标签内部的style属性
    • <h1 style="color: red">bigb</h1>

标签查找

基本选择器

  • 标签选择器

  • id选择器

  • 类选择器

  • 通用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <style>
        span {
            color: darkred;
        }

        #d1 {
            color: darkgreen;
        }

        .c1 {
            color: darkblue;
        }

        * {
            color: darkgoldenrod; /*会覆盖上面的样式*/
        }
    </style>
</head>
<body>
<span>这是一个span标签</span>
<div id="d1">这是一个div标签</div>
<p class="c1">这是一个p标签</p>
</body>
</html>

组合选择器

  • div span 后代选择器
    • 只要是在div中的span, 不管是第几层, 都能找到
  • div>span 儿子选择器
    • 只能找到div下一层级的span标签
  • div+span 毗邻选择器
    • 下面紧挨的一个span标签
  • div~span 弟弟选择器
    • 同层级下面所有的span标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style>
        div span {
            color: darkred;
        }
    </style>
</head>
<body>
<div>这是一个div标签1
    <span>这是一个在div标签1中的span标签1</span>
    <span>这是一个在div标签1中的span标签2</span>
    <p>
        <span>这是一个在div1下面的p标签中的span标签</span>
    </p>
    <span>这是一个在div标签1中的span标签3</span>
</div>
<span>这是div后面的span标签1</span>
<p>这是一个p标签</p>
<span>这是div后面的span标签2</span>
</body>
</html>

属性选择器

  • 任何标签都有自己的默认属性, 如id, class等
  • 我们也可以自行给标签添加属性, 因此也可以通过这些自添加的属性查找
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /**[username] {*/
            /*color: darkred;*/
        /*}*/
        
        *[username="bigb"] {
            color: darkred;
        }
    </style>
</head>
<body>
<p username="bigb">p标签1</p>
<p username="blake">p标签2</p>
<p username="black">p标签3</p>
</body>
</html>

伪类

  • 伪类用于向某些选择器添加特殊效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style>
    a:link {color: red;}        /*未访问的连接*/
    a:visited {color: darkgrey;} /*已访问的连接*/
    a:hover {color: darkgreen;} /*鼠标悬浮在连接上*/
    a:active {color: darkblue}  /*点击连接*/
    </style>
</head>
<body>
<a href="https://baidu.com">click here to search</a>
</body>
</html>

伪元素

  • 伪元素用于向某些选择器添加特殊效果
  • first-litter, first-line, before, after
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style>
        p:first-letter {
            font-size: 40px;
            color: darkred;
        }
        p:before {
            content: "***";
            color: darkgreen;
        }
        p:after {
            content: "???";
            color: darkgreen;
        }
    </style>
</head>
<body>
<p>sometime I rock sometime I roll sometime it's not me is control.</p>
</body>
</html>

选择器优先级

  • 选择器相同时, 就近原则(覆盖)
  • 选择器不同时, 行内 > id > 类 > 标签

CSS 01

标签::active   属性选择器   默认   arc   ack   big   some   html   http   

原文地址:https://www.cnblogs.com/bigb/p/11853404.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!