本篇学习前端三剑客中的css,学习常见语法以及使用
- css几种引入方式
- css选择器
- css常用属性
字体相关
文本相关
背景相关
圆角矩形
HTML,css,js都是在浏览器中运行的
HTML(了解各种标签)
java的类型是,静态强类型
JS的类型是,动态弱类型
css是层叠样式表
CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结
构分离
样式:大小,位置,间距,颜色,字体,边框,背景···统称为样式,描述了一个网页啥样
层叠: 针对一个HTML的元素标签,可以同时使用多组css样式,多组样式会叠加在一起
css代码的语法规则
1.内部样式:之间把css嵌入到HTML中,放在style标签里
2.外部样式:把css写成一个单独.css文件,有HTML通过link标签引入过来
3.内联样式,直接把css属性写到元素的styple属性内
css选择器
div{
}
{}里面是一些具体的css样式(描述样式的详细情况),以键值对的方式组织,
键值对之间,使用;分割
键和值之间,使用:分割
多个键值对,可以放在一行,也可以分成多行放置
css的选择器:
1.标签选择器
使用标签名,把页面中所有同名标签的元素都选中
缺点:难以针对某个元素进行个性化定制
2.类选择器
css中创建一个类名,这个类名对应一组css属性
让指定的HTML元素应用这样的类名即可
一个类名是可以被多个标签引用的
类选择器是最常用,也是功能最丰富的一个选择器
3.id选择器
一个HTML标签,可以有一个id属性,这个属性的值,作为标签的“身份标识”,在页面中,也是唯一的,
同样也可以通过id选择器,把这个指定的元素获取到
4.复杂选择器
可以把上述三种基础结构选择器进行组合,同时能够体现出“标签的层次结构”
后代选择器,可以使用多个基础选择器使用 空格 分开
先找到所有.one的元素,再在.one后代里(子标签)里查找h3标签
对于一个页面特别复杂,就可以使用后代选择器,非常针对性的修改某个元素不必担心影响到其他部分的内容
css常见属性
很多没事多去查
多来点击两下
介绍一些常见的属性
和字体相关的属性
设置字体
.font-family .two {
font-family: '宋体';
}
设置字体大小
p {
font-size: 20px;
}
设置字体粗细
p {
font-weight: bold;
font-weight: 700;
}
设置文字样式
/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;
与文本相关的属性
设置文本颜色
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color的写法
- 直接写一些表示颜色的单词(red,blue,green)
- 使用RGB(光学三原色,红绿蓝)的方式进行表示
- 使用十六进制的操作进行表示,本质上也是RGB表示
使用6个十六进制数字,就可以表示RGB颜色了(俩个十六进制数字,就是一个字节)
在使用时,#AABBCC这个格式的可以缩写成#ABC
设置文本对齐
控制文字水平方向的对齐.。
不光能控制文本对齐, 也能控制图片等元素居中或者靠右。
text-align: [值];
常用取值:
- center: 居中对齐
- left: 左对齐
- right: 右对齐
设置文本修饰
text-decoration: [值];
常用取值:
- underline 下划线. [常用]
- none 啥都没有. 可以给 a 标签去掉下划线.
- overline 上划线. [不常用]
- line-through 删除线 [不常用]
设置文本缩进
控制段落的 首行 缩进
text-indent: [值];
注意:
单位可以使用 px 或者 em.
使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.
缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)
设置行高
行高指的是上下文本行之间的基线距离
line-height: [值];
和背景相关的
背景颜色
设置的背景图片默认是平铺的
background-color: [指定颜色]
背景图片
background-image: url(...);
注意:
- url 不要遗漏.
- url 可以是绝对路径, 也可以是相对路径
- url 上可以加引号, 也可以不加。
背景平铺
background-repeat: [平铺方式]
重要取值:
repeat: 平铺
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺
默认是 repeat.
设置背景位置
background-position: x y;
修改图片的位置.
- 方位名词: (top, left, right, bottom)
- 精确单位: 坐标或者百分比(以左上角为原点)
- 混合单位: 同时包含方位名词和精确单位
设置背景尺寸
background-size: length|percentage|cover|contain;
可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
也可以填百分比: 按照父元素的尺寸设置.
cover: 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain: 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域.
设置圆角矩形
通过 border-radius 使边框带圆角效果
基本语法:
border-radius: length;
如果当前的矩形,是一个正方形,并且border-radius的值恰好是边长的一半,此时就是正圆形
元素的显示属性
块级元素
display:block 块级元素(矩形的盒子)
display: linline 行内元素(一段文本)
display:none实现隐藏的效果
常见的元素
h1 - h6
p
div
ul
ol
li
…
特点:
独占一行
高度, 宽度, 内外边距, 行高都可以控制.
宽度默认是父级元素宽度的 100% (和父元素一样宽)
是一个容器(盒子), 里面可以放行内和块级元素.
行内元素
常见的元素:
a
strong
b
em
i
del
s
ins
u
span
…
特点:
不独占一行, 一行可以显示多个
设置高度, 宽度, 行高无效
左右外边距有效(上下无效). 内边距有效.
默认宽度就是本身的内容
行内元素只能容纳文本和其他行内元素, 不能放块级元素
css盒子模型
每一个 HTML 元素就相当于是一个矩形的 “盒子”
这个盒子由这几个部分构成
边框 border
内容 content
内边距 padding
外边距 margin
通过css就可以针对内边距,外边距,边框的样式进行设置
边框
border
可设置四边
设置边框会把元素撑大
可以对边框进行设置
/* 此时边框就不会撑大元素 */
box-sizing: border-box;
*这样表示通配符选择器:这样能够选择所有元素
*{
box-sizing: border-box;
}
内边距
padding
也可以设置四边
外边距
margin
外边距,使用方法和padding基本一样
边框和其他元素边框之间
将margin的左右两边设为auto可以实现水平居中的效果
上下设为auto不能实现垂直居中
弹性布局
弹性布局的三个属性
-
开启弹性布局:display :flex
开启弹性布局后,此时内部的子元素就会按照水平方向排列(子元素里面的子元素不受影响) -
justift-content:设置水平方向的排列规则
居中排列,靠左,靠右,分散开 -
align-items:设置垂直方向的排列规则