css教程:https://www.w3school.com.cn/css/index.asp
css代码基础
1、CSS构造块
1.HTML的局限性
HTML满意不了规划者的需求,能够将网页结构与款式相别离,这样就能够在不更改网页结构的前提下,更换网站的款式。
操作html特点不方便
HTML里面添加款式带来的是无尽的臃肿和繁琐
2.CSS网页的美容师
让我们的网页愈加丰厚多彩,布局愈加灵活自如。
CSS最大的贡献:让HTML从款式中脱离,完成了HTML专注去做结构呈现,款式交给CSS
3.CSS(CascadingStyleSheets)通常称为CSS款式表或层叠款式表(级联款式表)。
效果
主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)图片的外形(宽高、边框款式、边距等)以及版面的布局和外观显现款式。
CSS以HTML为根底,供给了丰厚的功用,如字体、款式、布景的操控及全体排版等,而且能够针对不同的浏览器设置不同的款式。
4.CSS注释
1
/*这是注释*/
2、引进CSS款式表
1.行内式(内联款式)
经过标签的style特点来设置元素的款式
style其实就是标签的特点
款式特点和值中间是:
多组特点值直接用;隔开
只能操控当前的标签和以及嵌套在其间的字标签,造成代码冗余。
缺陷:没有完成款式和结构相别离。
1
2
3
<标签名style=”特点1:特点值1;特点2:特点值2;特点3:特点值3;”>内容
例如:
青春不常在,抓紧谈恋爱
2.内部款式表(内嵌款式表)
也称为内嵌式,将CSS代码集中写在HTML文档的head头部标签中,并且用style标签界说。
style标签一般坐落head标签中,当然理论上他能够放在HTML文档的任何地方。
type=“text/css”在html5中能够省略。
只能操控当前的页面
缺陷:没有彻底别离结构与款式
3.外部款式表(外链式)
也称链入式,是将一切的款式放在一个或多个以.css为扩展名的外部款式表文件中,经过link标签将外部款式表文件链接到HTML文档中。
rel:界说当前文档与被链接文档之间的关系,在这里需求指定为“stylesheet”,表示被链接的文档是一个款式表文件。
href:界说所链接外部款式表文件的URL,能够是相对路径,也能够是绝对路径。
4.团队约好-代码风格
/*1.紧凑格局(Compact)*/
h3{color:deeppink;font-size:20px;}
//2.一种是打开格局(引荐)
h3{
color:deeppink;
font-size:20px;
}
/*团队约好-代码大小写*/
/*款式挑选器,特点名,特点值关键字悉数运用小写字母书写,特点字符串答应运用大小写。*/
/*引荐*/
h3{
color:pink;
}
/*不引荐*/
H3{
COLOR:PINK;
}
3、CSS根底挑选器
CSS挑选器效果:找到指定的HTML页面元素,挑选标签。
CSS根底挑选器
1.标签挑选器
标签挑选器(元素挑选器)是指用HTML标签名称作为挑选器,按标签名称分类,为页面中某一类标签指定一致的CSS款式。
效果:能够把某一类标签悉数挑选出来。
长处:快速为网页中同类型的标签一致款式
缺陷:不能规划差异化款式。
1
标签名{特点1:特点值1;特点2:特点值2;特点3:特点值3;}
2.类挑选器
类挑选器运用”.”(英文点号)进行标识,后边紧跟类名。
语法:类名挑选器
.类名{
特点1:特点值1;
特点2:特点值2;
特点3:特点值3;
}
1
长处:能够为元素目标界说独自或相同的款式。能够挑选一个或许多个标签。
注意:类挑选器运用“.”(英文点号)进行标识,后边紧跟类名(自界说,我们自己命名的)
长名称或词组能够运用中横线来为挑选器命名。
不要纯数字、中文等命名,尽量运用英文字母来表示。
多类名挑选器:各个类名中间用空格隔开。
3.id挑选器
id挑选器运用#进行标识,后边紧跟id名
元素的id值是仅有的,只能对应于文档中某一个具体的元素。
1
#id名{特点1:特点值1;特点2:特点值2;特点3:特点值3;}
1
4.通配符挑选器
通配符挑选器用*号表示,*就是挑选一切的标签。它是一切挑选器中效果规模最广的,能匹配页面中一切的元素。
注意:会匹配页面一切的元素,下降页面响应速度,不建议随意运用