# 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样式介绍基本就完了。。。。。
领取专属 10元无门槛券
私享最新 技术干货