第三天笔记
学习目标
- css的作用和基本语法
- css控制字体
- 基本选择器
- 伪类选择器
- 行高和对齐方式
- css其他属性
- 首行缩进、字体下划线等
css的概念及其作用
css全称为(Cascading Style Sheets)翻译过来就是层叠样式表
作用:主要作用就是设置网页的文字(大小,颜色,字体,对齐等等)图片和板式布局等等 说的简单点了就是给页面化妆的
基本语法:
选择器 {
属性1: 值1;
属性2: 值2;
属性3: 值3;
}
注意:符号必须是英文状态下的
字体属性
设置字体的大小
font-size 设置字体的大小
取值:font-size: 12px;
注意:在css大多数数值都需要添加单位
设置字体的粗细
font-weight 设置字体的粗细
取值:normal 、bold、 100 - 900
多说一嘴:用数字设置的时候,只有400和700会产生变化,是因为字体在初始设计的时候就没有设置太多的粗细标准,一般就是两种,默认的和加粗的
所以 在实际工作中 用的最多的就是normal(400) bold(700)
设置字体的风格
font-style 设置字体的风格(样式)
取值:
normal 默认 显示标准的字体样式
italic 字体倾斜
设置不同类型的字体
font-family 设置不同的字体
取值:宋体、微软雅黑、黑体、。。。等等
多说一嘴:
- 不推荐使用一些冷门字体,因为一些冷门字体很多电脑里面默认没有安装,这个时候就会显示不出来。所以实际工作中,默认都是一些主流字体 如宋体 微软雅黑 等。。。
- 字体可以写多组,中间用逗号隔开
- 字体名称中如果有空格 # $ 这种特殊字符的时候需要添加上引号 中文字体也需要添加引号
了解:http://code.ciaoca.com/style/cssfont2unicode/
font简写
font: font-style font-weight font-size/line-height font-family;
不建议修改顺序 并且不需要设置的属性可以不写 但是font-size和font-family必须指定,否则将不起作用
开发者工具 (重点)
开发者工具对于开发者来说特别重要,只要你开发你就离不开它。一定要学会使用
作用:调试代码 检测代码的!!
打开开发者工具:f12 或者在页面上直接右键选择 “检查”
在基础班我们只需要关注elements这个面板 右侧的style就是当前标签对应的css样式 我们可以通过这个来检查代码错误和调试代码!!
选择器
想要操作任何一个标签,那么首先需要做的事情就是选中对应的标签,而这个就是选择器的作用
基础选择器
标签选择器
标签名 {属性1: 值1;属性2: 值2;}
特点:会将页面上所有符合的标签都选择上,但是不能实现差异化选择
类选择器
声明自定义类名 .自定义类名 {属性1:值1;属性2: 值2;} (声明类名选择器)
扫描二维码关注公众号,回复: 7857326 查看本文章
给对应的元素添加class类名属性 class="自定义的类名" (调用类名选择器)
如:.box {
font-size:12px;
}
<div class="box">内容</div>
特点:可以给相同标签的元素定义不同的样式 在实际工作中用的最多
多类名选择器
思考:需求:两个相同的标签,有一些共同的css样式 但是也有一些差异化的css样式
.red {
color: red;
}
.ft12 {
font-size: 12px;
}
.ft14 {
font-size: 14px;
}
<div class="red ft12">内容</div>
<div class="red ft14">内容</div>
一个元素可以拥有多个类名 类名和类名之间用空格隔开
多类名选择器可以让我们解决更复杂的一些需求
id选择器
id选择器的使用方式和类选择器基本一致
- 声明id #自定义id名字 {属性1:值1;属性2:值2;}
- 调用id 给对应的元素添加属性 id="自定义id"
#box {
font-size:12px;
}
<div id="box">内容</div>
特点:id选择器一般配合后期的JS使用较多,效果和类选择器一样,只不过是类选择器可以被多个元素调用,但是id选择器只能被一个元素调用 在同一个页面中吗,不能出现两个id值相同的元素
通配符选择器
* {
属性1: 值1;
属性2:值2;
}
特点:选中任何元素,后期用于页面初始化。
伪类选择器
伪类选择器可以理解为选择的元素的一种状态,并不是如之前直接选中元素就完事了
a:link 没有被访问的时候的状态
a:visited 访问之后的状态
a:hover 鼠标移动上去之后的状态
a:active 鼠标按下的状态
伪类选择器在实际工作中,不会写这么多,意义不大,推荐简写的方式完成
a {}
a:hover {}
文字的对齐 缩进 下划线
水平对齐
text-align:值;
取值:left right center
该属性控制的是标签 “内部的文字” 水平居中
首行缩进
text-indent:值;
取值可以是像素,也可以是em 推荐写法:text-indent:2em;
字体下划线和删除线
text-decoration:值;
取值:underline 下划线 line-through 删除线 none 去掉多余的样式
行高
行高控制的是文字与文字之间的上下距离 (行距)
line-height:值;
- 值的取值是像素
- **小技巧:如果将标签的高度和行高设置成一样,那么这个标签里面的文字可以在这个标签里面垂直居中
- 两者结合使用可以让单行文字在标签内部水平垂直居中
其他细节属性
- 颜色属性
颜色属性的取值可以是 十六进制,rgb(), rgba() - css的注释
/* 注释内容 */