深入理解CSS|青训营笔记

78 阅读3分钟

1.简介:CSS主要使用场景就是美化网页,布局页面的。

2.HTML的局限性:HTML只关注内容的语义。

3.CSS-网页的美容师

CSS是层叠样式表的简称,有时我们也会称之为CSS样式表或者级联样式表.(CSS也是一种标记语言)

CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外边形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。

CSS可以美化HTML,让html更漂亮,让页面布局更简单。

3.CSS最大价值:由HTML专注去做结构呈现,样式交给CSS,即结构(HTML)与样式(CSS)相分离。

CSS语法规范 在head标签中加入标签,CSS在标签中书写。

CSS规则由两个主要的部分构成:选择器以及一条或多条声明。

h1 {color:red; font-size:5px;} 选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式。

属性和属性值以“键值对”的形式出现。

CSS代码风格 1.样式格式书写 紧凑格式 h3 { color:deeppink;font-size:20px;} 展开格式(强烈推荐) h3{ color:pink; font-size:20px; } 2.样式大小写 强烈推荐样式选择器,属性名,属性值,关键字全部使用小写字母

3.空格规范

h3(空格){ color:(空格)pink; } 属性值前面,冒号后面,保留一个空格。 选择器(标签)和大括号中间保留空格。 CSS基础选择器 CSS选择器的作用 选择器(选择符)就是根据不同的需求把不同的标签选出来这就是选择器的作用。简单来说,就是选择标签用的。

选择器分类 选择器分为基础选择器和复合选择器两大类,,基础选择器是由单选择器组成的。

基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器

标签选择器(元素选择器) 标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类的标签指定统一的CSS样式。

语法:

标签名{ 属性1;属性值1; 属性2;属性值2; 属性3;属性值3; 属性4;属性值4; ...... } 作用:可以把某一类标签全部选择出来,比如所有的

标签和所有的标签

优点:能快速为页面中同类型的标签统一设置样式。

缺点:不能设计差异化模式,只能选择全部的当前标签。

类选择器 如果想要差异化选择不同的标签,单独选一个或几个标签,可以使用类选择器。

语法:

.类名{ 属性1;属性值1; ...... } 结构需要用class属性来调用class类的意思。

变颜色

注意:

类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。 可以理解为给这个个标签起了一个名字,来表示。 长名称或词组可以使用中横线来为选择器命名。 不要使用纯数字、中文等命名,尽量使用英文字母来表示。 命名要有意义,尽量使别人一眼就知道这个类名的目的。 命名规范:见附件(web前端开发规范手册.doc)