前端学习(3)-CSS篇

HTML完结撒花 进入CSS

层叠样式表

目标：

1.能够说出什么是CSS

2.能够使用CSS基础选择器

3.能够设置字体样式

4.能够设置文本样式

5.能够说出CSS的三种引用方式

6.能够使用Chrome调试工具调试样式

---

1.CSS简介

CSS的主要使用场景就是美化页面，布局页面。

1.1HTML的局限性

他只关注内容的语义

1.2CSS

CSS是层叠样式表的简称 还可以称为CSS样式表

CSS也是标记语言

CSS最大的价值 把结构与样式相分离

1.3CSS规则

主要由两部分组成：选择器以及多条声明 

属性与属性值之间用：分开

属性和属性值以键值对的形式出现

多个键值对之间用；进行区分

<style>写在</head>前面 CSS写在<style>里

<style>

p{

      color:red;

      font-size:25px;

}

</style>

1.4CSS代码风格

在属性值前面放一个空格

选择器和大括号之间放一个空格

2.CSS基础选择器

选择器就是根据不同的需求把不同的标签选出来

基础选择器是由单个选择器组成的

基础选择器又包括：标签选择器 类选择器 id选择器和通配符选择器

2.1标签选择器

是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

标签名{

属性：属性值；

}

p {

     color: green;

}

2.2类选择器(最常用）

结构需要用class属性来调用class类 （在标签里写上class="" 相当于给标签取名）

.类名 {

属性：属性值；

}

2.2.1类选择器-多类名

可以给一个标签指定多个类名，从而达到更多的选择目的（一个标签有多个名字）

使用方式：

<div class="red font20">你好</div>

多个类名之间用空格分开 

2.3id选择器

为标有特定id的HTML元素指定样式

CSS中以#来定义（class用.）

id选择器口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用

#id名{

属性名:属性值；

}

2.4id选择器与类选择器的区别

类选择器好比人的名字，一个人可以有多个名字，也可以和别人重名

id选择器好比人的身份证号码，是唯一的，不能重复

id一般用于页面唯一性的元素，经常与js搭配使用

2.5通配符选择器

在CSS中使用*定义，他选取页面中所有标签（元素）

特殊情况才使用

*{

属性：属性值；

}

3.CSS字体属性

3.1字体系列

使用font-family定义 若有多个字体，用英文逗号分开（第一个字体没有就用后面的字体）尽量使用系统默认字体

<style>

.ziti{

 font-family:'Microsoft YaHei'，Arial；（若一个字体名由多个英文单词组成，记得用''或""引起来）

}

</style>

<p class="ziti">你好</p>

3.2字体大小

记得带单位px 谷歌浏览器默认16px 可以给body指定整个页面文字大小 尽量不要默认大小 手动设置一个

标题标签比较特殊，需要单独指定大小

h2 {

  font-size: 18px;

}

p {

font-size:50px;

}

3.3字体粗细

font-weight

默认normal是正常的字体 bold是加粗

也可以写数字，不用带单位，实际开发更提倡用数字 normal相当于400  bold相当于700

3.4文字样式

font-style 设置文本的风格

normal 默认 是正常标准的字体 italic 是斜体

3.5字体复合属性

有些不需要的可以省略 但是必须保留font-size和font-family 否则font不起作用

body {

/*font:font-style font-weight font-size/font-height font-family;*/（必须按这个顺序 而且用空格隔开）

font: italic 700 16px 'Microsoft yahei'；

} 

4.CSS文本属性

定义文本的外观

4.1文本颜色color

英文 十六进制 color:rgb(255,0,0);

4.2文本对齐text-align

用于设置元素内文本内容的水平对齐方式

left 左对齐（默认） right 右对齐 center 居中对齐

4.3装饰文本text-decoration

规定添加到文本的修饰

none  没有装饰线（默认 最常用）

underline 下划线 链接a自带下划线

overline   上划线  在文本上方

line-through  删除线  穿过文本

4.4文本缩进text-indent

指定文本第一行的缩进 通常是段落的首行缩进

em是相对单位 就是当前元素（font-size）一个文字的大小 如果当前元素没有设置大小 那么会按照父元素的1个文字大小

<p>{

text-indent:2em;(也可以是px)

}

4.5行间距line-height

设置行间的距离（行高） 可以控制行与行之间的关系

行间距=上间距+文本高度+下间距

p {

line-height:20px;

}

5.CSS引入方式

按照CSS样式书写的位置（或者引入方式）CSS可以分为三大类：

行内样式表（行内式） 内部样式表（嵌入式） 外部样式表（链接式）

5.1内部样式表

是写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>里

一般写在head里 没有将结构与样式完全分离

5.2行内样式表（不推荐使用）

在元素标签内部的style属性中设定CSS样式 适合于修改简单的样式

写在双引号里

<div style="color:pink;font-size=12px;">你好</div>

5.3外部样式表（实际开发最多）

样式单独写在CSS文件里，再把CSS文件引入到HTML里

引入外部样式表分为两步：

1.新建一个后缀名为.CSS的样式文件，把所有CSS代码都放入此文件中

2.在HTML页面中，使用<link>标签引入这个文件

在head里写<link rel="stylesheet" href="css文件路径">（rel是表示当前文件与被连接文件的关系）

5.4

注意事项：若想把图片居中显示 把图片text-align:center是没用的 要把img放在<p>里，对p使用居中显示

5.5Chrome调试工具

打开Chrome浏览器，按下F12或者右键检查