每一个CSS语句包含两个部分:选择器+应用的属性
我们来看一个例子:
CSS代码可以放到html文件中的style标签里,style标签可以放到html中的任意位置,但一般style标签放到head标签中
CSS的引入方式
1.内部样式表
在style标签写CSS
比如这样:
2.内联样式(这种样式优先级较高,会覆盖其他样式)
通过style属性来指定某个标签的样式
内联样式只针对当前元素生效,不需要写选择器,不用写{},直接写CSS属性和值即可
这种写法只适合于样式简单的情况,如果样式复杂就会显得很乱
就比如这样:
我们来看一个它覆盖其他样式的例子:
3.外部样式(实际开发中用的最多,这种样式可以让多个HTML复用同一份样式)
把CSS代码单独提取出来,放到一个.CSS文件中,然后在html代码中通过link标签来引入该CSS文件
比如这样:
这种link标签一般习惯放到html的head标签里,这种标签可以存在多份(通过多个link来引入不同的css)
样式大小写
CSS中不区分大小写,但我们一般使用小写
空格规范
1.冒号后面带空格
2.选择器和{之间有一个空格
现在来说说上面有提到过的
选择器
选择器的功能就是选中页面的元素(标签),可以一次选中一个,也可以一次选中一批
1.基础选择器
(1)标签选择器:选择器就是一个html标签名
这种选择器的特点是:能快速的把同一类型的标签都选择出来,但不能差异化选择
(2)类选择器
选择器是.类名(不可以使用纯数字/中文/标签名来命名类名);标签中用class属性调用这个类名
一个类可以被多个标签使用,一个标签也能使用多个类(多个类名之间要使用空格分隔)
一个类可以被多个标签使用的例子:
一个标签可以使用多个类的例子:
(3)id选择器
选择器是:#id;标签中用的id和选择器id一样
id是唯一的,不能被多个标签使用,只能选中一个标签(这是id选择器和类选择器最大的区别)
比如这样:
(4)通配符选择器
选择器是:*,使用通配符选择器就是直接选中了页面上的所有元素
通配符选择器最大的用途是取消浏览器的默认样式
比如这样:
2.复合选择器(把多种基础选择器综合运用起来)
(1)后代选择器
通过多个选择器的组合,能够选中某个元素里的子/孙子元素
选择器:
选择器1是父级,选择器2是子级,只选选择器2,不影响选择器1
看一个任意基础选择器的组合. (包括类选择器, id 选择器):
看一个选择器2是儿子的例子:
看一个选择器2是孙子的例子:
(2)子选择器
通过多个选择器的组合,能够选中某个标签里面的子元素
选择器:选择器1>选择器2
举个例子看看:
(3)并集选择器
并列的多个选择器,中间使用逗号来分割(这里的并集选择器里面可以写简单的选择器,也可以写复合的选择器)
9
举个例子:
(4)伪类选择器
1. 链接伪类选择器
2.force 伪类选择器
CSS属性参考文档
字体属性
1.字体
2.大小
3.粗细
4.文字样式
文本属性
1.文本颜色
color 属性值的写法:
(1)直接使用单词
(2)RGB 方式
解释一下RGB:
(3)也是RGB方式,但是使用的是十六进制形式
对于上面三种color属性写法的举例:
2.文本对齐
举例子:
不光能控制文本对齐, 也能控制图片等元素居中或者靠右
3.文本装饰
4.文本缩进
5.行高
行高指的是上下文本行之间的基线距离(也=顶线间距离 = 底线间距离 = 中线间距离)
行高 = 上边距 + 下边距 + 字体大小(上下边距是相等的)
举个例子:
由于行高上下边距相等,因此当行高等于元素高度时,就可以实现文本垂直居中
背景属性
1.背景颜色
背景颜色,默认是透明的(transparent)
举个例子:
2.背景图片
举个例子:
3.背景平铺
举个例子:
背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方.
4.背景位置
5.背景尺寸
举个例子:
圆角矩形
通过 border-radius 使边框带圆角效果.
元素的显示模式
1.块级元素
举个例子:
2.行内元素
改变显示模式
盒模型
我们一个一个说
边框
举个例子:
边框基本属性也可简写,没有顺序要求:
边框也可改四个方向的任意边框 :
边框会撑大盒子,虽然能撑大,但这种操作很容易导致设置了边框就把元素的尺寸改变了.
比如页面宽度是500px,里面要放很多图片,5个图片一行,每个图片100px宽度.这个时候给放图片的页面加边框,就可能导致一行就显示不了5个图片
那么为了解决这种撑大的问题,在实际开发中,我们会用到box-sizing属性,把他设置为border-box,这要一番操作之后,设置的边框就会挤压内容而不是撑大元素
说完边框下面说
内边距
内边距也会影响到盒子大小(撑大盒子).使用 box-sizing: border-box 属性也可以使内边距不再撑大盒子. (和上面 border 类似)
下面来说
外边距
举个例子:
块级元素水平居中
注意注意:这个是块级元素的水平居中,他和文本的水平居中(text-align: center)不一样哦 !
这是文本居中的效果
这是块级元素居中的效果
flex 布局(弹性布局)
网页布局不仅需要从上到下,也需要从左到右,弹性布局就是解决水平方向布局的问题的
flex布局中的常见的三种操作:
1.设置为弹性布局---display:flex
2.设置水平方向排列---justify-content:flex-start/flex-end/center/space-between/space-around
举个例子:
3.设置垂直方向排列---align-items:stretch/center/flex-start/flex-end/space-between/space-around
