css基本知识

作者: huhu502 | 来源:发表于2016-08-27 20:01 被阅读17次

有了这些CSS套路，你也可以做一个漂亮的简历
第6-9章CSS
CSS基本知识
CSS基本知识
css基本知识
css基本知识
CSS葵花宝典——基础入门
CSS-IFC：字体度量、line-height、vertica
html和CSS基础课程（7-1 7-2 7-3 7-4）
CSS position 知识

1）内嵌式写法

 <head>

    <meta charset="utf-8">
    <style type="text/css">css代码</style>
 </head>

2）常用属性

Paste_Image.png

3）选择器的分类
一：基础选择器

标签选择器

  <head>

    <meta charset="utf-8">
    <style type="text/css">
    p{
        color: red;
        font-size: 10px;
        width: 40px;
        height: 20px;
        background-color: pink;
    }
    </style>
    </head>
    <body>
    <p>文件子</p>
    </body>

类选择器

a, 先定义类样式

  <style type="text/css">

    /* 类样式的定义 */
    .fontcolor{
        color: green;
    }
    </style>

b,然后要调用它

  <p class="fontcolor">dfsdfsdfs</p>

    调用两个样式
    <p class="fontcolor fontsize">dfsdfsdfs</p>

c，命名规范
可以用中文，但是不推荐
不能以特殊字符开头比如@，但是‘_’可以。
不建议使用标签名，虽然可以使用

Paste_Image.png

id选择器
1）id必须要唯一，不建议多个标签使用同一个id选择器样式
2)一个标签只能调用一个id样式

 <p id="p_color p_size">p1</p>这样的写法不正确

      <head>

    <meta charset="utf-8">
    <style type="text/css">
        #p_color{
            color: red;
            font-size: 20px;
        }
    </style>
  </head>
  <body>
    <p id="p_color">p1</p>
    <p>p1</p>
    <p>p1</p>
  </body>

通配符选择器
1)将页面中的所有的标签的样式都改变
2)进行页面样式初始化

 <head>

    <meta charset="utf-8">
    <style type="text/css">
       *{
            color: red;
            font-size: 20px;
        }
    </style>
  </head>
  <body>
    <p>p1</p>
    <div>div</div>
    <span>span1</span>
  </body>

二：复合选择器

标签指定式选择器
既。。又
1，两个条件都要满足的标签

  1）

    p.two{
        color: green;
        }
    <p class="two">字体1</p>
    2）
    p#one{
        color: pink;
    }
    <p id="one">字体2</p>

后代选择器
1，选择器之间必须要有空格
2，后面的是前面的子代，在父代的基础上选择子代
第一种

    <head>

    <meta charset="utf-8">
    <style type="text/css">
   div p{
    color: red;
   }
    </style>
  </head>
  <body>
    <div>
        <p>niahifahdfioej</p>
    </div>
    <p >字体1</p>
  </body>

第二种

   <head>

    <meta charset="utf-8">
    <style type="text/css">
   .one p{
    color: red;
   }
    </style>
  </head>
  <body>
    <div class="one">
        <p>niahifahdfioej</p>
    </div>
    <p >字体1</p>
  </body>

第三种

 div.one p{

    color: red;
   }

并集选择器
1，将样式集体声明，比通配符选择器要弱点可以自己选择。

     <head>

    <meta charset="utf-8">
    <style type="text/css">
   div,span{
    color: red;
   }
    </style>
   </head>
  <body>
    <div>div</div>
    <p>p</p>
    <span>span</span>
  </body>