CSS第一天
CSS简介
CSS的主要场景是美化网页,布局页面的
CSS是层叠列表样式(Cascading Style Sheets)的简称,有时我们也会称之为CSS样式表或级联样式表
CSS也是一种标记语言
CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
CSS语法规范
CSS 规则由两个主要的部分构成:选择器以及一条或多条声明。
选择器:改谁的样式 样式声明:改成什么样式
CSS的语法格式为:
选择器 {
属性: 值;
属性: 值;
}
例如:
h1 {
color: red;
font-size: 14px;
}
使用 {}
h1是选择器 color: red;和font-size: 14px;是声明,其中color和font-size是属性,red和14px是属性的值
选择器是用于指定 CSS 样式的 HTML 标签,花括号{}内是对该对象设置的具体样式,包含一个或多个样式声明;
属性和值之间使用 : 分隔
属性是对指定的对象设置的样式属性,属性之间使用 ; 分隔,最后一行的分号可以省略
CSS通常写在HTML中head标签的最后,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS语法规范</title>
<style>
h1 {
color: red;
font-size: 14px;
}
</style>
</head>
在 HTML 中写样式不要忘记加 style 标签;
设置字体不要忘记 px ;
CSS 代码风格
紧凑格式
h1 { color: red;font-size: 20px;}
展开格式
h1 {
color: red;
font-size: 20px;
}
更推荐展开格式,因为更直观,更易于阅读和维护
书写样式时,应该使用小写字母,选择器和开始花括号之间保留一个空格,:后保留一个空格
CSS基础选择器
CSS选择器的作用:选择标签 —— 根据不同的需求,把对应的标签选择出来。
标签选择器
结果:把某一类标签选择出来,统一修改样式
优点:快速、统一设置同类型标签的样式
缺点:没有差异化
color和 font-size 修改素材中的 h3 和 li 标签中的颜色和文字大小
素材
<h3>任职要求</h3>
<ol>
<li>对 Vue 前端框架有深入应用并深入理解其设计原理;</li>
<li>精通 HTML、CSS 技术,有页面制作(切图)经验;</li>
<li>精通 JavaScript、TypeScript 编程,有丰富的程序开发经验;</li>
<li>
有移动端 Web 开发或微信小程序开发经验,能独立开发,并进行性能优化;
</li>
<li>熟悉前端工程化开发,精通 webpack 配置。</li>
</ol>
练习
h3 {
color: blue;
font-size: 48px;
}
li {
color: red;
font-size: 24px;
}
类选择器
如果想差异化选择不同的标签,单独选择一个或某几个标签。
定义类选择器 : 选择器名称前有一个 . 表示是类选择器; {} 中仍然是一个或多个键值对。
使用类选择器: 找到需要修改样式的标签; 给标签增加 class 属性,属性值是选择器的类名 。
注意事项: 使用类选择器不需要 . ;
. 紧跟类名, . 与类名之间不能有空格;
长名称或词组使用 - 连接,例如: jd-nav ;
尽量用英文,不要用数字或中文;
命名要做到见名知意;
类选择器可以应用到不同类型的标签
类选择器口诀: 样式点定义 ,结构类调用 ,一个或多个 ,开发最常用
例子:
.red {
width: 100px;
height: 100px;
background-color: red;
}
<div class="red">红色</div>
div 默认占一整行,但是如果没有指定宽度和高度,那么: 宽度是浏览器的宽度; 高度是 0 ,所以看不见
多类名:
使用方式:在标签的 class 属性中使用多个类名; 类名之间使用空格分隔。
应用场景:在标签的 class 属性中使用多个类名; 类名之间使用空格分隔。
例子:
.box {
width: 100px;
height: 100px;
}
.red {
background-color: red;
}
<div class="box red">红色</div>
id选择器
id 选择器的前缀是# 。
应用场景:专门定义 HTML 中某个特定元素的样式,因为 id 是唯一的。
id 选择器的使用步骤:
1.定义带 id 的 HTML 元素: 给 HTML 中的某个特殊元素增加 id 属性。
2.定义 id 选择器:选择器名称前有一个 # 表示是 id 选择器; 选择器名称就是对应 HTML 元素的 id 名称; {} 中仍然是一个或多个键值对。
id 选择器和类选择器的区别:
-
id 可以看成是身份证号(唯一) / 类可以看成是名字(可多人使用);
-
id 只为特定元素设置样式,常与 JavaScript 联用;
-
类选择器在修改样式中用的最多。
id 选择器口诀: 样式 # 定义 , 结构 id 调用 3,只能用一次 4,别人勿使用
通配符选择器
通配符选择器符号:* , 表示选取页面中的所有元素 ,不需要调用,因为浏览器在解释HTML时,会把通配符选择器中定义的样式应用到页面中的每一个元素
字体属性
font-family 设置字体系列
字体相关的样式,例如:字体系列、大小、粗细、文字样式(斜体)等
font-family 的含义是: 字体系列、字体族
浏览器对字体的搜索顺序:当指定的字体找不到(或者某些文字不支持这个字体)时,就接着往后找
一般要把字体样式设置给 body 标签,一次设置,到处使用
扩展 —— 字体族
衬线字体 serif ,如:宋体,Times New Roman
非衬线字体 sans-serif ,如:微软雅黑,苹方,Arial
等宽字体 monospace ,如:Courier,Courier New,Monospace,新宋体,幼圆
手写体 cursive
花体 fantasy
衬线体如今已经很少使用了,而非衬线体更符合现代审美。如果你发现一名设计
师,在做海报设计、或者制图的时候,使用了宋体,说明她一定是个外行。
写 CSS 代码时,末尾的字体族不需要带引号;
Windows 推荐使用微软雅黑字体;
macOS 推荐使用苹方字体。
font-size 字号大小
设置字体大小的单位:px 像素
谷歌浏览器的默认文字大小:16px
要在 body 标签中指定页面文字的大小:不同浏览器可能默认显示的文字大小不一致;
开发时要尽量给一个明确的值,不要使用默认大小
font-weight 字体粗细
实际开发中推荐使用设置字体的粗细的方式:数字;font-weight 字重
使用数值设置字体粗细不需要单位
可以设置字体的粗细的数值:
取值范围 100 ~ 900 (按 100 递增)
normal :正常粗细,与 400 等值
bold :加粗,与 700 等值
font-style 字体样式
常用场景:把 em 、 i 默认的斜体改为不倾斜显示 font-style: normal
font 复合属性写法
复合属性的编写顺序:font: font-style font-weight font-size/line-height font-family
复合属性不能随意调整顺序
复合属性至少要保留: font-size 和 font-family 属性,否则设置无效
文本属性
文本颜色 color
文本属性可以定义的样式:文本相关的样式,例如:颜色、对齐方式、装饰文本、文本缩进、行间距等
定义颜色的方式
预定义的颜色名: red 、 green 、 blue ;
十六进制: #ff0000 ;
RGB 代码: rgb(255, 0, 0) 或 rgba(255, 0, 0, 0.5)
开发中最常用的是**
文本对齐 text-align
可以设置水平方向上的对齐方式:left :左对齐(默认);right :右对齐;center :居中
不可以给不是独占一行的元素设置文本对齐,文本对齐对 span 、 a 、 em 、 ins 、 strong 等元素设置不生效
文本装饰 text-decoration、
none:默认,没有装饰线,最常用
underline: 下划线,常用
line-through: 删除线,不常用
overline :上划线,几乎不用
文本缩进 text-indent
em:当前元素 1 个文字的大小
text-indent 属性仅对独占一行的元素生效
行间距 line-height
行间距部分组成部分:上间距;文本高度;下间距。
CSS 的三种引入方式
行内:优点:书写方便,权重高,缺点: 结构样式混合 ;使用率低 ;控制范围:控制一个标签
内部:优点:部分结构和样式分离 ;缺点:没有彻底分离 ;使用频率较多 ;控制范围:控制一个页面
外部:优点: 完全结构和样式分离; 缺点:需要 link 引入 ;使用频率多;控制范围:可以被多处复用