CSS总结笔记(一)

总结现在的互联网前端三层:

HTML     超文本标记语言    从语义的角度描述页面结构

CSS        层叠式样式表       从审美的角度负责页面样式

JS           JavaScript             从交互的角度描述页面行为

一、CSS基本语法

CSS: cascading style sheet:层叠式样式表

css可以写在单独的文件里,也可以写在style标签里(head中)。

<style type=”text/css”>

      xx{

          color:red;

          font-size:14px;

      }

</style>

二、CSS常见属性

字符颜色:color  可以是red\blue等自带属性,也可以是rgb,16进制等。  sublime快捷生成:c

字号大小:font-size 单位:像素   sublime快捷生成:fos

背景颜色:background-color  sublime快捷生成:bgc

加粗/不加粗: font-weight:bold/normal   sublime快捷生成:fwb/fwn

斜体/不斜体;font-style:italic/normla  sublime快捷生成:fsi/fsn

下划线/无下划线:text-decoration:underline/none  sublime快捷生成:tdu/tdn

三、基础选择器

3.1 标签选择器

所有的标签都可以是选择器,例如ul\li\label\dt\dl\input,并且全局通用,即选择的是页面上所有这种类型的标签,用于描述该类标签的共性。

3.2 id选择器

任何的html标签都可以有id属性,表示这个标签的唯一标识。命名遵循命名法,一个html页面不能出现相同的id

一个标签可以被多个css选择器选择,这就是“层叠式“的第一层含义

3.3 类名选择器

class 属性与id属性非常相似,区别就是class属性可以重复,即多个标签可以属于一个类。代表对一整类的标签进行统一修改,css中用 “.”来表示类

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

要用公共类的思想设计类。尽可能的用class极特殊情况用id(id会与后台交互时产生沟通成本,因为类关联样式,id关联行为)

四、高级选择器

4.1 后代选择器

表示一个父标签内 所有子标签的共性。

  <styletype="text/css">

         .div1 p{                          

                  color:red;

          }      

</style>

<divclass="div1">

<ul>

     <li>

         <p>段落</p>

        <p>段落</p>

        <p>段落</p>

     </li>

</ul>      

</div>

其中 空格可以多次出现。例如:

.div1 .li2 p{

        color:red;            

}

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

4.2 交集选择器

交集选择器,意思就是一个选择器可以设置在两个标签的交集标签中。这个写法是IE7开始兼容的

 h3.special{

           color:red;

}

交集选择器可以取连续交集(一般不要这么写)

h3.special.zhongyao{

        color:red;

}

交集选择器,我们一般都是以标签名开头,比如div.haha  比如p.special。

4.3 并集选择器 

用逗号表示

h3,li{

        color:red;

}

4.4 通配符

* 表示所有元素,效率不高,标签多的情况下基本上没什么效率了,所以基本不可能这么用

*{

     color:red;

}

五、其他选择器(CSS3选择器)

5.1 儿子选择器

父标签的直属标签可用。IE7开始兼容,IE6不兼容。

div>p{

         color:red;

}

5.2 序选择器

选择某一组标签中的某个标签。IE8开始兼容

例子:选择ul下的li中第一个

 <styletype="text/css">

         ul li:first-child{

                  color:red;

         }      

</style>

5.3 下一个兄弟选择器

+,表示下一个兄弟。IE7开始兼容

<styletype="text/css">  

         h3+p{

                 color:red;

                }      

</style>

六、CSS的继承性和层叠性

6.1 继承性

当给父标签设置某些属性后,后代所有标签都继承了这些属性,这就是继承性。

可继承属性:

color、text开头、line开头的、font开头 等关于文字样式的

6.2 层叠性

层叠性:CSS处理冲突的一种能力。

CSS中是有先后顺序的,先表明的属性值会被后表明的属性层叠掉,也就是说被覆盖了。

当不同选择器作用在同一个标签上时(选中到标签时),优先权重为:id选择器数量 > 类选择器数量 > 标签选择器数量,若权重相同,则按先后顺序表明,当使用并集选择器时需要拆开计算 不能合起来计算权重。

通过继承来的时候(不直接选中某个元素),权重是0,当大家都是0时 遵循就近原则:谁描述的近听谁的、

特例:当两个权重都是0,且根据就近原则一样近时,则继续比较权重,若权重一样则继续按先后顺序。

当使用!important标记时,来给一个属性提高权重:k:v !important

一般来说不允许使用,因为会让CSS写的很乱。

注意:

1.!important提升的是一个属性 而不是一个选择器。

2.!important无法提升继承的权重,原本是0则还是0

3.!important当权重都是0时,无法影响就近原则。

猜你喜欢

转载自blog.csdn.net/weixin_34362991/article/details/86881010