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代码抽取出来,单独放到一个