css教程(css代码基础)

css教程

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.通配符挑选器
通配符挑选器用*号表示，*就是挑选一切的标签。它是一切挑选器中效果规模最广的，能匹配页面中一切的元素。
注意：会匹配页面一切的元素，下降页面响应速度，不建议随意运用