目录
1、CSS层叠样式表的基本简介
内容:是一种标记语言,设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
html的局限性:只关注内容的语义,丑,臃肿繁琐
css的作用:美化html,布局网页
css最大的价值在于由html专注去做结构,实现结构和布局的分离
2、CSS使用规则
由两个主要的部分构成:选择器以及一条或者多条声明
<head>
<style>
h1 {
color: red;
}
</style>
</head>
选择器是用于指定CSS样式的html标签,{}内是对该对象设置的具体样式
属性和属性值以”键值对“的形式出现,属性属性值之间用;分开
每个属性书写完后一定要加;
3、CSS代码风格
格式:紧凑格式和展开格式(推荐使用展开格式)
大小写:小写书写(特殊情况除外)
空格规范:在属性值前面,冒号后面,保留一个空格
h1(空格){color:(空格)red;}
4、CSS选择器的作用和分类
作用:选择标签
分类:基础选择器和复合选择器
基础选择器是由单个选择器组成的
基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器
4.1、标签选择器
用html标签名称作为选择器
特点:会某一类标签全部选出来,不能差异化
4.2、类选择器
单独选择一个或某几个标签,需要用class属性来调用(使用较多)
<style>
.red {
color: red;
}
</style>
<div class=“red”>变红色</div>
特点:
1、类选择器用点定义样式
2、结构用class类调用
3、标签可以有一个或多个
命名规范:
1、长名称或词组可以使用中横线来为选择器命名,不要使用纯数字、中文等命名,尽量使用英文字母来表示(类名:star-sing)
2、命名要有意义,能让人看出来命名的是什么
多类名的使用方式:<div class="red font20">多类名</div>
(多个类名之间用空格分开)
多类名的使用场景:把一些标签元素相同的样式放到一个类里面,这些标签都可以调用这个公共的类,然后再调用自己独有的类,从而节省CSS代码,便于统一修改
4.3、id选择器
id选择器一般用于页面唯一性的元素上,经常和javascript搭配使用
#star {
color:pink;
}
<div id="star">id选择器</div>
特点:
1、id选择器用#定义样式
2、结构用id类调用
3、只能调用一次
类选择器在修改样式用的最多,id选择器一般用于页面唯一性的元素上,经常和javascript搭配使用
4.4、通配符选择器
把页面中所有的标签统一修改样式
* {
属性1:属性值;
属性2:属性值;
}
不需要调用样式,只在特殊情况下使用
5、字体font-family
使用font-family属性定义字体
字体之间用,隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号“”
尽量使用电脑系统默认自带的字体
最常见的字体:
font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';
5.1、字体大小font-size
使用font-size定义字体大小
font-size:20px;
px(像素)大小是我们网页中最常用的单位(别忘记写px)
谷歌浏览器默认的大小是16px
不同浏览器可能默认显示的字号大小不一致,我们尽量给出明确值,不要默认大小
可以给body指定整个页面文字的大小,标题标签比较特殊,需要单独制定大小
5.2、字体粗细font-weight
使用font-weight设置文本字体的粗细
font-weight:700;
参数:
normal正常 400
bold粗体 700
700后面不要跟单位,等价于bold,都是加粗的效果
实际开发中,更喜欢用数字来表示加粗或者变细的效果
一般是把粗体变正常,只需要修改参数为400
5.3、斜体font-style
使用font-style设置文本的风格
font-style: normal;
normal:默认值,浏览器会显示标准字体的格式
italic:斜体
一般很少给文字加斜体,反而要给斜体标签(em、i)改为不倾斜字体
em {
font-style: normal;}
5.3、字体的复合属性
font:font-style font-weight font-size/line-height font-family;
font:italic 700 16px 'MIcrosoft yahei'
要求:
不能随意改变顺序,各个属性之间以空格隔开
不需要设置的属性可以省略,但必须保留font-size和font-family属性,否则font将不起作用
6、文本属性
定义文本的外观,比如颜色、对齐文本、装饰文本、文本缩进、行间距等
6.1、颜色color
表示:
预定义的颜色值:red、green、blue
十六进制:#FF0000(开发中使用)
RGB代码:rgb(255,0,0)(red,green,blue的缩写)
十六进制颜色如果有两两相同可以简写,#666666 简写为#666 #ff00ff简写为#f0f
6.2、对齐text-align
只能设置水平对齐
div {text-align: center;}
left(默认)、right、center
6.3、下划线text-decoration
div {text-decoration: underline;}
none:没有装饰线(最常用)(默认)
underline:下划线(常用)
overline:上划线(几乎不用)
line-through:删除线(不常用)
链接会默认有下划线,可以通过none修改
6.4、缩进text-indent
文本第一行首行缩进
div {text-indent: 20px;}
或者
div {text-indent: 2em;}
如果写了2em,则是缩进当前2个文字大小的距离
em是一个相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小
6.5、行间距line-height
行与行之间的距离,包含了上下间距和文本高度
div {line-height: 25px;}
如果遇到多行文字,从第一行的最下沿到第二行的最上沿就是行高
7、CSS的引入方式
按照CSS样式书写的位置(或者引入的方式),CSS样式表可以分为三大类:
1、行内样式表(行内式)
2、内部样式表(嵌入式)
3、外部样式表(链接式)
7.1、内部样式表
写在HTML页面内部,将所有CSS代码抽取出来,单独放到一个<style>
标签里,通过此种方式,可以控制当前整个HTML页面
特点:代码结构清晰,但没有实现结构样式完全分离
使用内部样式表设定CSS,通常也被称为嵌入式引入,这种方式是我们练习时常用的方式
<style>
标签理论上可以放在HTML文档的任何地方,但一般会放在<head>
标签里
7.2、行内样式表
在元素标签内部的<style>
属性中设定CSS样式,适合于修改简单样式
<div style="color: red; font-size: 12px;">芜湖
</div>
可以控制当前的标签设置样式
特点:由于书写繁琐,并且没有体现结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用
使用行内式样式表设定CSS,通常也被称为行内式引入
style其实就是标签的属性
在双引号中间,写法要符合CSS规范
7.3、外部样式表
适用于样式较多的情况,核心是:样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用(实际开发中使用)
引入外部样式表分为两步:
1、新建后缀为.css的样式文件,把所有的CSS代码放到此文件中(css文件里面只有样式没有标签)
2、在HTML页面中,使用<link>
标签引入这个文件
<head>
<link rel="stylesheet" href=“css文件路径”>
</head>
rel:定义当前文档与被链接文档之间的关系,在这里要指定为“stylesheet”,表示被链接的文档是一个样式表文件
href:定义所链接外部样式表的URL,可以是相对路径,也可以是绝对路径
使用外部样式表设定CSS,通常也被称为外链式或链接式引入,这种方式是开发中最常用的方式
用快捷键link+Tab可以快速创建代码