CSS 基础笔记

　　学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示模式熟练掌握CSS背景属性熟练掌握CSS三大特性熟练掌握CSS盒子模型熟练掌握CSS浮动

　　10.熟练掌握CSS定位

　　11.熟练掌握CSS高级技巧强化CSS

　　从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

　　随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

　　CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者。让我们的网页更加丰富多彩。

　　CSS的最大贡献就是：让 HTML 从样式中解脱苦海，实现了 HTML 专注去做结构呈现。而样式交给 CSS 后，你完全可以放心的早点洗洗睡了！

　　而且…… CSS 做的很出色，如果JavaScript是网页的魔法师，那么CSS它是我们网页的美容师，不信，你看：

　　ps: 你跟Angelababy只差了一个妆容的距离

　　有人说，没有不漂亮的女人，只有不会打扮的女人。

　　我想说，没有不好看的网页，只有不会CSS的前端。

　　CSS（Cascading Style Sheets）美化样式

　　CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

　　CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

　　CSS可以写到那个位置？是不是一定写到html文件里面呢？

　　内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

　　语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。

　　type=“text/CSS” 在html5中可以省略，写上也比较符合规范，所以这个地方可以写也可以省略。

　　内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

　　语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

　　链入式是将所有的样式放在一个或多个以。CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

　　注意： link 是个单标签哦！！！

　　该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

　　样式表优点缺点使用情况控制范围行内样式表书写方便，权重高没有实现样式和结构相分离较少控制一个标签（少）内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面（中）外部样式表完全实现结构和样式相分离需要引入最多，强烈推荐控制整个站点（多）

　　使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：

　　要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

　　如上图所以，要把里面的小黄人分为2组，最快的方法怎办？

　　很多，比如一只眼睛的一组，剩下的一组

　　选择器干啥的？选择标签用的

　　这就用到基础选择器组：

　　标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

　　标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

　　标签选择器可以把某一类标签全部选择出来 div span

　　类选择器使用“。”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

　　类选择器最大的优势是可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签

　　小技巧：

　　？输入的时候少按一个shift键;

　　浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）

　　能良好区分JavaScript变量命名（JS变量命名是用“_”）

　　猜谜底游戏：

　　你猜？

　　命名规范：见附件（Web前端开发规范手册。doc）

　　命名是我们通俗约定的，但是没有规定必须用这些常用的命名。

　　案例：

　　我们可以给标签指定多个类名，从而达到更多的选择目的。

　　注意：

　　多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

　　类名选择器：< div class=“nav”> 这个 div 的名字就是 nav nav 就是 div 这个 div 也是 nav

　　< 人 class = 刘德华 > 我们想要吧div 找到 div {} .nav {}

　　id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

　　该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

　　用法基本和类选择器相同。

　　W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

　　类选择器（class）好比人的名字，是可以多次重复使用的，比如张伟王伟李伟李娜

　　id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。

　　id选择器和类选择器最大的不同在于使用次数上。

　　通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

　　例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

　　注意：

　　这个通配符选择器，就像我们的电影明星中的梦中情人，想想它就好了，但是它不会和你过日子。

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

　　font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

　　p{ font-family:“微软雅黑”;}

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

　　常用技巧：

　　在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持类似微软雅黑的中文。

　　方案一：你可以使用英文来替代。比如 font-family:“Microsoft Yahei”。

　　方案二：在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。

　　font-family: “\5FAE\8F6F\96C5\9ED1”，表示设置字体为“微软雅黑”。

　　可以通过escape（）来测试属于什么字体。

　　字体名称英文名称Unicode 编码宋体SimSun\5B8B\4F53新宋体NSimSun\65B0\5B8B\4F53黑体SimHei\9ED1\4F53微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1楷体_GB2312KaiTi_GB2312\6977\4F53_GB2312隶书LiSu\96B6\4E66幼园YouYuan\5E7C\5706华文细黑STXihei\534E\6587\7EC6\9ED1细明体MingLiU\7EC6\660E\4F53新细明体PMingLiU\65B0\7EC6\660E\4F53

　　为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体

　　字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

　　小技巧：

　　字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

　　font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

　　normal：默认值，浏览器会显示标准的字体样式。

　　italic：浏览器会显示斜体的字体样式。

　　oblique：浏览器会显示倾斜的字体样式。

　　小技巧：

　　font属性用于对字体样式进行综合设置，其基本语法格式如下：

　　color属性用于定义文本的颜色，其取值方式有如下3种：

　　1.预定义的颜色值，如red，green，blue等。

　　2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。

　　3.RGB代码，如红色可以表示为rgb（255,0,0）或rgb（100%,0%,0%）。

　　需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

　　ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

　　一般情况下，行距比字号大7.8像素左右就可以了。

　　left：左对齐（默认值）

　　right：右对齐

　　center：居中对齐

　　是让盒子里面的内容水平居中，而不是让盒子居中对齐

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

　　1em 就是一个字的宽度如果是汉字的段落， 1em 就是一个汉字的宽度

　　text-decoration 通常我们用于给链接修改装饰效果

　　值描述none默认。定义标准的文本。underline定义文本下的一条线。下划线也是我们链接自带的overline定义文本上的一条线。line-through定义穿过文本下的一条线。

　　此工具是我们的必备工具，以后代码出了问题，我们首先第一反应就是：

　　“按F12”或者是 “shift+ctrl+i” 打开开发者工具。

　　菜单：右击网页空白出—查看

　　小技巧：

　　ctrl+滚轮可以放大开发者工具代码大小。左边是HTML元素结构右边是CSS样式。右边CSS样式可以改动数值和颜色查看更改后效果。

　　复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签。

　　交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

　　记忆技巧：

　　交集选择器是并且的意思。即…又…的意思

　　用的相对来说比较少，不太建议使用。

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

　　记忆技巧：

　　并集选择器和的意思，就是说，只要逗号隔开的，所有选择器都会执行后面样式。

　　比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。通常用于集体声明。

　　他和他，在一起，在一起一起的意思

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

　　子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

　　子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。

　　白话：这里的子指的是亲儿子不包含孙子重孙子之类。

　　比如： .demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。

　　在不修改以上代码的前提下，完成以下任务：

　　链接登录的颜色为红色，同时主导航栏里面的所有的链接改为橙色（简单）主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。（中等）主导航栏里面的一级菜单链接文字颜色为绿色。（难）

　　伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

　　伪娘

　　类 .one

　　伪类 :link

　　：link

　　：visited

　　：hover

　　：active

　　注意写的时候，他们的顺序尽量不要颠倒按照 lvha 的顺序。 love hate 爱上了讨厌记忆法或者 lv 包包非常 hao

　　CSS规则是使用 ”结束。

　　例如：

　　sublime可以快速提高我们代码的书写方式

　　生成标签直接输入标签名按tab键即可比如 div 然后tab 键，就可以生成

　　如果想要生成多个相同标签加上 * 就可以了比如 div*3 就可以快速生成3个div

　　如果有父子级关系的标签，可以用 > 比如 ul > li就可以了

　　如果有兄弟关系的标签，用 + 就可以了比如 div+p

　　如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab 键就可以了

　　？

　　非洲黑人：皮肤内黑色素含量高，以吸收阳光中的紫外线，保护皮肤内部结构免遭损害，头发象羊毛一样卷曲，使每根卷发周围都有许多空隙，空隙充满空气，卷发有隔热作用。

　　欧洲白人：生活寒带或着是说常年温度较低的地缘，加上年日照时间少，身体的黑色素沉淀比较少——所以出现皮肤、发色、瞳晕都呈现浅色

　　小黄人：我中间的……

　　最重要的总结：是为了更好的适应环境而完成的自然选择。

　　同理，我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。

　　标签的类型（显示模式）

　　HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：

　　每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。霸道

　　块级元素的特点：

　　（1）总是从新行开始

　　（2）高度，行高、外边距以及内边距都可以控制。

　　（3）宽度默认是容器的100%，高度默认0

　　（4）可以容纳内联元素和其他块元素。

　　行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

　　我一样重要

　　行内元素的特点：

　　（1）和相邻行内元素在一行上。

　　（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

　　（3）默认宽度就是它本身内容的宽度。

　　（4）行内元素只能容纳文本或则其他行内元素。（a特殊 a里面可以放块级元素）

　　注意：

　　只有文字才能组成段落因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。链接里面不能再放链接。a里面可以放块级元素

　　特别注意的是：定位会改变元素的display属性【类似浮动】，inline变成block

　　块转行内：display:inline;

　　行内转块：display:block; 转换块级元素的目的参考其特点

　　块、行内元素转换为行内块： display: inline-block;

　　此阶段，我们只需关心这三个，其他的是我们后面的工作。

　　1.写三个 div 给定 100 * 100 的红色盒子 – 宽度高度背景色

　　2.三个 span 也要求 150 * 150 绿色盒子

　　三个 a 链接 80 * 20 蓝色盒子要求必须一行显示这三个盒子鼠标经过3个a链接的时候，背景颜色变为橙色 hover bgc导航栏案例

　　开始就形成良好的书写规范，是你专业化的开始。

　　【强制】选择器与 { 之间必须包含空格。

　　示例： .selector { }

　　【强制】属性名与之后的 : 之间不允许包含空格， : 与属性值之间必须包含空格。

　　示例：

　　font-size: 12px;

　　【强制】当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

　　示例：

　　【建议】选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

　　示例：

　　【强制】属性定义必须另起一行。

　　示例：

　　【强制】属性定义后必须以分号结尾。

　　示例：

　　行高我们利用最多的一个地方是：可以让一行文本在盒子中垂直居中对齐。

　　做法就是：文字的行高等于盒子的高度。

　　这里情况些许复杂，开始学习，我们可以先从简单地方入手学会。

　　上距离和下距离总是相等的，因此文字看上去是垂直居中的。

　　如果行高等 height 高度文字会垂直居中

　　如果行高大于高度文字会偏下

　　如果行高小于高度文字会偏上

　　层叠继承优先级是我们学习CSS 必须掌握的三个特性。

　　所谓层叠性是指多种CSS样式的叠加。

　　是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

　　比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。就近原则

　　一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

　　样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。样式不冲突，不会层叠

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

　　简单的理解就是：子承父业。

　　注意：

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

　　在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

　　关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准具体规范入如下：

　　specificity用一个四位的数字串（CSS2是三位）来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

　　继承或者* 的贡献值0,0,0,0每个元素（标签）贡献值为0,0,0,1每个类，伪类贡献值为0,0,1,0每个ID贡献值为0,1,0,0每个行内样式贡献值1,0,0,0每个！important贡献值重要的∞ 无穷大

　　权重是可以叠加的

　　比如的例子：

　　？

　　注意：

　　1.数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不会存在10个div能赶上一个类选择器的情况。

　　继承的权重是 0

　　总结优先级：

　　使用了 !important声明的规则。内嵌在 HTML 元素的 style属性里面的声明。使用了 ID 选择器的规则。使用了类选择器、属性选择器、伪元素和伪类选择器的规则。使用了元素选择器的规则。只包含一个通用选择器的规则。同一类选择器则遵循就近原则。

　　CSS 可以添加背景颜色和背景图片，以及来进行图片设置。

　　background-color背景颜色background-image背景图片地址background-repeat是否平铺background-position背景位置background-attachment背景固定还是滚动背景的合写（复合属性）background:背景颜色背景图片地址背景平铺背景滚动背景位置

　　语法：

　　参数：

　　none : 　无背景图（默认的）

　　url : 　使用绝对或相对地址指定背景图像

　　background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。如果有背景图片平铺，则会覆盖背景颜色。

　　小技巧：我们提倡背景图片后面的地址，url不要加引号。

　　语法：

　　参数：

　　repeat : 　背景图像在纵向和横向上平铺（默认的）

　　no-repeat : 　背景图像不平铺

　　repeat-x : 　背景图像在横向上平铺

　　repeat-y : 　背景图像在纵向平铺