CSS 初识

# CSS的发展历程

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

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

# CSS 网页的美容师

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

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

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

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

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

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

# CSS初识

CSS(Cascading Style Sheets)美化样式

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

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

# 引入CSS样式表(书写位置)

## 内部样式表

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

选择器

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

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

## 行内式(内联样式)

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

....html

内容

......html

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

## 外部样式表(外链式)

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

```html

```

注意: link 是个单标签哦!!!

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

href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。

rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。

注意:

标签也是要写在标签里面的。href=""是css的外部链接地址

css外链式写法

##三种样式表总结(位置)

# CSS样式规则

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

在上面的样式规则中:

1.选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。

2.属性和属性值以“键值对”的形式出现。

3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。

4.属性和属性值之间用英文“:”连接。

5.多个“键值对”之间用英文“;”进行区分。

可以用段落 和 表格的对齐的演示。

# CSS基础选择器

##标签选择器(元素选择器)

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

```

标签名 或者

元素名

```

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

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

## 类选择器

类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:

```

.类名

```

标签调用的时候用 class=“类名” 即可。

```

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

1.长名称或词组可以使用中横线来为选择器命名。

2.不建议使用“_”下划线来命名CSS选择器。

##多类名选择器:

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

注意:

1-1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。

1-2. 各个类名中间用空格隔开。

.red{}

.font{}

多类名

类名选择器 : 这个 div 的名字 就是 nav nav 就是 div 这个 div 也是 nav

##id选择器:

1-1:id选择器使用“#”进行标识。后面紧跟id名,其基本语法格式如下:

#id名

1-2:id选择器和类选择器区别

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

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

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

#通配符选择器

3-1:通配符 选择器使用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素;

格式: *

例如:用通配符来清除所有标记的默认边距:

* {

margin:0;

padding:0;

}

注意:

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

CSS字体样式属性

4-1:font-size:字号大小,单位 px;

例如:font-size:16px;

font-family:字体

font-family:"微软雅黑";

尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。

## CSS Unicode字体

在 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 |

| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |

| 隶书 | LiSu | \96B6\4E66 |

| 幼园 | YouYuan | \5E7C\5706 |

| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |

| 细明体 | MingLiU | \7EC6\660E\4F53 |

| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |

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

4-2:字体的粗细:

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

Html中:

font-weight:"属性值" normal,是表示不加粗bold 是字体加粗

css中:

数字 400 等价于 normal,而 700 等价于 bold。 但是我们更喜欢用数字来表示。

4-3:字体风格:

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

字体风格

font-style:normal;

normal:让斜体变正常字体;

italic:斜体;

平时我们很少给文字加斜体,反而喜欢给斜体标签(em,i)改为普通模式。

4-4:字体综合设置字体样式(重点)

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

css

选择器

其中line-height 是行高,如果不设置就不管,

注意:顺序不能变并且font-size和font-family都不能省略

4-5:text-indent:首行缩进

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

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

总结 文本格式化标签样式

1,em 和 i 倾斜

1_1:取消倾斜:font-style=normal;

1-2:添加倾斜:font-style=italic;

2:strong 和 b

2-1:取消加粗:font-weight=normal; 或者400

2-2:添加加粗:font-weight=bold;或者700;

3,u 和 ins:

3-1:删除下划线:text-decoration:none;

3-2:添加下划线:text-decoration:underline;

4,s 和 del:

4-1:删除删除线:text-decoration:none;

4-2:添加删除线:text-decoraiton:line-through;

##后代选择器:

后代选择器又称包含选择器,用来选择元素或者元素组后代,其写法是把外层标签写在前面,内层标签写在后面,中间用空格分隔;

注意:p 一定是 div 的孩子

div p {

color: pink;

}

第二种写法

这样可以准确定位:

*/

.test p {

color: red;

}

##子代选择器:

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面,子级标签写在后面,中间用“;”分隔,

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

比如: .demo > h3 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。

##交集选择器;(用的相对来说比较少,不太建议使用。)

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

**记忆技巧:**

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

比如: p.one 选择的是: 类名为 .one 的 段落标签。

##并集选择器:

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

并集选择器: 用逗号隔开,集体申明,相同样式的时候;(常用)

div,p,span {

color: red;

}

##伪类选择器:

主要是给某些选择器添加特殊效果。

类.one

伪类:link

css

为了和我们刚才学的类选择器相区别, 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{}

我们主要学链接伪类选择器:

-:link未访问的链接

-:visited 已经访问的链接

-:hover鼠标移动到链接上

-:active选定的链接

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

例如:css

a:link{

color: #333;

font-size: 25px;

text-decoration: none;

font-weight: 700;

}

/*鼠标经过时的颜色*/

a:hover{

color: #f10215;

}

html:

秒杀

标签显示模式:(display)

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

每个块级元素通常都会独自占一整行或者多整行,可以对其设置宽度,高度,对齐等属性,常用于网页布局和网页结构的搭建;(block-level)

常见的块元素有~、

、、

等,其中

标签是最典型的块元素。

块级元素的特点:

(1)总是从新行开始

(2)高度,行高、外边距以及内边距都可以控制。

(3)宽度默认是容器的100%

(4)可以容纳内联元素和其他块元素。

行内元素(inline-level)

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

常见的行内元素有

、、、、、、、、等,其中标签最典型的行内元素。

行内元素的特点:

(1)和相邻行内元素在一行上。

(2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。

(3)默认宽度就是它本身内容的宽度。

(4)行内元素只能容纳文本或则其他行内元素。(a特殊)

注意:

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

2. 链接里面不能再放链接。

行内块元素(inline-block)

在行内元素中有几个特殊的标签——、、,可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。

行内块元素的特点:

(1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。

(2)默认宽度就是它本身内容的宽度。

(3)高度,行高、外边距以及内边距都可以控制。

13,标签显示模式转换 display

块转行内:display:inline;

行内转块:display;block;

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

CSS样式介绍基本就完了。。。。。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190123G1EG6300?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券