CSS 简介
CSS的主要使用场景就是美化页面,布局页面的。
1.CSS-页面美容师
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。(标记语言)
HTML 主要做结构,显示元素内容。
CSS 美化HTML,布局页面。
CSS 最大价值:由HTML专注去做结构呈现,样式交给CSS,即结构(HTML)和样式(CSS)分离。
CSS 语法规范
1.CSS 规则
由两个主要部分组成:选择器以及一条或多条声明。
• 选择器是用来指定CSS样式的标签,花括号内是对该对象设置的具体样式。
• 属性和属性值以“键值对”的形式出现。
• 属性是对指定对象设置样式的属性,例如字体大小、文本颜色等。
• 多个“键值对”之间用英文“;”进行区分。
2.CSS 书写格式
所有的样式都要包含在<style>标签之中,<style>一般写到</head>上方。
<head>
<style>
h4{
color:blue;
font-size:100px;
}
</style>
</head>
空格规范:
<style>
h3 {
color: pink;
}
</style>
• 属性值前面,冒号后面,保留一个空格。
• 选择器(标签)和大括号中间保留空格。+
CSS 基础选择器
1.选择器的分类
选择器分为基础选择器和复合选择器两大类,我们这里先讲解一下基础选择器。
• 基础选择器由单个选择器组成的
• 基础选择器由包括:标签选择器、类选择器、id选择器和通配符选择器。
2.标签选择器
标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定 统一的 CSS 样式。
语法:
<style>
div {
color:red;
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
</style>
作用:标签选择器可以把某一类标签全部选择出来,比如所有的<div>标签和所有的<span>标签。
优点:能快速为页面中同类型的标签统一设置样式。
缺点:不能设计差异样式,只能选择全部的当前标签。
3.类选择器
如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器。
语法:
结构需要用class属性来调用 class 类的意思。
<div class=‘red’> 变红色 </div>
<style>
.red {
color: red;
font-size: 12px;
}
</style>
4.类选择器-多类名
多类名使用方法:
<style>
<div class="red font20">亚瑟</div>
</style>
• 在标签class属性中写多个类名
• 多个类名必须用空格隔开
• 这个标签可以分别具有这些类名的样式
5.id 选择器
语法:
#id名 {
属性1: 属性值1;
...
}
6.通配符选择器
在 CSS 中,通配符选择器使用“*”定义,它表示选取页面中所有元素(标签)。
语法:
* {
属性1: 属性值1;
...
}
7.基础选择器总结
基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
标签选择器 | 选中所有相同标签 | 不能差异化选择 | 较多 | p { corlor: red;} |
类选择器 | 选中1个或多个标签 | 可以根据需要选择 | 非常多 | .nav {} |
id选择器 | 只能选择一个标签 | id属性只能在每个html文档中出现一次 | 一般和js搭配使用 | #nav{} |
通配符选择器 | 选中所有标签 | 选择太多,有部分不需要 | 特殊情况使用 | *nav {} |
css字体属性
1.字体 font-family
特点:
1.各种字体之间必须使用英文状态下的逗号隔开。
2.有空格隔开的多个单词组成的字体,加引号。
3.尽量使用默认自带字体,保证在任何用户的浏览器中都能使用。
2.字体大小 font-size
特点:
1.谷歌浏览器默认的文字大小是16px。
2.可以给body指定整页的文字大小。
3.字体粗细 font-weight
属性值 | 描述 |
nomal | 默认值(不加粗) |
bold | 定义加粗(加粗) |
100-900 | 400等同于nomal,然而700等同于bold (这个数字后不跟单位) |
4.文字样式 font-style
属性值 | 作用 |
italic | 浏览器会显示斜体样式 |
normal | 默认值,浏览器会显示标准样式 font-style:normal |
注意:平时我们很少给文字加斜体,反而要给斜体标签(em 、i)改为不斜体。
5.复合属性font
body {
font: font-style font-weight font-size/line-height font-family;
}
6.字体属性总结
css 文本属性
1.文本颜色 color
开发中最常用的是十六进制。
2.对齐方式 text-align
3.装饰文本 text-decoration
4.文本缩进 text-indent
text-indent 属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。(2em ; 10px)
5.行间距 line-height
line-height 属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离。
6.文本属性总结
css 嵌入方式
1.内部样式表(嵌入式引入)
<style>
div {
color: red;
font-size: 12px;
}
</style>
2.行内样式表(内联样式表、行内式引入)
<div style="color: red; font-size: 12px;">青春不常在,抓紧谈恋爱</div>
3.外部样式表(外链式、链接式引入)
<link rel="stylesheet" href="css文件路径">
属性:
4.css引入方式总结
5.chrome 调试工具
Ctrl+滚轮 代码大小
Ctrl+0 复原浏览器