1.什么是CSS
如果说html就像报纸一样,把一些文字图片放到网页上。CSS就是将这个网页进行了美化处理。
CSS,中文翻译为 层叠样式表 (Cascading Style Sheets)。
如果对PS有过了解,就会知道图层的概念,CSS和PS一样,他将一层有一层的效果添加到网页上,使网页变得美观好看,这就是他的作用。
2.基本语法规则
选择器 + 若干属性声明
"td"为选择器,选择所有<td>标签的,并将{}内的属性赋予。
3.写CSS的方式
3.1内部样式
在html文件中使用<style>标签,可以放到任意位置,推荐放到<head>标签中。
3.2内联样式
在html文件中,标签使用“style”属性,针对指定的标签设置样式。不需要写选择器,直接写属性键值对。
3.3外部样式
把CSS代码作为一个单独的.css文件,再在html文件中使用<link>标签引用。
4.选择器
4.1基础选择器
4.1.1标签选择器
在“{”前面写标签的名字,此时意味着选中所有这个名字的标签。
上文已经举了一些例子,在此不过多叙述。
4.1.2类选择器
此处的类,与java中的面向对象的类无关。
可以创建CSS类,手动指定哪些标签应用这个类。
一个标签可以引用一个类,也可以引用多个类。
类选择器是在“{”之前,写"."加类名。
如图所示,在标签的"class"属性中,加上空格就可以选择多个类。
4.1.3 ID选择器
在html中,每一个标签都可以设置一个唯一的id属性,作为元素的身份标识。
ID选择器是在“{”之前,写“#”加id值。
本质上ID选择器是使CSS可以指定一个特定的元素。
4.2“复合选择器”
“复合选择器”本质就是将上面的基础选择器组合一下。
4.2.1后代选择器
简单选择器1+空格+简单选择器2
这里的简单选择器可以是标签,类,id选择器中的任意一个。
如图所示,只要在<ul>标签内部的<li>元素都会被选择,无论是“子元素还是孙子元素。
4.2.2子选择器
简单选择器1+ > +简单选择器2
这里的简单选择器可以是标签,类,id选择器中的任意一个。
如图所示,此选择器缩小了选择范围,只选择子元素,而不选择其他后代元素。
4.2.3并集选择器
简单选择器1 + , +简单选择器2...
这里的简单选择器可以是标签,类,id选择器中的任意一个。
并集选择器用逗号分割,将多个选择器进行集体声明。
4.2.4伪类选择器
简单选择器 + : + 选择器选中元素的某个状态
常用的状态:
:hover 鼠标悬停时候的状态
:active 鼠标按下时候的状态
如图所示,第一个按钮点击时会变成红色,第二个按钮悬停时会变成蓝色。
5.常见的CSS属性
5.1字体属性
5.1.1字体家族
font-family 当前使用哪种字体来显示。
这个属性的字体,必须是系统已经安装了的。
5.1.2字体大小
font-size 浏览器的每一个文字都可以视为一个方框。
而字体的大小就是这个方框的大小。
我们基于【5.1.1】的html文件,修改CSS。
5.1.3字体粗细
font-weight 实际设置的时候有两种设置风格:单词和数字。
举例一些设置使用的单词:
(1)normal 正常粗细,等值为400。
(2)bold 加粗,等值为700。
(3)lighter 比从父元素继承来的值更细。
(4)bolder 比从父元素继承来的值更粗。
基于上诉使用的html和css,增加字体粗细。
5.1.4文字样式
font-style 比如我们这里使用让文字倾斜和取消文字倾斜的样式。
让一个<div>标签内的文字正常情况下是倾斜的,鼠标悬停时是不倾斜的。
5.2文本属性
5.2.1文字颜色
color 用于表示文本颜色。
在这里有三种表示颜色的方法:
(1)英文单词,例如:red、blue等等。
(2)rgb(#,#,#) #代表数字或者颜色的英文单词。
(3)#ff0000 类似于这样子也可以写成#f00,但是必须要满足#aabbcc的条件,这里aabbcc只是指带。
(2)和(3)其实都一样,用rgb的表示方法,红绿蓝各占一个字节,0~255,(2)用的十进制,(3)用的十六进制。
5.2.2文本对齐
text-aligin 来设置对齐方式
居中 center
靠左 left
靠右 right
如图所示,设置了一个200像素 * 200像素的div块,让文字在其内部居中、靠左、靠右。
5.2.3文本装饰
text-decoration 设置文本装饰
装饰的值有:
underline 给文字添加下划线。
none 无装饰,可以用来给a标签去下划线。
overline 上划线,不是很常用。
line-through 删除线,也不是很常用。
在这里为了显示效果,更明显,我添加了一些内边距,就是让显示出来的文字行与行之间有所分隔开来。具体内边距是什么,在博客后续会继续介绍。
5.2.4文本缩进
text-indent 经常用于段落开头时的缩进。
在这里有两种表示缩进值的单位:
一种是px,是像素,像素不太好控制。
另一种是em,是相对值,是以文字尺寸为基础进行设置的,1em就是一个字的缩进。
比较常用的还是em。
5.2.5行高
首先,我们要对CSS中的行高进行理解。
行高 = 文字高度 + 行间距。
行间距就是一行文字的上边距和下边距。上边距和下边距的距离是相等的。
我们通过控制文本的字体大小和行高,就能实现控制行间距。
line-height 来控制行高。
此时行间距就是80px减去16px,就为64px,上下边距就为32px。
5.3背景属性
5.3.1背景颜色
background-color 设置背景颜色
5.3.2背景图片及相关属性配置
background-image:url(图片路径)
引入背景图片后默认是平铺的。
如图所示如果需要取消平铺,使用background-repeat:no-repeat;
静止平铺后,图片出现在左上角,我们需要背景图片居中,使用background-position属性。
此时我们再将图片尺寸设置为100%(100%指的是按照其父元素一般大小),使用background-size。
6.CSS中的常用功能及模式
在学习常用功能之前,我们首先需要把浏览器的默认样式给去除掉。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
6.1“圆角矩形”以及“圆形”的实现
html元素默认都是一个个的矩形,比如我们这里使用一个200px * 200px的div,来帮助理解。
这里我们使用border-radius: length;来实现圆角矩形。首先我们先理解是如何实现的,其本质其实是一个内切圆。
length是一个内切圆的半径。
现在就实现了一个圆角矩形。
当内部的内切圆半径逐渐变大,大到一定程度时,就会变成一个圆形。当然这是基于这个div是一个正方形的基础。
此时内切圆半径为这个“正方形边长”的一半。
这个其实在实际使用中很有用,比如头像的实现,一些按钮等等。
6.2设置元素的显示模式
在html中,有块级元素和行内元素。
那么,块级元素和行内元素有什么区别呢:
(1)块级元素会独占一行,行内元素不独占一行。
(2)块级元素,高度、宽度、内外边距都是可以设置的。行内元素,高度、宽度、行高无效,内边距有效,外边距不确定是否有效(此处内外边距为下面盒子模型内容)。
(3)块级元素默认宽度和父元素一致。行内元素默认宽度和里面的内容一样宽。
综上所述,真正使用时,还是建议使用块级元素
使用display属性,设置元素的显示模式。
display:blok; 块级元素。
display:inline;行内元素。
我们在此举一个例子:
此时他为原生的块级元素,独占一行。
此时已经设置为了行内元素。
6.3盒子模型
每一个html元素就相当于一个矩形的盒子,由边框、内容、内边距、外边距构成。
如图所示:
6.3.1边框
设置边框需要设置三个方面:粗细、颜色、风格(实线、虚线...)
border属性,同时设置四条边的粗细。还可以使用border-left、border-right、border-top、border-bottom来单独设置左、右、上、下边框的粗细。
border-style属性,边框样式,默认是无边框的,solid实线边框、dashed虚线边框、dotted点线边框。
border-color属性,边框颜色,与其他颜色属性类似。
还有一种比较省略的写法 border:边框粗细 边框样式 边框颜色;
边框会把盒子给撑大,如图所示:
如果不要盒子被撑大,我们需要使用box-sizing属性。
此时其就满足我们给设置的高度与宽度。
6.3.2内边距
padding属性内容与边框之间的距离。
基于上述div,我们对其css部分进行了修改。
此时其四个方向的内边距都为10像素。
绿色部分就是内边距。
还有其他写法:
padding:10px 10px; 表示上下为10,左右为10
padding:10px 10px 10px; 表示上10,左右10,下10
padding:10px 10px 10px 10px; 表示 上10 左10 下10 右10
6.3.3外边距
margin 设置的是元素和元素之间的距离。
margin的写法与padding类似,
margin:10px 上下左右都为10
margin:10px 10px; 表示上下为10,左右为10
margin:10px 10px 10px; 表示上10,左右10,下10
margin:10px 10px 10px 10px; 表示 上10 左10 下10 右10
margin还有一个特殊用法。
把margin-left和margin-right设置为auto(让浏览器自动调节),此时元素就能在父元素内部居中放置。
对于垂直居中,margin无法实现。
6.4弹性布局
弹性布局是用来解决,元素水平方向排列的问题。行内元素虽然是在水平方向排列的,但是不适合进行水平布局,很多东西不可控。
比如:我们可以使用弹性布局实现导航栏等等。
6.4.1开启弹性布局
display:flex;
给要进行水平排列元素的父元素,设置flex。
此时,这个父元素我们可以称为“弹性容器”,其内部的元素则变为“弹性元素”,遵守弹性布局,可以设置尺寸和边距了。
6.4.2设置元素水平方向的排列方式
未指定时,元素从左到右排列。
justify-content: space-around;
平分剩余空间,如图所示,每个元素之间的间隔相同。
justify-content: space-between
左右元素贴紧两边,再平分剩余空间。
justify-content: center
元素居中排列。
justify-content: flex-end
元素全部排列到右侧。
6.4.3设置元素垂直方向的排列方式
align-items属性。
stretch,行拉伸占据剩余空间。
center,在弹性容器的中间。
flex-start,在弹性容器的上面。
flex-start,在弹性容器的下面。
space-between,行均匀分布。
space-between,行均匀分布,两端各占一半。
这些属性值都与水平方向类似。