zoukankan      html  css  js  c++  java
  • CSS笔记2

    1.     CSS基础选择器

    html负责结构 ,css负责样式,js负责行为

    css写在head标签里面,容器style标签

    <style type="text/css">

             body{

                                  background-color: pink;

                        }

    </style>

    常见的属性:

    h1{

                                    color: blue;

                                    font-size: 60px;

                                    font-weight: normal;

                                    text-decoration: underline;

                                    font-style:italic; ;

                         }

    1.1标签选择器

    就是使用html中的标签对来当做选择器

    1. 1.       所有标签都能够当做选择器,比如说body、h1、ul、span等等
    2. 2.       不管当前的标签藏的多深,都能够被选上
    3. 3.       选择的是所有的,而不是某一个,所有这是共性,而不是特性

    <style type="text/css">

                         a{

                                    /*去掉下划线*/

                                    text-decoration: none;

                         }

               </style>

    1.2类选择器

    .就是类的符号。类的英文class

    所谓的类,就是class的属性,任何的标签是不是都可以携带class属性

    class的属性可以重复使用,比如页面上可能有多个标签都有bg这个类

    <h1 class="bg">我是h1</h1>

    <h1>我是h1</h1>

    <h1>我是h1</h1>

    <p class="bg">我是p</p>

    <p>我是p</p>

    <p class="bg">我是p</p>

    <a href="#" class="bg">我是a</a>

    Css中里面用.表示类:

    .bg{

                         background-color: yellow;

     }

    同一个标签,可能同时属于多个类,用空格隔开

    <h1 class="bg" class="ft">我是h1</h1>  错误写法 初学者最常见的错误

    正确的写法

    <p class="bg ft">我是p</p>  正确的写法,使用空格隔开

    总结:

    1)    class是可以重复使用,也就是说,同一个页面上可能有多个标签属于某一个类

    2)    同一个标签可以同时携带多个类,但是必须使用空格隔开(注意一个空格)

    类的使用,决定一个人css的水平

    1.3、 id选择器

    #表示选择id

    #lh{

                         color: red;

                         font-size: 30px;

                         font-weight: bold;

       }

    总结:

    1. 任何的标签都可以有id,id的命名要以字母开头,可以有下划线、数字、大小写严格区分,也就是mm与MM是二个不同的id
    2. 同一个页面上的不能重复,即使是不一样的标签,也不能有相同的id,也就是:如果有一个p的id叫做haha,那这个界面上所有元素的id都不能叫haha。

    到底使用id还是用class

    答案:尽可能的用class,除非特殊情况可以用id

    id是js用的,也就是说,js通过id属性得到标签,所有css层尽量不用id,要不然js就会别扭,另外一层,我们认为一个有id的元素,默认会有动态效果

     

    就是一个标签,可以同时被多种选择器(class,标签,id)选中,这些选择器都可以选上同一个标签,来控制标签的内容(html),动作(js),排版(css)。

    二、css高级高级选择器

    2.1、后代选择器

    <style type="text/css">

               .div1 p{

                     color: red;

               }

    </style>

    空格就是代表后代 ,div1 p 就是.div1的后代中所有p

    强调一下,选择的是后代,后代不一定是儿子,可能是孙子或者曾孙

    div class="div1">

         <ul>

               <li>

                          <p>段落</p>

                          <p class="p1">段落</p>

                          <p>段落</p>

               </li>

         </ul>

              

    </div>

    能够被下面的选择器选择上

    .div1 p{

                        color: red;

                 }

    所以,看到这个选择器要知道是后代选择器,不是一般普通选择器

    后代选择器,就是一种平衡:共性、特性的平衡。当要把某个部分的所有的什么的内容(标签),进行样式改变的时候,就要想到后代选择器,描述是先祖结构

    2.2   交集选择器

    h3.special{

                                    color: red;

                         }

    选择的元素要同时满足二个条件:必须是h3标签,然后必须有同一个(special)类选择

    注意交集选择器没有空格

    并且当前的交集器可以连续交

    h3.special.continue{

                 text-decoration: underline;

           }

    3.3   并集选择器(分组选择器)

    h3,li{

               color: green;

      }

    用逗号就表示并集

    3.4 通配符*

    *代表所有的元素,效率不高,如果页面上的标签,效率越低,所以这个标签使用频率不多

    *{     

        margin : 0px;  

               padding: 0px;

    }

  • 相关阅读:
    [轉]Discuz!NT 数据库读写分离方案
    [轉]最流行的PHP MVC框架
    [轉]关于MS SQL的执行计划
    [轉]Oracle读写分离架构
    [轉]資料庫讀寫分離
    [轉]SQL Server 老是死锁,或提示进程已牺牲,怎麽解决
    [轉]让IIS支持解析json
    [轉]jquery.validate全攻略
    [轉]Flex判断对象的类型
    [轉]mssql 数据表修复方法
  • 原文地址:https://www.cnblogs.com/youjiajin/p/5977232.html
Copyright © 2011-2022 走看看