CSS(表现)

简介

1.作用(美化)

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

!要在里面

2.语法规范

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

1.选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式

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

3.属性与属性值之间用英文“ : ”分开

4.多个“键值对”之间用英文“ ; ”区开

3.CSS代码风格

1.样式书写格式

2.大小写风格

用小写

3.空格风格

2.基础选择器

1.选择器的作用

根据不同需求把不同的标签选出来,即选择标签用的。

2.基础选择器

1.标签选择器

用HTML标签名作为选择器,按标签名分类,为页面中某一类标签全部指定统一的CSS样式。

标签选择器:写上标签名

2.类选择器(多次)

差异化选择不同的标签,单独选一个或者某几个标签

类选择器:样式点定义,结构类(class)调用 一个或多个 开发最常用

给需要的标签起名字,尽量用英文、命名规范且有意义(让人一眼明白)

类选择器-多类名

给一个标签指定多个类别,达到更多的选择目的,这些类名词都可以选出这个标签。

即一个标签有多个名字。

1.在标签class属性中写多个类名

2.多个类名中间必须用空格分开

3.这个标签就可以分别具有这些类名的样式

3.id选择器(一次)

样式#定义,结构id调用,只能用一次,别人切勿使用

4.通配符选择器

不需要调用,自动就给所有的元素使用样式。

5.基础选择器总结

2.字体属性

用于定义字体系列、大小、粗细、和文字样式(如斜体)。

1.字体系列

2.字体大小

3.字体粗细

实际开发中,我们更喜欢用数字表示粗细

4.文字样式

很少给字体加倾斜,反而给倾斜字体(em,i)改为不倾斜。

5.文字复合

6.字体属性总结

3.文本属性

1.文本颜色

div {

color: red;

}

开发中十六进制最常用

2.对齐文本

div {

text-align: left;

}

3.装饰文本

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

div {

text-decoration: underline;

}

添加下划线和删除下划线

4.文本缩进

text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进

div {

text-indent: 数值;

}

em是一个相对单元,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置,则按照父元素的1个文字大小。

5.行间距

line-height属性用于设置行间的距离(行高)(上下间距+文本高度),可以控制文字行与行之间的距离。

p {

line-height: 26px;

}

6.文本属性总结

3.CSS的引入方式

按照CSS样式书写的位置(或引入的方式),分类

1.行内样式表(行内式)

2.内部样式表(嵌入式)

3.外部样式表(链接式)

1.内部样式表

(内嵌样式表)是写到html页面内部,是将所有的CSS代码抽取出来,单独放到一个