菁英数字科技(猩码)-猩码学苑-专注软件开发人才菁英教育

标题: CSS1-彭婉嘉 [打印本页]

作者: 鱼小仙    时间: 2023-4-14 00:17
标题: CSS1-彭婉嘉
使用font属性的时候,必须按照固定的属性顺序来进行书写,不能随便更换顺序,否则会导致font属性失效
不需要的属性可以省略,font属性中可以被省略的属性 font-style 和 font-weight  不可以省略的是 font-size 和 font-family
CSS的文本属性
文本颜色
使用color属性,设置文本的颜色
属性值
预定义的颜色:red、yellow、green等。
RGB颜色:rgb(255,0,0) 代表纯红色  rgb(100%,100%,100%); 代表白色
十六进制的颜色:#fff000
image
文本对齐
使用text-algin属性来设置元素内的文本对齐方式
属性值:
left(默认值,左对齐)
center 居中对齐
right 右对齐
image
文本装饰
使用text-decoration属性来控制文本的装饰
常用的属性值
none 默认值,没有装饰(给a标签去掉下划线,使用频率最高)
overline 上划线
line-through 删除线
underline 下划线
image
文本缩进
使用text-indent属性来控制文本的缩进(指的是第一行缩进),通常用在段落的首行。
属性值
固定像素单位,比如20px
相对单位 2em
em是一个相对单位,相对的是当前元素的font-size的大小,1em就是一倍的font-size值,想要缩进两个字符就可以写成2em。
image
行间距
使用line-height属性来设置行高,可以控制文字行与行之间的距离
属性值
具体像素值
font-size的倍数,推荐使用倍数,可以让页面中的字体根据自己的实际来自适应行高。
image
图示
image
使用line-height来实现文本的垂直居中
将line-height的属性值设置成和父元素的高度一致即可。
image
文本换行
通过white-space属性来控制文本是否换行
属性值
normal 默认值换行
nowrap 控制文本到达父元素边界不换行
image
CSS的引入方式
内部样式表
内部样式表,是写到html页面的内部,将所有的样式代码写到<style></style>标签中。
image
注意点
1、style标签其实可以写在页面的任何地方,但是我们推荐写在head标签中
2、它能够实现结构和样式的部分分离(没有完全分离)
3、代码结构更加清晰,平时练习的时候,推荐使用这种方式
行内样式表
行内样式表就是将样式写在标签的style属性中,适合于简单的样式修改
image
注意点
样式要写在style属性后的双引号中
样式格式要复合CSS的语法规范
只用于简单的样式修改,一般不推荐使用这种方式
外部样式表
实际开发中都是使用外部样式表,适合于样式比较多的情况
使用方式
1、先创建一个css文件
2、在html文件中使用link标签来引入css文件即可
rel 定义当前文档与被链接文档之间的关系,这里直接指定为stylesheet,表示被链接的文件是一个css样式表
href 定义链接的css文件的路径(URL)
image
Emmet语法
Emmet语法的前身是ZenCoding,使用该语法可以大大的提高书写代码的速度。






欢迎光临 菁英数字科技(猩码)-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/) Powered by Discuz! X3.4