CSS速查宝典:https://www.w3cschool.cn/css/dict

CSS简介

  CSS-网页的美容师:CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.
  CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
  CSS 让我们的网页更加丰富多彩,布局更加灵活自如。简单理解:CSS 可以美化 HTML , 让 HTML 更漂亮, 让页面布局更简单。

  1. HTML 主要做结构,显示元素内容.
  2. CSS 美化 HTML ,布局网页.
  3. CSS 最大价值: 由 HTML 专注去做结构呈现,样式交给 CSS,即 结构 ( HTML ) 与样式( CSS ) 相分离。

CSS语法规范

  • 选择器是用于指定 CSS 样式的 HTML 标签,花括号内是对该对象设置的具体样式
  • 属性和属性值以“键值对”的形式出现
  • 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等
  • 属性和属性值之间用英文“:”分开
  • 多个“键值对”之间用英文“;”进行区分

  所有的样式,都包含在 <style> 标签内,表示是样式表。<style> 一般写到 </head> 上方。

1
2
3
4
5
6
7
8
<head>
<style>
h4 {
color: blue;
font-size: 100px;
}
</style>
</head>

CSS的引入方式

内部样式表

  内部样式表(内嵌样式表)是写到html页面内部. 是将所有的 CSS 代码抽取出来,单独放到一个<style> 标签中。

1
2
3
4
5
6
<style>
div {
color: red;
font-size: 12px;
}
</style>
  • <style> 标签理论上可以放在 HTML 文档的任何地方,但一般会放在文档的<head>标签中
  • 通过此种方式,可以方便控制当前整个页面中的元素样式设置
  • 代码结构清晰,但是并没有实现结构与样式完全分离
  • 使用内部样式表设定 CSS,通常也被称为嵌入式引入,这种方式是我们练习时常用的方式

行内样式表

  行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.

1
<div style="color: red; font-size: 12px;">青春不常在,抓紧谈恋爱</div>
  • style 其实就是标签的属性
  • 在双引号中间,写法要符合 CSS 规范
  • 可以控制当前的标签设置样式
  • 由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用
  • 使用行内样式表设定 CSS,通常也被称为行内式引入

外部样式表

  实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中,之后把CSS文件引入到 HTML 页面中使用.

引入外部样式表分为两步:

  1. 新建一个后缀名为 .css 的样式文件,把所有 CSS 代码都放入此文件中。
  2. 在 HTML 页面中,使用<link> 标签引入这个文件。
1
<link rel="stylesheet" href="css文件路径">

CSS引入方式总结

CSS基础选择器

CSS选择器的作用?

1
2
3
4
5
6
7
8
9
<div>我是div</div>
<div>我是div</div>
<p>我是段落</p>
<ul>
<li>我是ul里面小li哦</li>
</ul>
<ol>
<li>我是ol里面小li哦</li>
</ol>
  1. 我想把 div 里面的文字改为红色?

  2. 我想把第一个div 里面的文字改为红色?

  3. 我想把ul 里面的 li 文字改为红色?

选择器分类

  选择器分为基础选择器复合选择器两个大类

  • 基础选择器是由单个选择器组成的
  • 基础选择器又包括:标签选择器类选择器id 选择器通配符选择器

标签选择器

  标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。

语法

1
2
3
4
5
6
标签名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}

作用
  标签选择器可以把某一类标签全部选择出来,比如所有的 <div> 标签和所有的 <span> 标签。
优点
  能快速为页面中同类型的标签统一设置样式。
缺点
  不能设计差异化样式,只能选择全部的当前标签。

类选择器

  如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器.

语法

1
2
3
4
.类名 {
属性1: 属性值1;
...
}

  例如,将所有拥有 red 类的 HTML 元素均为红色。

1
2
3
.red {
color: red;
}
1
<div class=‘red’> 变红色 </div>

注意

  ① 类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。
  ② 可以理解为给这个标签起了一个名字,来表示。
  ③ 长名称或词组可以使用中横线来为选择器命名。
  ④ 不要使用纯数字、中文等命名,尽量使用英文字母来表示。
  ⑤ 命名要有意义,尽量使别人一眼就知道这个类名的目的。
  ⑥ 命名规范:见附件( Web 前端开发规范手册.doc)

记忆口诀:样式点定义,结构类调用。一个或多个,开发最常用。

类选择器-多类名

  我们可以给一个标签指定多个类名,从而达到更多的选择目的。 这些类名都可以选出这个标签.
  简单理解就是一个标签有多个名字。

使用方式

1
<div class="red font20">亚瑟</div>
  • 在标签class 属性中写 多个类名
  • 多个类名中间必须用空格分开
  • 这个标签就可以分别具有这些类名的样式

使用场景

  • 可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
  • 这些标签都可以调用这个公共的类,然后再调用自己独有的类.
  • 从而节省CSS代码,统一修改也非常方便.
1
<div class="pink fontWeight font20">亚瑟</div><div class="font20">刘备</div><div class="font14 pink">安其拉</div><div class="font14">貂蝉</div>

ID选择器

  id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
  HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以“#” 来定义。

语法

1
#id名 {	属性1: 属性值1;	...}

  例如,将 id 为 nav 元素中的内容设置为红色。

1
#nav{	color:red; }

  注意:id 属性只能在每个 HTML 文档中出现一次。口诀: 样式#定义,结构id调用, 只能调用一次, 别人切勿使用.

id 选择器和类选择器的区别

① 类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用。
② id 选择器好比人的身份证号码,全中国是唯一的,不得重复。
③ id 选择器和类选择器最大的不同在于使用次数上。
④ 类选择器在修改样式中用的最多,id 选择器一般用于页面唯一性的元素上,经常和 JavaScript 搭配使用。

通配符选择器

  在 CSS 中,通配符选择器使用“*”定义,它表示选取页面中所有元素(标签)。

语法

1
* {	属性1: 属性值1;	...}
  • 通配符选择器不需要调用, 自动就给所有的元素使用样式,特殊情况才使用
1
* {	margin: 0;	padding: 0;}

CSS复合选择器

  在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。

  • 复合选择器可以更准确、更高效的选择目标元素(标签)
  • 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
  • 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器

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

语法

1
元素1 元素2 { 样式声明 }

  上述语法表示选择元素 1 里面的所有元素 2 (后代元素)。

1
ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */

注意事项

  • 元素1 和 元素2 中间用空格隔开
  • 元素1 是父级,元素2 是子级,最终选择的是元素2
  • 元素2 可以是儿子,也可以是孙子等,只要是元素1 的后代即可
  • 元素1 和 元素2 可以是任意基础选择器

子选择器

  子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.

语法

1
元素1 > 元素2 { 样式声明 }
1
div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */

注意

  • 元素1 和 元素2 中间用 大于号 隔开
  • 元素1 是父级,元素2 是子级,最终选择的是元素2
  • 元素2 必须是亲儿子,其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器

测试

  1. 请将下面的链接文字修改为红色。
1
<div class="nav">	<ul>		<li><a href="#">百度</a></li>		<li><a href="#">百度</a></li>	</ul></div>
1
.nav ul li a {	color: red;}
  1. 请将下面的大肘子文字修改为红色。
1
<div class="hot">    <a href="#">大肘子</a>    <ul>        <li><a href="#">猪头</a></li>        <li><a href="#">猪尾巴</a></li>    </ul></div>
1
.hot>a {	color: red;}

并集选择器

  并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明.
  并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。

语法

1
元素1,元素2 { 样式声明 }
1
ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */

注意事项

  • 元素1 和 元素2 中间用逗号隔开
  • 逗号可以理解为和的意思
  • 并集选择器通常用于集体声明

伪类选择器

  伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
  伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover:first-child
  伪类选择器很多,比如有链接伪类、结构伪类等,

链接伪类选择器

1
/* a 是标签选择器 所有的链接 */a {    color: gray;}/* :hover 是链接伪类选择器 鼠标经过 */a:hover {    color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */}

:focus 伪类选择器

  :focus 伪类选择器用于选取获得焦点的表单元素。

  焦点就是光标,一般情况<input> 类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。

1
input:focus {	background-color:yellow;}

复合选择器总结

CSS元素显示模式

  元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>

  HTML 元素一般分为块元素和行内元素两种类型。

块元素

  常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中 <div> 标签是最典型的块元素。
块级元素的特点:
  ①比较霸道,自己独占一行。
  ②高度,宽度、外边距以及内边距都可以控制。
  ③宽度默认是容器(父级宽度)的100%。
  ④是一个容器及盒子,里面可以放行内或者块级元素。

注意:
  文字类的元素内不能使用块级元素
  <p> 标签主要用于存放文字,因此 <p> 里面不能放块级元素,特别是不能放<div>
  同理, <h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素

行内元素

 &emsp常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素

行内元素的特点:
  ①相邻行内元素在一行上,一行可以显示多个。
  ②高、宽直接设置是无效的。
  ③默认宽度就是它本身内容的宽度。
  ④行内元素只能容纳文本或其他行内元素。
注意:
  链接里面不能再放链接
  特殊情况链接 <a> 里面可以放块级元素,但是给 <a> 转换一下块级模式最安全

行内块元素

  在行内元素中有几个特殊的标签 —— <img />、<input />、<td>,它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点:
  ①和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
  ②默认宽度就是它本身内容的宽度(行内元素特点)。
  ③高度,行高、外边距以及内边距都可以控制(块级元素特点)。

元素显示模式总结

CSS的元素显示模式转换

  特殊情况下,我们需要元素模式的转换,简单理解: 一个模式的元素需要另外一种模式的特性
  比如想要增加链接 <a> 的触发范围。

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

CSS字体属性

  CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。

字体系列

  CSS 使用 font-family 属性定义文本的字体系列。

1
p { font-family:"微软雅黑";}div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}
  • 各种字体之间必须使用英文状态下的逗号隔开
  • 一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
  • 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
  • 最常见的几个字体:body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }

字体大小

  CSS 使用 font-size 属性定义字体大小。

1
p {	font-size: 20px;}
  • px(像素)大小是我们网页的最常用的单位
  • 谷歌浏览器默认的文字大小为16px
  • 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
  • 可以给 body 指定整个页面文字的大小

字体粗细

  CSS 使用 font-weight 属性设置文本字体的粗细。

1
p {	font-weight: bold;}

文字样式

  CSS 使用 font-style 属性设置文本的风格。

1
p {	font-style: normal;}

字体复合属性

  字体属性可以把以上文字样式综合来写, 这样可以更节约代码:

1
body {	font: font-style font-weight font-size/line-height font-family;}
  • 使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
  • 不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用

字体属性总结

CSS文本属性

  CSS Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

文本颜色

color 属性用于定义文本的颜色。

1
div {	color: red;}

对齐文本

  text-align 属性用于设置元素内文本内容的水平对齐方式。

1
div {	text-align: center;}

装饰文本

  text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

1
div {	text-decoration:underline;}

文本缩进

  text-indent 属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。

1
div {	text-indent: 10px;}

  通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。

1
p {text-indent: 2em;}

  em 是一个相对单位,就是当前元素(font-size) 1 个文字的大小, 如果当前元素没有设置大小,则会按照父元素的 1 个文字大小。

行间距

  line-height 属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离.

1
p {	line-height: 26px;}

文本属性总结

CSS背景属性

  通过 CSS 背景属性,可以给页面元素添加背景样式。
  背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

背景颜色

  background-color 属性定义了元素的背景颜色。

1
background-color:颜色值;

  一般情况下元素背景颜色默认值是 transparent(透明),我们也可以手动指定背景颜色为透明色。

1
background-color:transparent;

背景图片

  background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

1
background-image : none | url (url)

背景平铺

1
background-repeat: repeat | no-repeat | repeat-x | repeat-y

背景图片位置

  1. 参数是方位名词

如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top 和 top left 效果一致
如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐

  1. 参数是精确单位

如果参数值是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标
如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中

  1. 参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用,则第一个值是 x 坐标,第二个值是 y 坐标

背景图像固定

  background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

1
background-attachment : scroll | fixed

背景复合写法

  为了简化背景属性的代码,我们可以将这些属性合并简写在同一个属性 background 中。从而节约代码量.
  当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为:
  background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

1
background: transparent url(image.jpg) repeat-y fixed top ;

背景色半透明

  CSS3 为我们提供了背景颜色半透明的效果。

1
background: rgba(0, 0, 0, 0.3);
  • 最后一个参数是 alpha 透明度,取值范围在 0~1之间
  • 我们习惯把 0.3 的 0 省略掉,写为 background: rgba(0, 0, 0, .3);
  • 注意:背景半透明是指盒子背景半透明,盒子里面的内容不受影响
  • CSS3 新增属性,是 IE9+ 版本浏览器才支持的
  • 但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

背景总结