菁英数字科技(猩码)-猩码学苑-专注软件开发人才菁英教育
标题:
王龙飞-CSS-20221110
[打印本页]
作者:
浅夏ζ
时间:
2022-11-10 23:15
标题:
王龙飞-CSS-20221110
一.今日内容
CSS字体属性
1.
字体外观
CSS使用font-family属性来定义文本的字体外观
注意点:
各种字体字体之间要用英文的逗号隔开
一般情况下如果字体的是由多个英文单词构成,那么就要用引号将字体名称引起来
尽量使用系统默认的字体,保证在任何用户的浏览器中都可以正常显示
字体大小
css使用font-size来控制字体大小
注意点:
我们使用px(像素单位)来控制字体大小
谷歌浏览器默认的字体大小是16px
不同的浏览器可能会有不同的默认字体大小,所以我们尽量给一个明确的字体大小的值,不要用默认大小。
一般情况下我们会在body标签中去设置整个页面的字体大小
例
字体样式
css使用font-style来设置文本的风格
属性值:
normal(默认值,浏览器会显示标准的字体样式)
italic(浏览器会显示斜体的字体样式)
注意点:
平时我们很少给文字添加斜体样式,通常情况下是给斜体标签(em、i)改为正常显示的字体(不倾斜)
例
字体粗细
css使用font-weight属性来设置文本的粗细
常用数值:400代表正常字体大小,700代表加粗字体,注意:属性值后面不加像素单位
例
字体的复合属性
字体属性可以把上述的字体样式来综合书写,这样可以节约代码
注意点:
使用font属性时,不可以省略 font-size 和 font-family属性,否则font属性会失效
font-style 和 font-weight是可以进行省略的,不写这两个属性,就会选择默认值来进行设置
使用font属性时,要严格按照固定的顺序来进行书写,不能更换顺序,各个属性之间要用空格隔开
CSS的文本属性
文本颜色
CSS使用color属性来设置文本的颜色
属性值:
预定义的英文字母设置颜色:red、blue等等
十六进制:#FF0000 等等(网页中设置颜色的主要方式)
RGB代码进行设置:rgb(255,0,0)
例
文本对齐
CSS里面使用text-align属性来设置文本的水平对齐方式
属性值:
right 靠右对齐
center 居中对齐
left 靠左对齐(默认值)
例
文本装饰
CSS使用text-decoration来进行文本的装饰
属性值
none:默认值,没有装饰线(最常用)
underline:下划线,a标签自己默认带着下划线
overline:上划线,基本不用
line-through:删除线
例
文本缩进
CSS中使用text-indent属性来设置文本的缩进,通常在段落的首行使用。
属性值:
固定像素单位,可以给定指定单位,但是不够灵活,数值一般是正值
相对单位:1em 就是当前元素(font-size)的大小的1倍。如果当前元素没有设置大小,会按照父元素的文字大小进行缩进
例
行间距
CSS中使用line-height来设置行间的距离(行高),可以控制文字行与行之间的距离,值可以写具体的像素值,也可以写倍数(经常在body中设置)
例
将行高设置为和当前元素的高度一致即可设置文本为垂直居中
控制文本达到边界是否换行
属性是:white-space
属性值:
normal: 默认值,达到边界自动换行
nowrap:达到边界不换行
例
CSS的引入方式
行内样式表
直接在元素内部写style属性,将要设定的属性值写在style=后面
例
注意点:
在双引号中书写样式时要复合CSS的语法规范
开发中不常用,更多情况下还是使用外部样式表来进行样式书写
内部样式表
内部样式表是写到html页面内部的,在<head></head>标签中的<style></style>标签中书写
例
注意点:
通过这种方式虽然可以实现控制页面中结构的样式,但是没有完全实现结构和样式的分离
练习的时候我们通常采用内部样式表
外部样式表
外部样式表是我们实际开发中最常用的,核心是将CSS代码单独放到css文件中,再将文件引入到html文件中进行使用
引入外部样式表的步骤
1、先创建一个css文件,在文件内书写css代码
2、在HTML页面使用<link>标签引入这个文件即可
通过引入一个css文件来间接的引入多个css文件
Emmet语法
这个语法可以帮助我们使用缩写来提高编写html/css的速度,VScode中已经将该语法进行了集成。
具体的语法使用如下:
1、直接输入标签 使用tab来自动补全
2、快速生成多个标签
3、生成父子级标签
4、生成兄弟级标签
5、快速生成带id属性或者class属性的标签
6、使用自增符号$, 来实现类名的区分
7、生成标签时可以直接写入内容
8、快速生成css代码
欢迎光临 菁英数字科技(猩码)-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)
Powered by Discuz! X3.4