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

前端 -- css

时间:2019-08-08 23:25:13      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:导入   20px   cti   行操作   height   span   eve   重复   click   

css样式的引入

1. 行内引入

技术图片
<div>
    <p style="color: green">我是一个段落</p>
</div>
行内引入

2. 内接样式

技术图片
<style type="text/css">
    /*写我们的css代码*/
        
    span{
    color: yellow;
    }

</style>
内接样式

3. 外接样式 - 链接式

技术图片
<link rel="stylesheet" href="./index.css">
外接样式 - 链接式

4. 外接样式 - 导入式

技术图片
<style type="text/css">
        @import url(‘./index.css‘);
</style> 
外接样式 - 导入式

最简单的基本样式

技术图片
 <style>
        div{
            color: red;
            width: 200px;
            height: 200px;
            /*background-color: yellow;*/
        }
    </style>
基本样式

基本选择器

标签选择器

标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某一个,所以说 "共性" 而不是 ”特性“

技术图片
body{
    color:gray;
    font-size: 12px;
}
/*标签选择器*/
p{
    color: red;
font-size: 20px;
}
span{
    color: yellow;
}
标签选择器

类选择器

所谓类:就是class . class与id非常相似 任何的标签都可以加类,但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类,用空格隔开

技术图片
.lv{
     color: green;
 
 }
 .big{
     font-size: 40px;
 }
 .line{
    text-decoration: underline;

  }
类选择器
技术图片
<!-- 公共类    共有的属性 -->
     <div>
         <p class="lv big">段落1</p>
         <p class="lv line">段落2</p>
         <p class="line big">段落3</p>
</div>
HTML部分

id选择器

同一个页面中id不能重复。

任何的标签都可以设置id ,id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值

技术图片
#box{
    background:green;
}
            
#s1{
    color: red;
}

#s2{
    font-size: 30px;
}
id选择器
技术图片
<body>
    <div id="box">娃哈哈</div>
    <div id="s1">爽歪歪</div>
    <div id="s2">QQ星</div>
</body>
HTML部分

通用选择器

所有的标签都会被选中

技术图片
* {color : red;}    
通用选择器

高级选择器

后代选择器

使用空格表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子)

技术图片
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div span{
           color: tomato;
        }
    </style>
</head>
<body>
    <div>
        我是div标签的content
        <span>西红柿色1</span>
        <p>
            在div-p标签中
           <span>西红柿色2</span>
        </p>
    </div>
    <span>我只是一个单纯的span标签</span>
</body>
后代选择器

子代选择器

使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p

技术图片
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div>span{
           color: tomato;
        }
    </style>
</head>
<body>
    <div>
        我是div标签的content
        <span>西红柿色1</span>
        <p>
            在div-p标签中
           <span>西红柿色2</span>
        </p>
    </div>
    <span>我只是一个单纯的span标签</span>
</body>
子代选择器

毗邻选择器

使用+表示毗邻选择器。比如span+a,只找span标签下面一个的a标签,找不到就算了

技术图片
<style>
       span+a{
           color: tomato;
        }
    </style>
    <div>
        <a>我是a0标签</a>
        <span>span标签</span>
        <a>我是a1标签</a>  <!--变色-->
        <a>我是a2标签</a>
    </div>
毗邻选择器

弟弟选择器

使用~表示弟弟选择器。比如span~a,找span下面所有的a标签

技术图片
 <style>
       span~a{
           color: tomato;
        }
    </style>
    <div>
        <a>我是a0标签</a>
        <span>span标签</span>
        <a>我是a1标签</a>   <!--变色-->
        <a>我是a2标签</a>   <!--变色-->
    </div>
弟弟选择器

属性选择器

属性选择器,字面意思就是根据标签中的属性,选中当前的标签。

技术图片
<style>
       /*a[href]{*/
            /*color: green;*/
        /*}*/
        /*a[href=‘http://www.taobao.com‘]{*/
            /*color: lightpink;*/
        /*}*/
        input[type=‘text‘]{
            background-color: lightblue;
        }
 </style>
 <body>
     <div>
        <a href="http://www.taobao.com">我是a0标签</a>
        <span>span标签</span>
        <a href="http://www.jd.com">我是a1标签</a>
        <a href="http://www.mi.com">我是a2标签</a>
        <a>没有href属性</a>
    </div>
    <input type="text">
    <input type="password">
 </body>
属性选择器

并集选择器

多个选择器之间用逗号隔开,表示选中的页面中的多个标签。一些共性的元素可以使用并集选择器

技术图片
<style>
    ul,ol,span{
       background-color: gainsboro;
    }
</style>
<body>
<ul>
    <li>u-first</li>
</ul>
<ol>
    <li>o-first</li>
</ol>
</body>
并集选择器

交集选择器

使用 . 表示交集选择器。第一个标签必须是标签选择器,第二个标签必须是类选择器 语法:div.active

技术图片
<style>
    div.box1.box2{
            background-color: red;
            width: 200px;
            height: 200px;
    }
</style>
<body>
    <div class="box1 box2">box1box2</div>
    <div class="box1">box1</div>
    <div>aaa</div>
    <span class="box1">span标签</span>
</body>
交集选择器

伪类选择器

提前对标签进行定义

技术图片
<style>
        a:link{
            color:tomato;
        }
        a:visited{
            color: gray;
        }
        a:active{
            color: green;
        }
        input:focus{
            background-color: aquamarine;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: lightgray;
        }
        div:hover{
            background-color: pink;
        }
</style>
<body>
<a href="http://www.jd.com">京东</a>
<a href="http://www.xiaohuar.com">校花</a>
<input type="text">
<div></div>
</body>

其中
a : link(未访问过的链接) visited(访问过的链接) active(鼠标在链接按下时)
input: focus(获取焦点后)
通用: hover(鼠标悬浮时)(通用)
伪类选择器

伪元素选择器

对选到的元素进行操作(通用)

技术图片
<style>
        p:first-letter{
            color: green;
        }
        p:before{
            content: ‘**‘;
            /*color: pink;*/
        }
        p:after{
            content: ‘.....‘;
            color: lightblue;
        }
</style>
<body>
<div>春江水暖鸭先知</div>
</body>

其中
first-letter    操作第一个字符
before    在语句前操作
after    在语句后操作
伪元素选择器

 

前端 -- css

标签:导入   20px   cti   行操作   height   span   eve   重复   click   

原文地址:https://www.cnblogs.com/biulo/p/11324147.html

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