图片-小白之家
图片-小白之家
图片-小白之家
图片-小白之家

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,能够是相对路径,也能够是绝对路径。
图片[1]-css教程(css代码基础)-小白之家

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

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

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

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容

图片-小白之家
图片-小白之家