CSS的三种样式

使用CSS样式表的三种方式

1.内联样式 又称为"行内样式","内联样式";
特点:将CSS内容定义在HTML标记中
语法:

  <div style = "background : red;color : green">
    内联样式
  </div>

不推荐使用:不利于样式和结构进行分离,由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。

2.内部样式 在网页中一个独立的地方表明该网页要用到的所有样式语法
特点:将样式和结构进行了一定程度的分离
语法:

<style>
  div {
    background : red;
    color : green;
  }
</style>

一般情况下亦不推荐使用虽然进行了分离,但全部也在页面中显得页面非常臃肿。

3.外部样式表 独立于任何网页位置处,声明一个样式表文件(样式表名.css),在文件中声明样式。当需要样式时在对应的网页中进行引用
语法:

<head>
  <link rel="stylesheet" href="xxx.css">
</head>

推荐使用,对样式和结构进行了完全分离,当页面需要进行改版和变化时只需要改变引入对应的css样式表即可,同时一个样式表亦可以被多个网页进行引用,可提高复用率。

注意

1、css样式文件名称以有意义的英文字母命名,如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。

补充CSS样式表特征

  • 继承性
    必须是父子(有层级关系)结构
    大部分的CSS效果都是可以直接继承给子元素的

所有元素可继承:visibility和cursor。
内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承:text-indent和text-align。
列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承:border-collapse。

  • 层叠性
    可以给一个元素定义多个样式规则,规则中的样式如果不冲突的话可以全部应用在当前的元素上
div {
  color : red;
}
div {
  background:yellow;
}
div {
  font-size:26px;
}
最终渲染结果为所有div背景为黄色字体颜色为红色字体大小为26px;
  • 优先级
    在层叠性基础上,如果样式声明冲突(重复)的话,则按照默认的优先级去应用样式由。
    1.浏览器默认设置 优先级最低
    2.样式表(内部和外部) 优先级权重相同,最终样式采用就近原则 --- 后定义优先
    3.内联样式 优先级最高
  • !important原则
    主要用于调整样式的优先级

!important 加在谁的后面,样式就以谁为主

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器...
    百作不死的学习阅读 1,160评论 0 7
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,068评论 0 40
  • (一) 洗脑,成为现在比较常见的一个“术语”,但是我认为洗脑要成功,以下条件是相对要具备的: 信息环境的相对封闭性...
    天涯1阅读 331评论 0 0
  • 军旗猎猎,脚步声声。 虎步生威,挥刀雷鸣。 持枪受阅,挎枪出征。 热血男儿,铁骨铮铮。
    文章锤子阅读 322评论 3 7