11.11学习日志

    11.11学习日志

   CSS

1.1 CSS的定义

全名：CascadingStyleSheets->层叠样式表

定义：CSS成为层叠样式表，它主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能（如字体、颜色、背景的控制以及整体排版等等），还可以针对不同的浏览器设置不同的样式。

1.2 HTML、CSS与JS三者的关系

HTML：页面结构，负责从语义的角度搭建页面结构。

CSS：页面样式表现，负责从审美的角度美化页面。

JavaScript：交互行为，负责从交互的角度提升用户体验。

1.3 编写CSS样式

（1）缺省样式：浏览器样式

所有的标签在不同的浏览器中都有各自默认的样式，如h1,h2,p,p,span,ul等，可以通过设置修改浏览器的样式。

（2）内嵌样式：style属性

<p style="color:red">This is tag of paragraph</p>

（3）内嵌样式：head标签中添加style标签

<styletype="text/css">
    p{
        color:green;/*设置字体颜色*/
    }
</style>

（4）外部样式：外联样式link->推荐方式

<link rel="stylesheet" href="css/main.css">

（5）导入样式：@import->不推荐使用的方式，会导致css不能并行下载，并且要求导入样式的书写必须在所有的css规则书写之前。

<style type="text/css">
    /*将某一个css文件的样式直接导入到当前位置*/
    @import url(css/main.css);

    p {
        color:green; /*设置字体颜色*/
        background-color:silver;
    }
</style>

二、CSS语法与选择器

2.1 CSS语法

(1)语法

（2）注释

单/多行注释：/*thisiscomment*/

2.2 CSS选择器

（1）通配符选择器

通配符选择器使用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素，如下面的css代码，它使用通配符选择器定义css样式，清楚所有HTML标记的默认边距：

*{
    margin: 0;    /* 定义外边距 */
    padding: 0;    /* 定义内边距 */
}

Note：通配符的穿透力很强，其优先级高于继承的样式，会覆盖继承的样式，一般情况下都不会使用。

（2）标签选择器

通过变签名来选择一类标签，例如我们将所有的p标签都设置成为红色字体：

p{
color:red;
}

（3）ID选择器

HTML标签都有公共ID属性，而且整个页面唯一。ID选择器使用“#”号进行标识，后面紧跟ID名字。

#contentBody{
   color:blue;
   font-weight:bold;
}

ID选择器命名规范：

●　只允许出现字母（大小写均可，严格区分）、下划线、数字。

●　只允许以字母开头。

●　命名没有长度限制，不过不建议过长。

●　不允许出现标签名。

Note：ID选择器的优先级非常高，所以确定在整个页面内唯一出现时，才开一使用，否则因为优先级问题在后续维护中不能很好进行修改和更新。

（4）类选择器

类选择器可以对HTML标签中class属性进行选择，其选择符是"."，例如：

.demo{
color:green;
}

ID选择器与class选择器的区别：

1、相同的class属性值，可以在HTML中出现多次，ID属性值在页面中则只能出现一次。

2、一个class的属性可以有多个值，也就是说一个标签可以有多个类。

（5）复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，具体如下：

① 标签指定式选择器

标签指定式选择器有两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如：h3.special,p#one等等。

② 后代选择器

后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就曾为外层标记的后代。

③ 并集选择器

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、class累选择器、id选择器等等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的css样式。

④ 子元素选择器

子元素选择器是让css选择器只能选择儿子辈的元素，例如：h1>strong{color:red;}

解读为：选择器h1>strong可以理解为“选择作为h1元素子元素的所有strong元素”，尖括号和选择器之间可以有空格也可以没有，没有限制。

建议：选择器和尖括号之间保留空格。

（6）属性选择器

/* 选择所有的文本框标签 */
input[type="textbox"]
{
    color:red;
}
/* 选择包含aside类的所有div标签 */
div[class~="aside"]
{
    background-color: green;
}
/* 选择拥有id和class属性的p标签 */
p[id][class]
{
    line-height: 30px;
}

2.3 CSS伪类与伪元素

状态是动态变化的，当一个元素到达一个特定状态时，它可能得到一个样式，当状态改变时，又失去这个样式。

它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

（1）CSS伪类

●　:link->该伪类将应用于未被访问过的链接，IE6不兼容。一般不用此伪类，直接使用a标签。

●　:hover->该伪类将应用于有鼠标指针悬停于其上的元素，在IE6只能应用于a标签，IE7+所有元素都兼容。

●　:active->该伪类将应用于被激活的元素，例如被点击的链接、被按下的按钮登等。

●　:visited->该伪类将应用于已经被访问过的链接。

●　:focus->该伪类将应用于拥有键盘输入焦点的元素。

（2）CSS伪元素

伪元素是控制内容，例如:

:first-line与:first-letter，这两个伪元素只能用于块级元素。前者用于选择第一行，后者用于选择第一个字符。

p.artcle:first-line
{
    color:red;
}

p.artcle:first-letter
{
    color:green;
}

:first-child伪元素选择属于第一个子元素的元素。

span:first-child{
vertical-align:middle;
}

:before与:after伪元素则可以设置元素之前和之后的内容，并且配合content设置相关内容。

#demo:after,#demo:before{
content:"--";
display:block;
}

2.4 CSS层叠性和继承性

（1）层叠性

所谓层叠性是指多种css样式的叠加，例如，当使用内嵌css样式表定义p标记字号大小为12像素，链入式定义p标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。

（2）继承性

所谓继承性是指写css样式表时，子标记会继承父标记的某些样式，例如文本颜色和字号。想要设置一个可继承的属性，只需要将它应用于父元素即可。

恰当地使用继承可以简化代码，降低css样式的复杂性。但是，如果在网页中所有的元素都大量继承样式，那么判断样式的来源就会很困难，所以对于字体、文本属性等网页中通用的样式可以使用继承。

例如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中的所有文本。

Note：并不是所有的css属性都可以继承，例如下面的属性就不具有继承性：

边框、外边距、内边距、背景、定位、元素宽高属性等。

所有盒子相关的属性都不能继承。

三、CSS选择器优先级

3.1 优先级概览

定义css样式时，经常出现两个或多个规则应用在同一元素上，这时就会出现优先级的问题。

●　内联样式最大->内联样式的优先级最高；

●　ID选择器优先级仅次于内联样式；

●　类选择器优先级次于ID选择器；

●　标签选择器最低；

3.2 继承样式权重为0

在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，它的权重都为0，也就是说，子元素定义的样式会覆盖继承来的样式。

3.3 行内样式权重最高

应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，它拥有比上面提到的选择器都大的优先级。

3.4 权重相同则就近原则

权重相同时，CSS遵循就近原则，即靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最高。

所有都相同时，声明靠后的优先级最大。

3.5 !important命令最大优先级

CSS定义了一个!important命令，该命令被赋予最大的优先级，也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

综述：

（1）行内样式>页内样式>外部引用样式>浏览器默认样式

（2）important>内联>ID>伪类/类/属性选择>标签>伪对象>通配符>继承

四、CSS单位与文字排版

4.1 标签的显示模式与Display属性

（1）标签的类型

HTML标记一般分为块标记和行内标记两种类型，它们也称为块元素和行内元素。

块元素：每个块元素都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。常见的块元素有：h1,h6,p,p,ul,ol,li等，其中p标记是最典型的块元素。

行内元素：行内元素不会占有独立的区域，仅仅依靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。常见的行内元素有strong,b,em,i,del,s,ins,u,a,span等，其中span标记是最典型的行内元素。

（2）Display属性

display属性可以控制标签的显示模式，它有四个可选值：none/inline/block/inline-block。

其中，none代表此元素不被显示，在文档中被删除；

block代表按块级元素显示，前后带换行符，自己占一行。

inline代表按内联元素显示，一个挨着一个。

inline-block代表按行内标签进行排版，但是可以设置宽高，而且高度可以影响行高。

4.2 CSS的颜色值和单位

（1）命名颜色

red,black,white,purple,green,yellow,silver,gray,teal,blue,navy...

（2）RGB颜色表示法

RGB模式表示色彩，三种颜色组合叠加可以产生自然界中所有的颜色，也是计算机常用模式。RGB颜色值规定的规范为：rgb(red,green,blue)，每个参数定义颜色的强度，可以是介于0到255之间的整数，也可以是百分比值。

（3）十六进制颜色值

由于RGB模式书写十分不方便，三个255值直接用3个十六进制数表示。十六进制颜色规定的规范为：#RRGGBB，其中RR（红色）、GG（绿色）、BB（蓝色）的十六进制整数规定了颜色的部分，所优质必须介于0余FF之间。

取值范围#000000~#FFFFFF（黑色到白色），十六进制颜色值其实就是RGB模式的另外一种写法，所有浏览器都兼容。

（4）CSS的长度单位

px：像素点，像素就是显示器显示的一个点。

em：1em等于当前的字体大小。例如，当前元素的字体大小为16px，那么1em=16px。

单位之间的关系：1in=2.54cm=25.4mm=96px

4.3 CSS的文字排版

（1）font-size：字号大小

font-size属性用于设置字号，该属性的值既可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较有用，推荐使用像素单位px，绝对长度单位使用较少。

（2）font-family:字体

font-family属性用于设置字体，可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到直到合适的字体。

（3）font-weight:字体粗细

（4）font-style:字体风格

可以设置斜体、倾斜或正常字体。

（5）letter-spacing:字间距

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白，其属性可为不同单位的数值，允许使用负数值，默认为normal。

（6）word-spacing:单词间距

word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可以为不同单位的数值，允许使用负数值，默认为normal。

word-spacing和letter-spacing均可对英文进行设置，不同之处在于letter-spacing定义的是字母之间的间距，而word-spacing定义的是英文单词之间的间距。

（7）line-height:行间距

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。

（8）text-indent:首行缩进

text-indent属性用于设置段落首行文本的锁紧，只能设置块级标签。其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负数值，建议使用em作为设置单位。

（9）word-break：自动换行

normal使用浏览器默认的换行规则，不打断单词显示；

break-all允许在单词内换行；

keep-all只能在半角空格或连字符处换行；

（10）word-wrap：允许长单词或URL地址换行到下一行

normal只在允许的段字点换行（浏览器保持默认处理）

break-word在长单词或URL地址内部进行换行