本文需要一点HTML的基础,没有基础的小伙伴可以看我的这篇文章:前端HTML万字血书大总结,来看看你入门了吗?
说起HTML,这其实是个非常单纯的家伙, 他只关注内容的语义, 比如
图片
表明这儿有一个图片, 用 表示此处有链接。很早的时候,世界上的网站虽然很多,但是他们都有一个共同的特点: 丑。我们来看看早期的Google。总结来说HTML的缺点:
1.2、CSS初识
CSS(Cascading Style Sheets) ,通常称为CSS样式表或层叠样式表(级联样式表),他主要用于设置 HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
上面我们说了CSS的那么多好处,那么我们应该如何引入CSS呢?我们引入CSS的方式有三种:
称行内样式、行间样式,是通过标签的style属性来设置元素的样式,也就是说直接写在标签,他只适用于学习或者是小型的项目,一般不推荐使用。任何HTML标签都拥有style属性,用来设置行内式,他的语法格式:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 标签名>
<div style="color: red; font-size: 12px;">XiaoLindiv>
总结来说:
:
。;
隔开。内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,这种也**只适用于学习或者是小型的项目,一般不推荐使用。**不过对比于行内式的好处是他将样式和标签进行了分离,耦合度相对来说没那么高。他的基本语法如下:
<head>
<style type="text/CSS">
选择器(选择的标签) {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
style>
head>
比如我们可以这样写:
<style>
div {
color: red;
font-size: 12px;
}
style>
总结来说:
外链式是将所有的样式放在一个或多个以**.CSS**为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,基本用法:
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
head>
他的常见属性和作用大概有三个。
属性 | 作用 |
---|---|
rel | 定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。 |
type | 定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。我们都可以省略 |
href | 定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。 |
需要注意的点:
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
---|---|---|---|---|
行内样式表 | 书写方便,权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签(少) |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面(中) |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多,强烈推荐 | 控制整个站点(多) |
层叠性是指多种CSS样式的叠加,是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉。他有两个原则,有点像长江后浪推前浪,前浪死在沙滩上。
CSS的继承性指的是子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。
定义CSS样式时,经常出现两个或更多规则应用在同一元素上,此时分为选择相同和不同的时候:
CSS的注释如下:
p {
/* 所有的字体是14像素大小*/
font-size: 14px;
}
我们可以通过选择器,快速找到特定的HTML页面元素,把我们想要的标签选择出来。简答来说,CSS一声就做两件事:
h3 {
color: red;
}
这段代码就是2件事, 把 h3选出来(选对人), 然后把它变成了红色(做对事),选择器分为基础选择器和复合选择器。
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签
标签选择器,
页面同选起。
直接写标签,
全部不放弃。
类选择器使用.
(英文点号)进行标识,后面紧跟类名。
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
<p class='类名'>p>
我们还可以给标签指定多个类名,从而达到更多的选择目的。我们可以看到大厂做的产品,一般制定两个以上的类名。
注意:
<div class="pink fontWeight font20">亚瑟div>
<div class="font20">刘备div>
<div class="font14 pink">后羿div>
<div class="font14">貂蝉div>
可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签。
.
(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。差异化选择
一个或多个
上面点定义
类名别写错
谁用谁调用
class来做。
<head>
<meta charset="utf-8">
<style>
.blue {
color: blue;
font-size: 100px;
}
.red {
color: red;
font-size: 100px;
}
.orange {
color: orange;
font-size: 100px;
}
.green {
color: green;
font-size: 100px;
}
style>
head>
<body>
<span class="blue">Gspan>
<span class="red">ospan>
<span class="orange">ospan>
<span class="blue">gspan>
<span class="green">lspan>
<span class="red">espan>
body>
id选择器使用#
进行标识,后面紧跟id名。
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<p id="id名">p>
W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class,id选择器和类选择器最大的不同在于使用次数上。类选择器我们在修改样式中,用的最多。id选择器一般用于页面唯一性的元素身上,经常和我们后面学习的javascript 搭配使用。
通配符选择器用*
号表示, *
就是选择所有的标签,他是所有选择器中作用范围最广的,能匹配页面中所有的元素,他会匹配页面所有的元素,降低页面响应速度,不建议随便使用。
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
选择器 | 作用 | 缺点 | 使用情况 | 用法 |
---|---|---|---|---|
标签选择器 | 可以选出所有相同的标签,比如p | 不能差异化选择 | 较多 | p { color:red;} |
类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
id选择器 | 一次只能选择器1个标签 | 只能使用一次 | 不推荐使用 | #nav {color: red;} |
通配符选择器 | 选择所有的标签 | 选择的太多,有部分不需要 | 不推荐使用 | * {color: red;} |
后代选择器又称为包含选择器,用来选择元素或元素组的子孙后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,先写父亲爷爷,在写儿子孙子。
父级 子级{属性:属性值;属性:属性值;}
.class h3{color:red;font-size:16px;}
子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素,其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 >
进行连接。
.class>h3{color:red;font-size:14px;}
交集选择器由两个选择器构成,找到的标签必须满足:既有标签一的特点,也有标签二的特点,用的相对来说比较少,不太建议使用。
他的语法格式如下,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格:
标记选择器.类别选择器{color:red;font-size:25px;}
# 举例
h3.class:的意思是说类名为class的所有h3的标签
如果某些选择器定义的相同样式,就可以利用并集选择器,可以让代码更简洁。并集选择器(CSS选择器分组)是各个选择器通过,
连接而成的,通常用于集体声明。任何形式的选择器(包括标签选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。
并集选择器通常用于集体声明,逗号隔开的,所有选择器都会执行后面样式,逗号可以理解为和的意思。
.选择器1,选择器2...{color:red;font-size:25px;}
# 举例
.one,p,#test {color: #F00;}
# 说明
.one 和 p 和 #test 这三个选择器都会执行颜色为红色。
通常用于集体声明。
后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格 .nav a |
---|---|---|---|---|
子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 较少 | 符号是**>** .nav>p |
交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |
选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
标签以什么方式进行显示,比如div 自己占一行,比如span一行可以放很多个。我们网页的标签非常多,再不同地方会用到不同类型的标签,以便更好的完成我们的网页。HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。
常见的块元素有
、
、