CSS基础
字体样式
font-family
-
设置字体的类型,每种系统默认指代的字体不一致。
-
语法:
font-family:"宋体"; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-
注意:
- 如果设置多种字体,中间使用逗号隔开,先从系统中找第一种字体,如果有则使用,如果没有则找第二种字体,依次类推,最终找到最后一种字体serif,serif代表通用字体
- 如果字体名为中文或者多个单词,需要使用引号包裹,可以是单引号,可以是双引号
- 多种字体的风格一般类似
font-size
-
设置字体的大小 ,字号
-
语法:
font-size:大小;
- 数字越大,字号越大
font-weight
- 设置字体的加粗效果
- 取值:
- 100~900:数字越大,加粗效果越好,不能带单位
- normal:正常
- lighter:更细
- bold:加粗
- bolder:更粗
font-style
- 设置字体的风格
- 取值:
- narmal:正常
- italic:斜体
- oblique:倾斜
字体引用技术
-
将字体文件引入到代码,方便代码渲染时以字体文件的字体渲染,目的就是为了不同的系统都能正常显示
-
语法:
@font-face{ font-family:字体名称; src:url(字体文件格式1的文件路径),url(字体文件格式2的文件路径); }
-
注意:
- 需要将字体文件一起放在项目中
- 为了不同浏览器的都能正常渲染,可以引入多种字体格式的文件,之间使用逗号隔开。
字体图标
- 字体是以图标的形式显示,设计师在设计字体的时候,字体形状就是图标
- 字体的相关样式都可以作用在字体图标
- fontawesone 官网:https://fontawesome.dashgame.com/
- 页面中引入字体图标的css文件,通过不同的class名作用不同的图标或者样式
超链接
-
给a标签添加样式
-
语法:
/* 向未被访问过的超链接添加样式 */ a:link { css代码样式代码 } /* 向访问过的超链接添加样式 */ a:visited { css代码样式代码 } /* 鼠标移入超链接时添加到样式 */ /* :hover 必须放在:link和:visited之后 */ a:hover { css代码样式代码 } /* 鼠标点击不放时添加的样式 */ /* :active必须放在:hover之后 */ a:active { css代码样式代码 }
-
注意:
:hover
必须放在:link
和:visited
之后,:active
必须放在:hover
之后,顺序:L-V-H-A
列表样式
- 可以更改列表项标志的样式
list-style-type
:设置列表项标志类型none
:无
list-style-position
:设置列表项标志的显示位置outside
:将标志放在li标签内容区域以外inside
:将标志放在li标签内容区域里面
list-style-image
:将图片作为列表项标志,不常用,无法通过css控制图片的大小,只能更改图片文件本身大小list-style
:复合属性none
:无
表格样式
- 更改表格的样式
border-spacing
:设置单元格之间的间距border-collapse
:设置表格的边框合并为一collapse
:合并为一
link和@import
这两种方式都可以引入css文件,本质上linl为整个网页服务,@import是css服务
link
-
语法:
<link rel="stylesheet" href="css文件路径">
@import
-
语法:
<style> /* 通过css语法引入css文件 */ @import url(css文件路径); </style>
区别
-
link是一种标签,@import是一种语法
-
link不仅仅可以引入css文件,还可以引入其他文件格式,@import只能引入css文件
-
加载时间:link是随着页面的加载而加载,@import等页面加载完成之后再加载
-
兼容问题:link的兼容比@import好
-
link可以被js控制,@import不能被js控制
说明:本笔记主要根据网络视频教程进行整理。