CSS采用器小结,搜狐信箱的CSS开发

新浪邮箱的CSS开发(一)

2012/06/03 · CSS ·
CSS

来源:腾讯网信箱的博客

腾讯网信箱是个巨大而且细节繁多的种类,注定了前端开发中样式管理的复杂程度极度高。若是没有二个创立的系统来保管体制,开发和掩护的难度是不行想像的。从极速3.5版本伊始,大家就平昔依照并频频革新那套规则,以后就来享受一下~

支付考虑

在错综复杂的体裁面前,CSS显得过于简陋。于是我们不得不人为的增进部分思想方法和规则来支持大家管理体制。

大家借鉴了“面向对象”中的“封装”和“继承”来支付CSS,使我们能很大程度上重用CSS代码的还要又未必在改动CSS代码时因为过分重用而麻烦出手。

各种页面都由众多成分(除非特别指出,本文的“成分”都不是指那样的HTML成分)组成,成分得以大到全方位界面框架,也得以小到贰个图标。元素互相嵌套、组合,形成了最后的页面。

对此任意成分,大家建立这样一种模型:

一,全部的成分内部都可以嵌套其他因素;

如:“a”里可以嵌套“a的头”、“b”等。

美高梅开户网址 1

二,成分内部的要素中,有的是“私有的”,只可以在这一个成分内选取,其样式也不会受父成分之外的CSS规则影响,有的是“公有的”,可以现身在别的岗位;

如:“a的头”、“a的身子”是“a”的村办成分,“a的身躯的某部分”是“a的躯干”的个体成分,而“b”是公有成分,被“a”调用,“a”可以修改其里面的“b”的体制,但不大概改改其余“b”的体裁。

三,成分依照须要可以拥有各类情景,可以给那么些因素2个“参数”让它表现差别意况;

如:设3个hasBorder=“true”可以让“a”有边框,设五个size=“big”能够让”a的人身的某部分”变大

肆,可以从一类成分派生出另一类成分

如:大家须要和“a”类似的成分,可是急需对其开展扩张,那时大家新建一类“a2”成分,“a2”继承了“a”的有所样式和“私有成分”和“参数”

支付时,成分如同“类”一样被定义在CSS中,成分的“私有成分”、“参数”等也都定义在这几个“类”中。

CSS类定义:

XHTML

/* a类 =================================*/ /* a类的定义 */ .a {…}
/* a类的私有成分 */ .a的头{…} .a的躯干{…} .a的人体的某有个别{…}
/* a类的参数 */ .a(hasBorder时){…} .a(size为big时){…}
HTML中的a类成分的七个“实例”: <div class=”a” id=”a1″> <div
class=”a的头”></div> </div> <div class=”a” id=”a2″>
<div class=”a的头”></div> <div
class=”a的人身”></div> <div class=”b”></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* a类
=================================*/
/* a类的定义 */
.a {…}
/* a类的私有元素 */
.a的头{…}
.a的身体{…}
.a的身体的某部分{…}
/* a类的参数 */
.a(hasBorder时){…}
.a(size为big时){…}
 
HTML中的a类元素的两个“实例”:
<div class="a" id="a1">
<div class="a的头"></div>
</div>
<div class="a" id="a2">
<div class="a的头"></div>
<div class="a的身体"></div>
<div class="b"></div>
</div>

命名和编码规则

如上所说的模子并不是CSS与生俱来的,所以需求有的命名和编码规则来加以落实,但是那么些并不复杂。

壹,大家运用连字符“-”从逻辑上划分class名,使用驼峰式命名区分单词;

如:.a-b-helloWorld

贰,有时大家会给class加上3个命名空间前缀,命名空间与class之间也用连字符“-”连接;

如:.WB3-a-b-helloWorld,在极速4中,WB3命名空间下的class主力被压缩成1~二个字母短名称。(注:WB3是今日头条邮箱前端吊丝们给极速4起的开销代号……三楼水吧沃特erBar3,碉堡了-。-……)

3、“私有成分”必须以父成分的class名作为前缀;

如:“a的身躯的某有个别”的名号是j,而它的父成分“a的躯干”的称号是bd,“a”的称号是a,那么最终连起来的class就是.a-bd-j。

CSS

/* a类定义 =================================*/ .a{…} .a-bd-j{…}
/* 允许在a类中定义a类的私有成分 *CSS采用器小结,搜狐信箱的CSS开发。/ /* b类定义
=================================*/ .b{…} .a-bd-j{…} /*
不允许在a类外定义a类的私有成分 */

1
2
3
4
5
6
7
8
/* a类定义
=================================*/
.a{…}
.a-bd-j{…} /* 允许在a类中定义a类的私有元素 */
/* b类定义
=================================*/
.b{…}
.a-bd-j{…} /* 不允许在a类外定义a类的私有元素 */

 

肆,“参数”照旧选用class达成,以能表明“是或不是”或具体取值的章程命名:

如:.hasIcon表明有图标,.hasBorder表明有边框,.sizeBig表明大尺寸的,.sizeSmall表明小尺寸的

***那里是贰个地道状态(无IE6)下的命名方案,假若元素a提供上述气象,大家可以这么完结:

CSS

.a.hasIcon{…} .a.sizeBig{…} …

1
2
3
.a.hasIcon{…}
.a.sizeBig{…}

为了IE6,大家只能用这么的命名来协作:

CSS

.a-hasIcon{…} .a-sizeBig{…} …

1
2
3
.a-hasIcon{…}
.a-sizeBig{…}

5、从一类派生出另一类成分,命名上从未有过专门的渴求,通过在HTML中的class同时写上基类和子类的class来落成;

 

CSS

/* 基类定义 =================================*/ .superclass{…}
.superclass-element{…} /* 子类定义,扩大、重写基类定义
=================================*/ .myClass{…} .myClass-element{…}
.myClass .superclass-element{…}

1
2
3
4
5
6
7
8
9
/* 基类定义
=================================*/
.superclass{…}
.superclass-element{…}
/* 子类定义,扩展、重写基类定义
=================================*/
.myClass{…}
.myClass-element{…}
.myClass .superclass-element{…}

 

 

by Sunji

 

赞 收藏
评论

美高梅开户网址 2

1.CSS的齐全是怎么着?

CSS全称是 Cascading Style Sheets, 层叠样式表。
CSS不仅可以静态地修饰网页,还是可以包容各样脚本语言动态地对网页各要素举办格式化。
CSS
可以对网页中成分地点的排版进行像素级精确控制,协理大约全数的字体字号样式,拥有对网页对象和模型样式编辑的力量。

CSS的全称是什么?

CSS就是一种名叫样式表(stylesheet)的技巧。也有的人称之为层叠样式表(Cascading
Stylesheet)



  1. HTML中引用CSS的艺术总计。

2.CSS有两种引入方式?link和@import有如何分别?

CSS有三种引入格局?

  1. 内联情势
    内联方式指的是一贯在 HTML 标签中的 style 属性中添加 CSS。
    示例:
    <div style=”background: red”></div>
    这一般是个很不佳的书写格局,它不得不变更近期标签的体制,即使想要三个<div> 拥有同样的体裁,你不得不再次地为各类 <div>
    添加相同的样式,假如想要修改一种体制,又不得不修改全体的 style
    中的代码。很扎眼,内联格局引入 CSS 代码会招致 HTML
    代码变得冗长,且使得网页难以保险。

  2. 停放格局
    放到格局指的是在 HTML 尾部中的 <style> 标签下书写 CSS
    代码。
    示例:
    <head>
    <style>
    .content {
    background: red;
    }
    </style>
    </head>
    停放形式的 CSS 只对目前的网页有效。因为 CSS 代码是在 HTML
    文件中,所以会使得代码相比集中,当大家写模板网页时这一般对比便于。因为查看模板代码的人方可看清地翻看
    HTML 结构和 CSS 样式。因为嵌入的 CSS
    只对方今页面有效,所以当七个页面要求引入相同的 CSS
    代码时,那样写会导致代码冗余,也不便利保养。

  3. 链接格局
    链接格局指的是应用 HTML 底部的 <head> 标签引入外部的 CSS
    文件。
    示例:
    <head>
    <link rel=”stylesheet” type=”text/css” href=”style.css”>
    </head>
    那是最常见的也是最推荐的引入 CSS 的主意。使用这种方法,所有的 CSS
    代码只设有于独立的 CSS 文件中,所以具有可以的可维护性。并且有所的
    CSS 代码只存在于 CSS 文件中,CSS
    文件会在第五,回加载时引入,将来切换页面时只需加载 HTML 文件即可。

  4. 导入格局
    导入方式指的是利用 CSS 规则引入外部 CSS 文件。
    示例:
    <style>
    @import url(style.css);
    </style>
  • 行内式:在HTML标签的style属性中编辑CSS代码,直接功效于“当前”的HTML成分。
css的引入方式有二种。

link 和@import 有啥分别?

两者都以表面引用CSS的法子,可是存在必然的差别:
  差异1:link是XHTML标签,除了加载CSS外,还是能定义奥迪Q5SS等其余事情;@import属于CSS范畴,只可以加载CSS。
  不同2:link引用CSS时,在页面载入时同时加载;@import须求页面网页完全载入未来加载。
  分歧3:link是XHTML标签,无包容难点;@import是在CSS2.1指出的,低版本的浏览器不匡助。
  分歧4:ink襄助使用Javascript控制DOM去改变样式;而@import不接济。

css/a.css 相对路径,当前目录下的css目录中的a.css文件

./css/a.css 相对路径,当前目录下css文件夹中的a.css文件

b.css 当前目录下的b.css文件

../imgs/a.png 上级目录中的imgs文件夹中a.png图片

绝对路径 -本地文件的绝对地址

 /user/hunger/project/css/a.css 本地绝对路径中的a.css文件

/static/css/a.css  网络路径,在服务器上直接通过该路径寻找相关文件

/http://cdn.jirengu.com/kejian1/8-1.png   线上服务器的图片(8-1.png)地址



  1. <pstyle="color:#f0f;font-weight:bold;font-size:12px;"></p>
1.内联样式

当特殊的体裁必要运用到各自成分时,就可以动用内联样式。
使用内联样式的方法是一贯在连锁的竹签中使用样式属性。样式属性可以包括其他CSS 属性。简单直接,但再三再四修改以及充足样式会很麻烦。

<h1 style="color: red; font-size: 20px;"></h1>

万一本人想在js.jirengu.com上显得三个图形,必要怎么操作?

若果这几个图形本来就存在网络线上
可以平昔动用图片的互连网相对路径链接的办法在页面上添加url引用那张图纸。
倘使图片在地点,可将图片上传到某图床,将获取的图样链接添加添加到页面即可。

美高梅开户网址 3

2.jpg

美高梅开户网址 4

1.jpg



  • 嵌入式:在<head></head>中编辑CSS代码,使用拔取器决定“一堆”成分的显得效果。
2.之中样式

当单个文件须要专门样式时,就可以接纳其中样式表。你可以在 head 部分通过
<style> 标签定义内部样式表。

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

列出5条以上html和 css 的书写规范

  1. <head>
  2. <metacharset="utf-8">
  3. <title></title>
  4. <!--其他head元素-->
  5. <style>
  6. p{color:red;}
  7. </style>
  8. </head>
3.表面体制

当样式须求被使用到许多页面的时候,外部体制表将是上佳的选项。使用外部样式表,你就可以透过转移一个文件来改变一切站点的外观。完结了内容与体制分离。
rel:告诉浏览器引用的是壹个样式表文件
type:文件类型(可归纳)
href:文件地方。

<head>
  <link rel="stylesheet" type="text/css" href="index.css">
</head>

<style>
  @import url("hello.css");
  @import "world.css";
</style>
html书写规范
  1. 文档类型讲明及编码: 统一为html5注明类型<!DOCTYPE html>;
    编码统一为<meta charset=”gkb
    ” />, 书写时采纳IDE完毕层次分明的缩进;
  2. 非非凡情形下样式文件必须外链至<head>…</head>之间;非优异情状下JavaScript文件必须外链至页面底部;
  3. 引入样式文件或JavaScript文件时, 须略去专断认同类型申明, 写法如下:
    <link rel=”stylesheet” href=”…” />
    <style>…</style>
    <script src=”…”></script>
  4. 引入JS库文件, 文件名须包涵库名称及版本号及是不是为压缩版,
    比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称,
    比如jQuery.cookie.js;
  5. 拥有编码均遵守xhtml标准, 标签 & 属性 & 属性命名
    必须由小写字母及下划线数字构成, 且全体标签必须关闭, 蕴含 br (<br
    />), hr(<hr />)等; 属性值必须用双引号包括;
  6. 丰盛利用无包容性难题的html自己标签, 比如span, em, strong, optgroup,
    label,等等; 须求为html元素添加自定义属性的时候,
    首先要考虑下有没有默许的已某些合适标签去设置, 即使没有,
    可以运用须以“data-”为前缀来添加自定义属性,避免使用“data:”等其余命名格局;
  7. 语义化html, 如 标题依照重大用h*(同一页面只好有2个h1),
    段落标记用p, 列表用ul, 内联成分中不得嵌套块级成分;
  8. 尽或者减弱div嵌套, 如<div><div
    class=”welcome”>欢迎访问XXX, 您的用户名是<div
    class=”name”>用户名</div></div></div>完全可以用于下代码替代:
    <div><p>欢迎访问XXX,
    您的用户名是<span>用户名</span></p></div>;
  9. 书写链接地址时, 必须幸免重定向,例如:href=“http:// **”,
    即须在ULacrosseL地址前边加上“/”;
  10. 在页面中尽量防止使用style属性,即style=”…”;
  11. 不可以不为涵盖描述性表单成分(input, textarea)添加label, 如<p>姓名:
    <input type=”text” id=”name” name=”name”
    /></p>须写成:<p><label for=”name”>姓名:
    </label><input type=”text” id=”name” /></p>
  12. 能以背景方式表现的图样, 尽量写入css样式中;
  13. 一言九鼎图纸必须加上alt属性; 给关键的成分和截断的因素加上title;
  14. 给区块代码及相当主要功能(比如循环)加上注释, 方便后台添加效果;
  15. 特殊符号使用: 尽或者使用代码替代: 比如 <(<) & >(>) &
    空格( ) & »(») 等等;
  16. 挥洒页面进程中, 请考虑向后伸张性;
  17. class & id 参见 css书写规范.
  • 链接式:使用<link></link>链接外部CS文件,可以在八个网页中共享样式规则。
link和@import的区别:

精神上,那二种方式都是为着加载CSS文本,但依旧存在着微薄的差异。

  • 差别1:link属于XHTML标签,而@import完全是CSS提供的一种办法。link标签除了可以加载CSS外,还足以做过多其他的事务,比如定义RSS,定义rel连接属性等,@import就不得不加载CSS了。
  • 差别2:加载顺序的不同。当贰个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS
    会等到页面全部被下载完再被加载。所以有时浏览@import加载CSS的页面时伊始会并未样式(就是忽明忽暗),网速慢的时候还挺明显。
  • 距离3:包容性的分化。由于@import是CSS2.1提议的之所以老的浏览器不辅助,@import唯有在IE5之上的才能辨识,而link标签无此难题。
  • 距离4:使用dom控制样式时的差异。当使用javascript控制dom去改变样式的时候,只好使用link标签,因为@import不是dom可以操纵的。
css书写规范
  1. 编码统一为utf-8;
  2. 经合开发及分工: 会依据各类模块, 同时依据页面相似程序,
    事先写好光景框架文件,
    分配给前端人员完成内部结构&表现&行为; 共用css文件base.css由i书写,
    合作开发进程中, 各种页面请务必都要引入,
    此文件包罗reset及尾部尾部样式, 此文件不可轻易修改;
  3. class与id的采取: id是唯一的并是父级的, class是可以重新的并是子级的,
    所以id仅使用在大的模块上, class可用在重新使用率高及子级中;
    id原则上都以由分发框架文件时命名的(如#header #footer #content
    #nav 等), 为JavaScript预留钩子的除外;
  4. 为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide,
    js_show(天猫是用的J_开头);
  5. class与id命名:
    大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其余样式名称由
    小写英文 &
    数字 & _ 来组合命名, 如i_comment, fontred, width200;
    防止采取粤语拼音, 尽量使用简单的单词组合;
    总的说来, 命名要语义化, 简明化.
  6. 规避class与id命名:
    a) 通过从属写法规避, 示例见d;
    b)取父级元素id/class命名部分命名, 示例见d;
    c)重复使用率高的命名, 请以祥和代号加下划线早先, 比如i_clear;
    d)a,b两条, 适用于在2中已建好框架的页面, 如,
    要在2中已建好框架的页面代码<div
    id=”mainnav”></div>中进入新的div成分,
    按a命名法则: <div
    id=”mainnav”><div>…</div></div>,
    体制写法: #mainnav .firstnav{…….}
    按b命名法则: <div
    id=”mainnav”><div>…</div></div>,
    体制写法: .main_firstnav{…….}
    -0-
  1. <linktype="text/css"rel="stylesheet"href="myCss.css">

3.以下那两种文件路径分别用在哪些地点,代表如何看头?

文件路径 代表
css/a.css 在与本文件同级的css文件夹下的a.css文件
./css/a.css ./代表当前,当前与本文件同级的css文件夹下的a.css文件
b.css 同级的b.css文件
../imgs/a.png 上一级的目录的imgs文件夹下的a.png文件,../代表返回上一级
/Users/hunger/project/css/a.css 本地文件的绝对路径
/static/css/a.css 网站路径的绝对路径
http://cdn.jirengu.com/kejian1/8-1.png 图片上传后生成的线上地址
  • 导入式:使用@import指令,可以依照已有的样式文件扩大新的体裁规则。

4.假如本身想在js.jirengu.com上显示3个图形,须求怎么操作?

第2、种:先把图纸上传至服务器,然后引用相对路径
第三种:上传图片,生成图片链接,然后引用图片

  1. <style>
  2. @import"myStyle.css"
  3. </style>

5.列出5条以上html和css的书写规范

2.    CSS单位

基本准则

适合web标准, 语义化html, 结构突显作为分别, 包容性卓绝. 页面品质方面,
代码必要简洁明了一如既往, 尽大概的滑坡服务器负荷, 保险最快的辨析速度.

美高梅开户网址 5

html规范:
  1. 文档类型注脚及编码: 统一为html5声称类型<!DOCTYPE html>;
    编码统一为<meta charset=”gbk” />,
    书写时行使IDE完毕层次明显的缩进;
  2. 非新鲜处境下样式文件必须外链至<head>…</head>之间;非新鲜景况下JavaScript文件必须外链至页面底部;
  3. 引入样式文件或JavaScript文件时, 须略去暗中认同类型表明,
    写法如下:<link rel=”stylesheet” href=”…”
    /><style>…</style><script
    src=”…”></script>
  4. 引入JS库文件, 文件名须包罗库名称及版本号及是不是为压缩版,
    比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称,
    比如jQuery.cookie.js;
  5. 拥有编码均听从xhtml标准, 标签 & 属性 & 属性命名
    必须由小写字母及下划线数字组成, 且全体标签必须关闭, 包涵 br (<br
    />), hr(<hr />)等; 属性值必须用双引号包蕴;
  6. 丰硕利用无包容性难点的html自个儿标签, 比如span, em, strong, optgroup,
    label,等等; 须要为html成分添加自定义属性的时候,
    首先要考虑下有没有默许的已某个合适标签去设置, 固然没有,
    可以利用须以”data-”为前缀来添加自定义属性,幸免使用”data:”等其他命超模式;
  7. 语义化html, 如 题目依据重大用h*(同一页面只可以有五个h1),
    段落标记用p, 列表用ul, 内联成分中不可嵌套块级成分;
  8. 尽或者收缩div嵌套, 如<div><div
    class=”welcome”>欢迎访问XXX, 您的用户名是<div
    class=”name”>用户名</div></div></div>完全可以用来下代码替代:
    <div><p>欢迎访问XXX,
    您的用户名是<span>用户名</span></p></div>;
  9. 挥洒链接地址时,
    必须防止重定向,例如:href=“http://itaolun.com/\*\*”,
    即须在U帕杰罗L地址后面加上“/”;
  10. 在页面中尽量防止使用style属性,即style=“…”;
  11. 必须为含有描述性表单成分(input, textarea)添加label, 如<p>姓名:
    <input type=”text” id=”name” name=”name”
    /></p>须写成:<p><label for=”name”>姓名:
    </label><input type=”text” id=”name” /></p>
  12. 能以背景方式表现的图片, 尽量写入css样式中;
  13. 要害图纸必须加上alt属性; 给关键的因素和截断的要素加上title;
  14. 给区块代码及至关紧要作用(比如循环)加上注释, 方便后台添加效果;
  15. 特殊符号使用: 尽或然使用代码替代: 比如 <(<) & >(>) &
    空格( ) & »(») 等等;
  16. 挥洒页面进程中, 请考虑向后扩大性;
  17. class & id 参见 css书写规范.

 

css书写规范:
  1. 编码统一为utf-8;
  2. 同盟开发及分工: i会按照种种模块, 同时依照页面相似程序,
    事先写好光景框架文件,
    分配给前端人士完结内部结构&表现&行为; 共用css文件base.css由i书写,
    合作开发进度中, 各种页面请务必都要引入,
    此文件包涵reset及尾部尾部样式, 此文件不可随意改动;
  3. class与id的使用: id是绝无仅有的并是父级的, class是足以重新的并是子级的,
    所以id仅使用在大的模块上, class可用在重复使用率高及子级中;
    id原则上都以由分发框架文件时命名的(如#header #footer #content
    #nav 等), 为JavaScript预留钩子的除了;
  4. 为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide,
    js_show(天猫商城是用的J_开头);
  5. class与id命名:
    大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其余样式名称由
    小写英文 &
    数字 & _ 来组合命名, 如i_comment, fontred, width200;
    幸免使用中文拼音, 尽量利用简易的单词组合;
    总的说来, 命名要语义化, 简明化.
  6. 规避class与id命名:
    a) 通过从属写法规避, 示例见d;
    b)取父级成分id/class命名部分命名, 示例见d;
    c)重复使用率高的命名, 请以祥和代号加下划线开端, 比如i_clear;
    d)a,b两条, 适用于在2中已建好框架的页面, 如,
    要在2中已建好框架的页面代码<div
    id=”mainnav”></div>中进入新的div成分,
    按a命名法则: <div
    id=”mainnav”><div>…</div></div>,
    体制写法: #mainnav .firstnav{…….}
    按b命名法则: <div
    id=”mainnav”><div>…</div></div>,
    体制写法: .main_firstnav{…….}

3.颜色的描述

6.介绍chrome 开发者工具的功效区

美高梅开户网址 6

  • 颜色名,W3C定义了17个颜色主要字

aqua浅绿色,black黑色,blue蓝色,fuchsia紫红色,gray灰色,green绿色,lime黄绿色,maroon橘红色,navy深蓝色,olive茶青色,purpose紫色,red红色,sliver银色,teal青色,white白色,yellow黄色

  • 十六进制颜色(#RRGGBB或#RGB)

纯红色#ff0000,纯绿色#00ff00,纯蓝色#0000ff。

  • 利用帕杰罗GB颜色值(凯雷德,G,B)指定颜色

rgb(0,255,0)表示纯深橙

  • 选择rgb百分比值(R%,G%,B%)指定颜色

百分之百,0%,0%,是纯虹色;

0%,百分百,0%,是纯卡其灰;

0%,0%,百分之百,是纯土色。

3.通过给CSS规则添加前缀,能有的地缓解浏览器包容性难题。

前缀 “-moz”对应FireFox;

前缀“-ms-”,“-mso-”对应InternetExplorer;

美高梅开户网址,前缀“-o-”对应Opera;

前缀“-webkit-”对应Chrome,Safari。

美高梅开户网址 7

美高梅开户网址 8

4.CSS选择器

基本选取器

       
a.标记(或标签)采用器,用于设定HTML文档中指定标签的显示样式。

美高梅开户网址 9

       
b.类别接纳器,给一定的一组CSS代码取名,然后就足以将她们采用于七个不等的价签。

美高梅开户网址 10

       
c.ID接纳器,对于页面中绝无仅有的因素,如页脚,可以给其id属性赋予壹个独一无二的值。

美高梅开户网址 11

复合采用器:

  • 混合采取器

直接指定特定标记中一定类型或id的元素样式。(注意:拔取器字符间不要有空格)

  1. <pclass="p1">
  2. 这是第一段落,红色字体
  3. </p>
  4. <pid="p2">
  5. 这是第二段落,蓝色字体
  6. </p>
  7. <style>
  8. p.p1{
  9. /* 标记.类别选择器*/
  10. “/* 拔取器字符间不要有空格*/
  11. color:#FF0000;
  12. }
  13. p#p2{
  14. /* 标记#id选择器*/
  15. color: rgb(0,0,255);
  16. }
  17. </style>

 

  • 并集选用器

两次定义多少个标签或项目或id的样式(注意:以逗号隔开各类拔取器)

  1. <div>
  2. 本段文本位于div元素内
  3. </div>
  4. <pclass="p1">制定了p1样式类的段落</p>
  5. <pid="p2">制定了id的段落</p>
  6. <style>
  7. div,p.p1,p#p2{
  8. color: cornflowerblue;
  9. text-decoration: underline;
  10. }
  11. </style>

 

  • 子孙采取器

         
  后代选取器1

采用嵌套在指定成分的中间因素的样式(注意:以空格分开各样采用器)

  1. <style>
  2. p em{
  3. font-size:30px;
  4. }
  5. </style>
  6. <p>
  7. 段落内:单词的CSS以&lt;em&gt;标签界定,在样式表规则"p em"的作用下显示为:<em>CSS</em>
  8. </p>
  9. 段落外:单词的CSS以&lt;em&gt;标签界定,不适用样式表规则"p em"的作用下显示为:<em>CSS</em>

美高梅开户网址 12

         
  后代接纳器2

div>h2
 只选择h2成分,并且那些要素都以div的直接子成分

  1. <style>
  2. div>h2{
  3. color: crimson;
  4. }
  5. #div1>h2{
  6. text-decoration: line-through;
  7. }
  8. </style>
  9. <divid="div1">
  10. <p>content 1 of p</p>
  11. <h2>content 1 of h2</h2>
  12. <p>content 2 of p</p>
  13. <div>
  14. <h2>content 2 of h2 in the other div</h2>
  15. </div>
  16. </div>

美高梅开户网址 13

手足选取器

  •    h2+p,拔取p成分            
    ,此元素是h2的兄弟,且是紧挨的。

美高梅开户网址 14

  • h2~p,选出全数h2的“四弟”,不管是否紧挨着的

美高梅开户网址 15

  • 通用采取器

“*”是贰个通配符,它十二分任何因素

  1. *{color:green;}    /*拥有因素(的公文和边框)都应用纯白作为前景观
    */
  2. p * {color:red}
    /*<P>包括的装有因素(的公文和边框)都选用黄铜色作为前景观 */
  • 属性选用器

美高梅开户网址 16

a[href]测试

美高梅开户网址 17


a[href=”index.html”]测试

美高梅开户网址 18


img[alt~=”UsedforTest”]测试

美高梅开户网址 19


img[alt^=”Just”]测试

美高梅开户网址 20


img[alt$=”st”]测试

美高梅开户网址 21

img[alt*=”UsedforTest”]测试

美高梅开户网址 22


  • 伪类选拔器

美高梅开户网址 23

美高梅开户网址 24

:focus实例

美高梅开户网址 25

 
  伪类选拔器支持not,div:not(.myP)
接纳具有div成分,其class属性不是.myP

实例

美高梅开户网址 26

    还足以连接使用几个not,div:not(.myClass1):not(.myclass2)
采用具有div成分,其class属性值不是.myClass1和.myClass2。

实例

美高梅开户网址 27

还足以采取其余标准,div:not(id^=”main”)
采纳所以div成分,其id属性值不是以main打头的。

美高梅开户网址 28

div:target 使用此采用器,可以活动依照url的靶子,卓越呈现特定的因素。

美高梅开户网址 29

结构化选取器,他与DOM密切相关

:root 拔取根成分<html>;

:empty 采用空成分,如<p></p>;

:first-child 接纳的要素是其父成分的率先个子成分;

:last-child 选取的因素是其父成分的末梢3个子成分;

:first-of-type 选中指定成分类型的首先个外甥;

:last-of-type 选中指定元素类型的终极二个外孙子;

:only-of-child 选中的元素是父成分的绝无仅有孙子;

:only-of-type在父成分的兼具儿子中,采纳那3个只有3个因素的因素类型;

  • Nth类型选用器

:nth-child(n) 选中第n个孩子;

:nth-last-child(n) 选中尾数第n个儿女;

:nth-of-type(n) 选中第n个要素类型;

:nth-last-of-type(n) 选中尾数第n个因素类型;

美高梅开户网址 30

  •  伪元素

::first-letter和::first-line

美高梅开户网址 31

::before和::after

美高梅开户网址 32

CSS的继承

  • 尚无定义CSS规则的HTML元素,从它的父级成分中连续样式。

美高梅开户网址 33

  • 体制规则属性值的比重应用了继承原则。

美高梅开户网址 34

  • CSS层叠原则

行内样式 > id样式 > 系列样式 > 标签样式    →结论:特殊者胜出!

 

起点为知笔记(Wiz)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图