CSS相关知识

时间 2019-11-17

标签 css 相关知识栏目 CSS 繁體版

原文原文链接

CSS的优点：

1：样式表提供了远比HTML多得多的格式化选择。

2：在给网页添加背景的时候，你要肯定他要如何平铺（重复等一系列的属性）

3：CSS占用的空间也远比HTML的格式化选项要少得多，加载速度更快

4：能够设置多种样式样式表，更具不一样的需求提供不一样的风格，样式更加独立

文档类型：

全部网页都是一个doctype（文档类型）开头的，表示网页用哪种HTML来编写

HTML的工做原理

1：网站的第一行是DOCTYPE声明，

2：<html></html>若是把一个网页比做成一颗树的话，那HTML就是树干

3：网页的head标头

4：网页的主体body,页面上呈现的内容都是写在这里面的

让IE8支持HTML5

<!--[if it IE 9]>

<![endif]>

IE条件注释简称（IECC）

只有IE9以前的版本可见的javascript代码

能够忘却的HTML标签和属性

1：不要用<font>来控制文本的显示，css能够作的更好

2：不要使用<b><i>标签来使文字变得加粗或者倾斜：若是你必定要增强某一个字或者某一段话，可使用<strong>标签来。对于相对次要的文字，可使用<em>标签来进行强调

为了使标签显示为斜体可使用<cite>标签，它具备一举两得的做用，它不只把标题变成的斜体，还给标签作上了标记，便于搜索引擎的搜索

3：不要用<table>标签进行网页布局

4：不要使用标签的属性来设置效果

5：不要滥用<br>标签

经验和见解：

经过最近的两个页面布局设计的练习，我有了必定的心得和体会

关于HTML：多使用语义话结构的标签，在没有使用css样式以前最好HTML代码不要显示多余的效果，HTML只须要专一体现结构就能够了，必定要注意命名规范和多写注解，这样在别人看你的代码的时候才能更好地理解你的布局思惟，为何把这几个结构划分为一块，合理的运用标签，合理的划分结构。

关于css部分：

1：拿到设计稿以后，必定不要一拿到设计稿就开始动手开始作，设计师设计模块都是有他本身的理由的，先理解设计师的思路，找到类似的地方，实现复用，这样能够大量减小你的代码量，还有利于修改。

2：能用样式实现的东西尽可能用样式来实现，不要使用其余的东西来影响HTML的结构，实现低耦合性。

3：使用CSS重置的技术，由于每一个浏览器的初始设计师不一样的，他能取消浏览器常常在段落和其余标签之间插入的间距。

小技巧：

1：用标题<h1~h6>表示文本内的相对重要性。当两个标题对于网页的主题一样重要时，那就给这两个标题使用相同等级的标题，若是有一个标题不是很重要，那就给它使用下一级的标题，最好不要跳级

2：对于文本段落使用<p>标签。

3：对于包含多个相关项目的列表，则使用无序列表<ul>,好比导航连接，标题，或者诸如此类的一组提示语等。

4：使用有序列表<ol>来表示一个过程的步骤，或者定义一个项目的顺序。

5：若是要建立一个术语及其定义或描述，则要用<dl>（定义列表）标签，并结合<dt>（定义术语） <dd>（定义描述）来使用。

6：若是引用一段引用语，好比摘自其余网站的一段文字，一篇文章影评，或者只是你的祖父的一些至理名言，就要尽可能对长段落使用<blockquote>标签，对于那些短的就使用<q>标签

8：若是没有合适的标签，在你给某一个元素或者某一组元素添加样式的时候，可使用span和div标签

9：不要滥用div，H5中提供了几个标签能够来取代div标签<article>,<section>和<footer>标签。对于导航栏可使用<nav>标签

10：用W3C检测器来检测页面

中止IE8全部无厘头的行为，恢复成IE8以前正常的样子，作法就是在网页中添加一个META的标签，让IE8忽略 compatibility view(兼容性视图),compatillty view list(兼容性视图列表)采用最标准的兼容模式来显示网页

最好放在<title>标签正下方

高速缓存：当你发现你刚作出的修改在浏览器上没有体现的时候，你可使用强制从新加载页面的方式来解决，ctrl+F5

用CSS来链接外部样式表

方法一使用<link>标签

方法二：使用@improt指令：

与HTML的<link>标签不一样的是，@improt是CSS语言的一部分，具备如下明显不一样于HTML的一些性质：

1：与外部文件链接的时候得使用url（绝对路径）而不是href，并要把路径放在放在一对圆括号里面。

2：和使用link标签同样，也可使用多个@improt外部样式

<style>
@import url();

@import url();

</style>

里的引号写不写都行。

标签选择器：

不是很推荐使用，会很大篇幅的使用，在你的HTML代码结构里的全部相同标签都会使用这一套样式，不利于对于同一标签内的内容显示不一样样的的实现

类选择器：

目前我认为是最好用的选择器了。给标签添加一个类名，能够实现精准控制，对你想要设置样式的元素标签，设置你须要的类名，在外部样式中设置便可。

使用规则：

1：全部类选择器的开始都要以一个圆点开始（ID选择器则是使用#键来开始）

2：CSS只容许在类名称中出现使用字母，数字，连字符- 和下划线_

3：在圆点以后，名称始终要以字母开头。

4：类名区分大小写。大写小不一样的两个相同的名称，CSS会把它们解析为不一样的类

小小加油站：

div和span标签

在你想给大段相关元素摆放位置的时候，可使用DIV标签，它表现为块级元素的特性，能够用盒子模型去理解它

span标签：

在一大段文字中，若是你只想给特定的文字设置样式，就能够用到span标签了，给span标签设置类就能够经过css给它来设置特使的样式了

ID选择器：控制特殊的网页元素

具备惟一性

一个HTML页面中同时只能存在一个ID名称。

用处：目前使用到的功能有：设置一个标签，给它设置position属性：fixed定位，点击它跳会顶部。

给标签组定义样式

若是有一些标签（类）须要设置相同的样式的话

可使用标签组定义样式：例如h1,h2,h3,h3,...{

样式的内容

}

须要设置相一样式的属性能够写在一块儿，中间使用逗号分开。也叫群组选择器

通用选择器（*）

大哥级别的选择器，他会同时设置整个页面，不会针对某一个，所有都涉及到了

给标签内的标签设置定义样式

由于HTML结构是树形结构的，因此注定他有不少分支，她的内部会有不少的子节点（分支）好比ul中有li

li就是ul的派生元素，这个时候咱们就能使用派生选择器：

能够把这些标签想一想成族谱，你是出于子标签的位置；

祖父就是祖先元素，派生标签就是祖先元素下一级的标签，能够理解成叔叔和爸爸的一辈，（其实就是离祖先元素最近的一个元素节点），父元素就是爸爸，你就是子标签，就是一级一级树根状的发散下来的。

祖先元素：一个页面的开始。<html>标签就是全部标签的祖先元素

派生标签：处在一个标签或者多个标签内部的标签就是派生标签，

同胞标签，能够理解成你的兄弟

伪类和伪元素（给用户提供更好地体验更具一些操做会产生相应的效果）还能够给元素添加额外的显示效果

给连接定义样式

1：a:link 指用户尚未访问过的连接

2：a:visited 表示用户已经访问过的标签，访问过以后会产生不一样的效果，和没有访问的连接产生区别

3: a:hover 当用户把鼠标移到这个连接上的时候会产生的效果

4: a:active 当用户点击连接时候产生的效果

给段落添加样式

1：frist-letter:能够建立下落的首字母（对段落开始的第一个字母的设置）

2:frist-line：对段落的首行进行设计

介绍更多的伪类：

1：focus 和hover极为类似区别是当标签得到焦点的时候提供的样式，判断用户的焦点放在了哪里，最适合用于给访问者提供反馈，好比经过改变文本框的背景色表名她要在什么位置输入

2: befor 能完成一些选择器没法完成的操做，好比在某个元素前面加上东西

3: after 和before恰好相反，在后面添加引用标记

4::selection （注意注意必定要使用两个冒号，使用一个冒号是不起做用的）通常用做访问者须要复制文字时候的操做，能够在访问者选择复制文字的时候，改变一选择文字的样式

属性选择器

选择哪些相同标签，可是具备不一样属性的元素

img[title]（标签名[具备的属性值]）

1：(^=)：以什么开始 img[href^="http://"]

2:（$=）：以什么结尾 img[href$=".jpg"]

3：(*=):带有什么的（找到全部具备共同属性名的元素标签）img[hreg*="select"]找到全部名字里面包含select的元素

子选择器：

和派生相似找到离父元素最近的子元素的同级元素，找到子元素的下一级还能够继续使用自选择器

：first-child 找到第一个子标签

：last-child 找到最后一个子标签

：nth-child

很复杂的选择器，有不少种用法

能够选择列表中的奇元素或者偶元素

tr:nth-child(odd){backgroung-color:#efefef}设置奇数行的元素

tr:nth-child(even){background-color:#efefef}设置偶数行的元素

nth-child(N)这里的N是能够设置的，设置你但愿他改变的元素

子类选择器：(先记下来，这个暂时没有用过，用过以后再来补充)

：frist-of-type

: last-of-type

: nth-of-type

同胞选择器

子元素之间的联系，还必须是相邻的子元素，若是两个元素是相邻的子元素就能够用+号来使他们关联起来

还有一种组合选择器~号若是h2+p表示的是h2标签旁边的p标签，那么h2~p就表示和h2同一级的全部p标签

：not（）选择器

能够称为否认伪类：可你帮助你选择除了某个类以外的全部类

例子

p:not(.class){color:red}

意思就是除了p标签类名为class以外的全部标签颜色设置为红色

局限性：

1：只能使用简单的选择器。

2：不能使用派生选择器

3：不能使用：not选择器