css学习笔记

选择器 {属性： 值； ……}

选择器的种类：

1、标签选择器：以html标签名称作为选择器

标签名 {属性： 值； ……}

2、类选择器：单独选某个或某几个标签

.类名 {属性： 值； ……}

在需要选择的标签里面，class="类名"

多个类名，用空格隔开

3、id选择器： #id {属性： 值； ……}

在需要选择的标签里面，id="id名"

只能被调用一次

4、通配符选择器： * {属性： 值； ……}

*选取页面当中所有的标签

类选择器在修改样式中用的多，id选择器一般用于页面唯一性元素上，与js搭配

字体属性：

Font-family：“字体名”；

Font-size：数字px；

Font-weight：100-900；   400为normal，700为bold

font-style：normal/italic；  更多的是让倾斜的字体不倾斜

复合属性：font：font-stlyle  font-weight  font-size/font-height  font-family;

前两个可以省略，后两个不能省略

文本属性：

文本颜色：color：____;

预定义的颜色：red

十六进制：#FF0000

rgb：rgb（255，0，0）

对齐文本：text-align：_____;

Left  默认

Right

Center

装饰文本：text-decoration：_____;

none：默认

Underline

overline：上划线

line-through：删除线

文本缩进：text-indent：__px/em;   em为当前元素大小的相对倍数

若想段落开头空两格，则缩进设为2em

行间距：line-height：____px;

css引入方式：

内部样式表：在html文件中，使用<style>标签内部书写

行内样式表：在某个标签内，<div  style="______">，style作为属性

外部样式表：.css文件形式，引入方式为<link  rel="stylesheet"  href="css文件路径">

复合选择器：后代选择器、子选择器、并集选择器、伪选择器

后代选择器：  元素1 元素2{样式声明}

选择元素1里面所有元素2，元素2只要是元素1的后代即可，元素1和元素2可以是任意的基础选择器的组合.

子选择器：  元素1>元素2{样式声明}

选择元素1里面所有的直接后代元素2，元素2必须是元素1的下一级，亲儿子，在往下一级都不归它管。

并集选择器：元素1，元素2{样式声明}

选择多组标签，加上相同的样式，集体声明。任何形式的选择器都可以作为并集选择器的一部分

链接伪类选择器：

：focus伪类选择器

用于选取获得焦点的表单元素

input：focus{样式声明}

元素显示模式：HTML元素分为块元素和行内元素

常见的块元素有：<h1>-<h6>、<p>、<div>、<ul>、<ol>、<li>,其中，<div>是典型的块元素

块级元素的特点：

1、自己独占一行

2、高度、宽度、外边距以及内边距都可以控制

3、宽度默认是容器（父级宽度）的100%

4、是一个容器及盒子，里面可以放行内元素或者块级元素

注：文字类元素内不能使用块级元素，例如：<p>标签主要用于存放文字，所以，里面不能放块级元素，同理,<h1>-<6>都是文字类块级标签，也不能放

常见的行内元素（内联元素）有：<a>、<strong>、<b>、<em>、<i>、<span>等，其中<span>是最典型的行内元素

行内元素的特点：

1、相邻行内元素在一行上，一行可以显示多个

2、高、宽直接设置是无效的

3、默认宽度就是它本身内容的宽度

4、行内元素只能容纳文本或其他行内元素

注：链接里面不能再放链接；特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式更安全

行内块元素：特殊的标签：<img/>、<input/>、<td/>，他们同时具有块元素和行内元素的特点

行内块元素的特点：

1、和相邻行内元素在一行上，但是相邻之间会有空白缝隙，一行可以显示多个

2、默认宽度就是它本身内同容的宽度

3、高度、行高、外边距以及内边距都可以控制

元素显示模式转换：将一个模式的元素转换为另一个模式，写在style的样式设置里

转换为块元素：display：block；

转换为行内元素：display：inline；

转换为行内块元素：display：inline-block；

单行文字垂直居中：让文字的行高等于盒子的高度：lineheight=height

css的背景

Background-color：颜色值，默认为transparent

背景图片：logo、装饰性小图片、超大背景图、便于控制位置

Background-image：none、/url(url)

背景平铺：background-repeat：repeat/no-repeat/repeat-x/repeat-y

背景图片位置：background-position：x y；

坐标：方位名词/精确单位

length：百分数/由浮点数和单位标识符组成

position：top/center/bottom/left/center/right

注： 1.xy均为方位名词，则二者顺序无所谓

          2、如果只指定一个方位名词，则省略的参数作为第二个默认居中

3、精确坐标需要严格遵守xy的顺序

4、如果只指定一个坐标，此指定值为x，另一个y默认居中

5、混合使用顺序为xy

背景图片固定：是否随着页面的滚动而滚动

Background-attachment：fixed/scroll（默认）

背景色半透明：background：rgba（red，green，blue，alpha）alpha透明度的取值在0到1之间

css三大特性：层叠性、继承性、优先级

1、层叠性：样式冲突：就近原则，选择离结构近的样式

样式不冲突：不层叠

2、继承性：<div>

<p>…</p>

</div>

对div样式进行设计，p中的内容也会继承

Text-，line-，font-开头的以及color可继承

行高的继承：行高后单位可接可不接，如果不接，font：14px/1.5,则表示行高为当前文字大小的1.5倍，即line-height=21px

3、优先级：选择器相同，执行层叠性

选择器不同，按权重划分优先程度

继承、*：0，0，0，0

元素（标签）选择器：0，0，0，1

类选择器、伪类选择器：0，0，1，0

id选择器：0，1，0，0

行内样式style=“”：1，0，0，0

！important:∞（例：color：pink！important）

复合选择器，则权重叠加，计算优先级

CSS盒子模型

Box model：border、content、padding、margin

1、边框：border-width：边框粗细-------------会影响盒子的大小

border-style：样式--------------solid：实线：dashed：虚线：dotted：点线

border-color：颜色

复合写没有顺序

表格细线边框：border-collapse：collapse；单元格边框合并

2、内边距：padding-left/right/top/bottom:----px;

会影响盒子的大小。用宽高减去内边距调整

复合属性：1个值：表示上下左右均为此值

2个值：第一个表示上下，第二个表示左右

3个值：第一个表示上，第二个表示左右，第三个表示下

4个值：顺时针表示，上右下左