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时,无法影响就近原则。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,753评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,668评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,090评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,010评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,054评论 6 395
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,806评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,484评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,380评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,873评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,021评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,158评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,838评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,499评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,044评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,159评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,449评论 3 374
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,136评论 2 356

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,754评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,491评论 1 45
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,088评论 0 40
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,340评论 0 7
  • 2018-05-10 周四 晴 仍然坚持早起,坚持跑步,坚持为家人做了一顿早餐。早餐还是比较丰富,打了营养豆浆,...
    周舟阅读与写作阅读 292评论 0 0