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.通配符挑选器

通配符挑选器用*号表示，*就是挑选一切的标签。它是一切挑选器中效果规模最广的，能匹配页面中一切的元素。

注意：会匹配页面一切的元素，下降页面响应速度，不建议随意运用