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

标题: 前端基础第四天-段童雨-20230413 [打印本页]

作者: Yeeeee 时间: 2023-4-14 12:57
标题: 前端基础第四天-段童雨-20230413
CSS01
CSS的简介
HTML的局限性：HTML可以做简单的样式，但是会让代码显得很臃肿
CSS：层叠样式表，是一种标记语言，它可以为页面设置丰富的样式，也能实现结构和样式的分离。
CSS的语法规范
注意点
选择器用于指定选择哪个元素，{}里面写的是对这个元素的具体样式设置
属性和属性值之间用“:”来隔开的，属性和属性值的这种形式也叫做键值对
多对属性和属性值之后要用";"来结尾
CSS的基础选择器
标签选择器
概念
标签选择器是指用HTML的标签名作为选择器，按照标签的类型来设置统一的CSS样式
特点
能快速选择页面中的某一类标签来设置样式，但是不能为同一类的标签设置差异化的样式
类选择器
如果想差异化选择不同的标签来设置样式，可以使用类选择器
注意点
类选择器使用“.”来定义，用class来调用，在调用的时候不要写“.”
如果类名比较长，可以使用横线来进行连接
不要使用纯数字、中文等来进行命名，类名要有意义，尽量都使用英文字母
多类名的使用
注意点
在标签中使用多个类的时候要用空格将多个类名隔开
可以根据自己想要的样式来调用不同的类名，类名的多少可以自己选择
ID选择器
ID是唯一的页面表示，通常是为HTML来某个特定元素来指定特定的样式，CSS中的id选择器用“#”来定义
注意点
用#来定义，用id来进行调用
一个页面中同一个id选择器只能被调用一次，不能调用多次，因为id选择器中的样式一般都会比较特殊
id选择器和类选择器之间的区别
类选择器好比人的名字，一个人可以有多个名字（多类名的使用），也可以一个名字可以被多个人使用（同一个类名被多次调用）
id好比人的身份证号码，每个人都是唯一的编号
id选择器一般情况下会和JS一起联合使用来为页面中的特殊的元素设定状态。
通配符选择器
在CSS中，通配符选择器用"*"来定义，表示选择页面中的所有的元素（标签）
CSS的文本属性
文本颜色
使用color属性，设置文本的颜色
属性值
预定义的颜色：red、yellow、green等。
RGB颜色：rgb(255,0,0) 代表纯红色  rgb(100%,100%,100%); 代表白色
十六进制的颜色：#fff000
文本对齐
使用text-algin属性来设置元素内的文本对齐方式
属性值
left（默认值，左对齐）
center 居中对齐
right 右对齐
文本装饰
使用text-decoration属性来控制文本的装饰
常用的属性值
none 默认值，没有装饰（给a标签去掉下划线，使用频率最高）
overline 上划线
line-through 删除线
underline 下划线
文本缩进
使用text-indent属性来控制文本的缩进（指的是第一行缩进），通常用在段落的首行。
属性值
固定像素单位，比如20px
相对单位 2em
em是一个相对单位，相对的是当前元素的font-size的大小，1em就是一倍的font-size值，想要缩进两个字符就可以写成2em。
行间距
使用line-height属性来设置行高，可以控制文字行与行之间的距离
属性值
具体像素值
font-size的倍数，推荐使用倍数，可以让页面中的字体根据自己的实际来自适应行高。
使用line-height来实现文本的垂直居中
将line-height的属性值设置成和父元素的高度一致即可。
文本换行
通过white-space属性来控制文本是否换行
属性值
normal 默认值换行
nowrap 控制文本到达父元素边界不换行
CSS的字体属性
字体外观
使用font-family 属性快来定义字体外观
注意点
各种字体之间要用英文的逗号隔开
如果字体是一个词组，那么要用双引号引起来
CSS Unicode字体
在CSS中设置字体名称，直接写中文是可以的，但是在字符集如果出现不匹配的情况，可能会产生乱码，如果是Unicode编码能避免该问题
字体大小
使用font-size属性来设置字体大小
注意点
一般我们会将字体大小的值设置为具体的像素值，单位是(px)
谷歌浏览器默认的字体大小是16px，最小到12px
不同的浏览器之间对于默认的字体大小是不一致的，所以我们在写页面的时候，要设置一个明确的字体大小，不要使用默认值
一般情况下会给body来指定整个页面的字体大小
字体风格
使用font-style来设置字体的风格
常用属性值
normal  默认值，浏览器会显示标准的字体样式
italic 浏览器会将字体显示为斜体
注意点
实际开发中很少将正常的字体改为斜体，一般会将em和i标签的斜体样式转化为正常显示，所以font-style:normal;使用的场景更多
字体粗细
使用font-weight属性来控制字体的粗细
注意点：一般情况下我们只设置400(正常字体粗细)和700（代表加粗字体粗细），值后面不要加单位。
字体复合属性
语法规范：font：font-style font-weight font-size/line-height font-family;
注意点
使用font属性的时候，必须按照固定的属性顺序来进行书写，不能随便更换顺序，否则会导致font属性失效
不需要的属性可以省略，font属性中可以被省略的属性 font-style 和 font-weight  不可以省略的是 font-size 和 font-family
CSS的引入方式
内部样式表
内部样式表，是写到html页面的内部，将所有的样式代码写到<style></style>标签中
注意点
style标签其实可以写在页面的任何地方，但是我们推荐写在head标签中
它能够实现结构和样式的部分分离（没有完全分离）
代码结构更加清晰，平时练习的时候，推荐使用这种方式

行内样式表
行内样式表就是将样式写在标签的style属性中，适合于简单的样式修改
注意点
样式要写在style属性后的双引号中
样式格式要复合CSS的语法规范
只用于简单的样式修改，一般不推荐使用这种方式
外部样式表
实际开发中都是使用外部样式表，适合于样式比较多的情况
使用方式
先创建一个css文件
在html文件中使用link标签来引入css文件即可
rel 定义当前文档与被链接文档之间的关系，这里直接指定为stylesheet，表示被链接的文件是一个css样式表
href 定义链接的css文件的路径（URL）
Emmet语法

Emmet语法的前身是Zen Coding，使用该语法可以大大的提高书写代码的速度。

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