关于css:CSS基础一

1、CSS 是什么

即层叠样式表，HTML负责构造，而 CSS 则丑化HTML，增加各种款式如：宽高距离、大小色彩、动画及其他装璜成果

2、引入形式

引入形式共有三种：

1. 行内款式：写在标签元素外面，以 style="" 模式，优先级最高（不举荐，显得太过于简单）
2. 内联款式：写在 <style></style> 这对标签中，款式少的话间接写在这里
3. 外联款式：写在 .css 文件中，而后用 <link src=""> 引入款式（举荐，不过还有@import）

link 与 @import 移入办法的区别：

1、加载子资源的限度

• link是 XHTML 的标签，解决加载 CSS 文件外，还能够加载 RSS 等其余事物，如加载模板
• 而 @import 只能加载 css 文件

2、加载形式

• link 引入 css 文件，在页面载入时同时加载，即 同步加载
• @import 援用 css 文件，须要等到页面齐全载入后，再加载 css 文件，即 异步加载

3、兼容性

• link 是 XTHML 的标签，没有兼容问题
• @import 是在 css2.1 中提出来的，不反对低版本的浏览器

4、扭转款式

• link标签是 DOM 元素，反对应用 JS 管制 DOM 和批改款式
• @import 是办法，不反对管制 DOM 和批改款式

3、CSS 选择器

CSS 选择器分为简略选择器和复合选择器

简略选择器

简略选择器个别蕴含： 标签选择器 、 类选择器 、id 选择器、 通配符选择器

1. 标签选择器：就是以 div、span、p等标签作为选择器
2. 类选择器：.colorRed {}，为标签增加该类就能够增加该款式
3. id 选择器：#colorRed {}，领有该 id 款式的那个标签就领有该款式（惟一）
4. 通配符选择器：* {}，作用范畴是整个页面，个别用作 CSS 初始化

留神：

• 类选择器能够用在不同的标签上；类名就像人的名字，能够多人应用同一个名字，所以类选择器能够用在多个标签
• id 选择器 个别用在唯一性的标签；id 就像人的身份证号，每一个人都有一个惟一的身份证号，所以每一个标签的 id 也是惟一的，所以一个 id 选择器 只用在一个标签

所以，类选择器和 id 选择器最大的区别是应用次数

复合选择器

复合选择器是建设在简略选择器的根底之上的，它是由两个或两个以上的选择器组合而成的

1、后辈选择器

ul li {...}

• 两个元素以空格隔开，意思是 ul 标签中的所有 li 标签
• 第二个能够是儿子元素，也能够是孙子元素，只有是在 ul 中的就行
• 能够层层嵌套，多个简略选择器

2、子选择器

div > p {...}

• 抉择离 div 最近的一级子元素p，孙子元素p 甚至更远的都不选中
• 留神：p 必须是亲儿子

3、并集选择器

p, a {...}

• 所谓并集就是两个并列的，即p 和 a 都增加该款式
• 两个标签之间用逗号 (,) 隔开，能够了解为 和

4、伪类选择器

伪类选择器就是向某个选择器增加非凡的成果，其格局就是选择器前面加上冒号(:)

链接伪类选择器

a:link {...}      /* 抉择所有未被拜访的链接 */
a:visited {...}   /* 抉择所有已被拜访的链接 */
a:hover {...}     /* 抉择鼠标指针位于其上的链接 */
a:active {...}    /* 抉择流动链接(鼠标按下未弹起的链接) */

focus 伪类选择器

该选择器用于获取焦点的表单元素，个别状况下也是用于表单元素

/* 表单获取焦点时 批改色彩 */
input:focus {color:blue}  

用得比拟少

权重

CSS 中优先级如下：

!important > 内联款式 style > id (权重 100) > class（权重 10）> 标签（权重 1）

4、字体、文本属性

字体款式

1、font-family：定义文本的字体系列

常见的字体系列：

`body {font-family: Arial, 'Microsoft YaHei', Tahoma, 'Hiragino Sans GB';}` 

2、font-size：字体大小

• px 像素是咱们最罕用的单位，还有 em、rem

  1. em：绝对容器字体大小，且会继承父元素的字体大小
  2. rem：绝对于根元素（通常是 HTML 元素）字体的大小
• 谷歌浏览器默认是 16px

3、font-weight：字体粗细

/* 粗体 */
p {font-weight: bold}  

• 默认值：normal，等同于 400
• 粗体：bold，等同于 700

举荐用数字，并且数字不加单位

4、font-style：文字款式

p {font-size: normal}

• normal：默认值，浏览器会显示规范的字样
• italic：显示斜体

这个平时用得较少，反而要给斜体标签（em、i）改为不歪斜

5、font：字体复合属性

p {font: font-style font-size font-weight font-family;}

• 留神：不能更换程序

文本属性

1、文本色彩

color：定义文本色彩

p {color: red;}

色彩属性值示意形式：

• 预约义的色彩值：red、blue 等
• 十六进制：#333333、#ffffff 等
• RGB：rgb(255, 0, 0)

2、对齐文本

text-align：用于设置元素内文本内容的程度对齐形式

div {text-align: center;}

• left：左对齐
• right：右对齐
• center：居中对齐

3、装璜文本

text-decration：增加到文本的润饰，如：上划线、下划线、删除线

a {text-decration: none}

• none：默认值，即没有装璜线
• underline：下划线，链接 a 会自带下划线
• overline：上划线
• line-through：删除线

罕用 text-decration: none 去除链接的自带的下划线

4、文本缩进

text-indent：用于指定文本第一行缩进，罕用于段首

p {text-indent: 32px;}

• 默认一个字是 16px，缩进两个字就是 32px
• 也能够应用 2em，绝对缩进

5、行间距

line-height：用于设置行高

p {line-height: normal}
p {line-height: 26px}
p {line-height: 1.5}
p {line-height: 1.5em}
p {line-height: 150%}

• normal：默认值
• 26px：字体高为 16px，那么行距就是 10，高低各 5px
• 数字：行高就是 数字 * 字体大小，所以 1.5 就是 29px
• em：浏览器字体默认是 16px，那么 1.5em 就是 29px
• 百分比：百分比 * 字体大小

举荐应用 数字型 的

5、CSS 显示模式

1、块元素

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li> 等

特点：

1. 本人独占一行
2. 大小、内外边距 能够轻易改
3. 宽度默认是父级容器的 100%
4. 块元素外面能够放块级元素或行内元素

留神：

• 段落标签 <p> 比拟非凡，它是用来放文字，外面不能放块级元素，特地是div
• <h1> ~ <h6> 也是

/* 将元素转换为块级元素 */
span {display: block}

2、行内元素

常见的行内元素有 <span>、<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>等，

有的中央也称为 内联元素

特点：

1. 相邻行内标签在一行上显示，一行能够显示多个
2. 宽高设置有效，默认宽度是它自身内容的宽度
3. 行内元素只能包容文本或者其它行内元素

留神：

• 链接外面不能再放链接
• 非凡状况链接 外面能够放块级元素，然而给 转换一下块级模式最平安

/* 将元素转换为行内元素 */
div {display: inline}

3、行内块元素

行内块元素就那么几个：<img>、<input>、<button>、<td>，它同时具备行内元素和块级元素一些个性

<img> 是一个行内块元素

特点：

• 相邻元素在一行显示，一行显示多个行内块元素，然而它们之间没有缝隙（行内元素特点）
• 默认宽度就是它自身内容的宽度（行内元素特点）
• 宽高、内外边距都是能够批改的

总的来说，行内块元素就是 一行能够包容多个元素，而这些元素又能够批改宽高

/* 将元素转换为行内块元素 */
ul li {display: inline-block;}

6、盒子模型

CSS 盒子模型实质上是一个盒子，包含边框、外边距、内边距 和 实例内容

盒子的理论大小是由外边距、内边距、内容决定的

即 盒子大小 = 边框 + 内边距 + 理论内容

1、边框

• border-width：边框粗细，单位为px

• border-style：边框款式

  1. solid：实线边框，最罕用
  2. dashed：虚线边框
  3. dotted：点线边框
• border-color：边框色彩

咱们个别都是简写：

border : 2px solid red;

• 程序不能够更改
• 也能够独自设置高低、左右边框

还能够设置边框圆角

border-redius: length

• length：能够是 数值 + px，或者是 百分比
• 还能够独自设置某个圆角，如 上左角：border-top-left-radius

2、外边距

外边距即盒子与盒子之间的内部间隔，能够独自设置上下左右外边距，也能够简写：

/* 别离设置上下左右外边距 */
margin: top right bottom left

/* 设置 上、左右、下 */
margin: top left-right bottom

/* 设置高低、左右外边距 */
margin: top-bottom left-right;

外边距典型的利用：设置元素 居中显示

• 前提：该元素必须设置width
• margin: 0 auto：高低为0，左右居中

3、内边距

内边距即盒子的外部间隔，能够独自设置上下左右内边距，也能够简写：

/* 别离设置上下左右外边距 */
padding: top right bottom left

/* 设置 上、左右、下 */
padding: top left-right bottom

/* 设置高低、左右外边距 */
padding: top-bottom left-right;

• 留神：设置内边距会撑大盒子

4、外边距合并

对于两个嵌套关系（父子关系）的块元素，它们有各自的上外边距，然而这两个嵌套的元素的其外边距时合并的，当任意一个的 margin 扭转，另一个会随着扭转

#a {
    width: 300px;
    height: 100px;
    background-color: red;
    overflow: hidden
    /* border-top: 1px solid #fff; */
    /* padding-top: 1px; */
}

#b {
    width: 200px;
    height: 300px;
    background-color: blue;
    margin: 100px;
}

<div id="a">
    <div id="b"></div>
</div>

解决办法：

• 为父元素定义上边距
• 为父元素定义上内边距
• 为父元素增加 overflow: hidden;

7、CSS 三大个性

CSS 有三大个性：层叠性、继承性、优先性

7.1 层叠性

当呈现雷同选择器给雷同的属性设置不同属性值时，就会呈现抵触，而层叠性就是为了解决这种抵触的

如果款式抵触，就会采取 就近准则，哪个写在前面，就执行哪个款式

div {color: red;}

div {color: pink;}

像这样会执行前面那个，也就是粉红色

7.2 继承性

继承性就是子标签会继承父标签的 某些 款式

• 可继承：text-、font-、line- 这些元素结尾的，还有color
• 不可继承：border、padding、margin、width、height

总的来说，跟字体相干的款式通常能够继承，与尺寸大小相干的款式通常不可继承

7.3 优先性

当同一个元素指定多个选择器的时候，通常会有优先级的产生

• 选择器雷同，会执行层叠性
• 选择器不同，会依据选择器权重执行

!important > style（内联）> Id（权重 100）> 类、伪类、属性选择器（权重 10）> 属性、标签选择器（权重 1）