《小白说》之 CSS基本介绍

css( cascading style sheets)层叠样式表:给html里的骨架(标签)穿衣服(属性)。

style标签:是CSS标签。

css 3种写法:
1)行内式:每个标签都有一个style属性,所以可以在标签身上写CSS属性。免除了选择器部分。

<div style=' k:v; k:v; k:v; '><div>

2)内嵌式:通过style标签,放在head标签中。

<style type='text/css'>

 选择器{
   k:v;
   k:v;
  }
  
</style>

3)外链式:将属性写在css文件中,通过连接标签link连接。工作中常用,复合W3C的理念。

<link type='text/css' rel='stylesheet' href='css路径'/>

元素的显示方式:

css中元素分为两类:

一:独占一行block:典型:div p h1-h6 ol ul li dl dt dd
独占一行,可以设置宽高。

二:不换行的:
行内元素inline:典型:span a b u i strong del em ins s
一行内显示,宽高不生效,自适应内容。

行内块inline-block:典型:img input
即可认为设置宽高又可以在一行显示。

元素之间显示方式切换:修改display属性

css代码由2部分组成:
第一是选择器:
一:基础选择器4类:

标签选择器:
类选择器:.
id选择器:#
通配符:*

二:复合选择器:

后代选择器:空格
并集选择器:,
指定选择器:标签名.id/类 (权重最高,高手常用)

例如:div.box
     div.#box

第二是属性:键值对 (css学习的重点)

K:v;

css两大特性

1.继承性

作用:子元素可以继承父元素的样式。
什么样的属性才可以继承:(经验之谈)
text-,font-,line-开头的属性都是可以继承的color.也可以a除外。

具体应用:
在写页面之前我们会通过给body设置一个字体,来将页面上所有的标签都能够继承这个属性。

特殊性:

  1. a标签的颜色不能继承,如果一定要修改a标签的颜色直接作用在a标签上面。
  2. h标签的大小不能继承,如果一定要修改h标签的大小直接作用在h标签上面。

2.层叠性
是浏览器处理冲突的一个特性。

作用:同一属性后写的会覆盖先写的,权重高的选择器中的属性会概掉权重低的。

优先级

!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承**

变数:!important
注意:虽然important是一个变数,但是不能作用在继承上。!important属性无法继承。
权重:

涉及权重的2点:选择器和css书写形式

作用:多个选择器组合以后的优先级。
通俗简便算法:

标签选择器:1两;
类选择器:1斤;
id选择器:1吨;
复合选择器:把个部分相加即可。

总结
权重其它是优先级的算法
优先级是层叠表现
选择器工作的一个原理:
选择器在查找元素的时候不是从左往右找,而是从右往左找

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1 92
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,053评论 0 40
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,613评论 0 30
  • 朝朝暮暮,朝朝暮暮,,,, 越走越快的步伐,我怎么都赶不上你,情怨之中…… 愿我是你的唯一…… …… …… ……
    帅格阅读 217评论 2 1
  • 冬婆婆带着风哥哥乘着飞船来了以流星姿势迅速闯入哦呵呵呵我乱了阵脚本以为穿袄就够了,可是不穿棉裤也哆嗦这个冬婆婆也够...
    简单的小诺儿阅读 164评论 0 2