【前端】CSS入门笔记+案例

CSS

css 的语法

1.字体大小 font-size

2.背景颜色 backgrount-color

3.背景的宽高 w h

css的三种引入方式

1.内嵌式

2.外联式

3.行内式

选择器

1.标签选择器

2.类选择器

3.id选择器

4.通配符选择器

字体和文本样式

1.字体样式

1.1字体大小 font-size

1.2字体粗细 font-weight

1.3字体样式(倾斜) font-style

1.4字体类型 font-family

1.5字体类型 font属性连写

文本样式

1.文本缩进

2.文本水平对齐方式

3.文本修饰

4.行高

CSS

CSS 是层叠样式表, 层叠即覆盖

css 的语法

选择器 {css属性名: 属性值;}

选择器: 查找标签

1.字体大小 font-size

font-size: 30px;

px 即像素

2.背景颜色 backgrount-color

background-color: yellow;

3.背景的宽高 w h

width: 100px;
height: 100px;

css的三种引入方式

1.内嵌式

CSS 写在 style 标签中 (小案例)

style 标签虽然可以写在页面任意位置, 但是通常约定写在 head 标签中

2.外联式

CSS 写在一个单独的 .css 文件中 (项目中)

需要通过 link 标签在 .html 文件中引用

3.行内式

CSS 写在标签的 style 属性中 (配合js)

选择器

1.标签选择器

标签选择器是以标签名命名的选择器

结构: 标签名 {css属性名: 属性值;}
作用:通过标签名, 找到页面中所有这类标签, 设置样式

2.类选择器

结构: .类名 {css属性名: 属性值;}
类名可以由数字\字母\下划线\中划线组成, 但数字和中划线不能位于开头
一个标签可以同时有多个类名, 类名之间以空格隔开
类名可以重复, 一个类选择器可以同时选中多个标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.colorRed {color: red;}.s_i-z1e {font-size: 30px;}</style>
</head>
<body><p class="colorRed s_i-z1e">类选择器p</p><p>不使用类选择器p</p><div>不使用类选择器div</div>
</body>
</html>

3.id选择器

id选择器的初衷是配合 js 使用, 通常不会使用它来美化标签

结构: #id属性值{css属性名: 属性值;}
作用: 通过 id 属性值, 找到页面中带有这个 id 属性值的标签, 设置样式
所有标签上都有且仅有一个 id 属性值
一个 id 选择器只能选中一个标签, 它类似于身份证号码, 在一个页面中是唯一的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#back {background-color: greenyellow;}</style>
</head>
<body><div>不使用id选择器div</div><div id="back">id选择器div</div>
</body>
</html>

4.通配符选择器

结构: * {css属性名: 属性值;}
作用: 找到页面中所有的标签, 设置样式

我们通常会用它来取消字体之间的间距(如 h1 造成的间距)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}</style>
</head>
<body><h1>我是 h1 标签，没有间距</h1><div>我们使用通配符选择器</div>
</body>
</html>

字体和文本样式

1.字体样式

1.1字体大小 font-size

font-size: 30px;

1.2字体粗细 font-weight

取值可以是关键字, 也可以是纯数字

关键字

正常	加粗
normal	bold

纯数字: 100~900的整百数

正常	加粗
400	700

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.weight {font-weight: 700;}.weight2 {font-weight: 400;}</style>
</head>
<body><div class="weight">字体变粗</div><h1 class="weight2">字体正常</h1>
</body>
</html>

1.3字体样式(倾斜) font-style

正常	倾斜
normal	italic

font-style: italic;

除此之外, <em> 标签也可以使字体倾斜, 它的效果可以被 font-style 的效果覆盖

<em>字体倾斜</em>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.i {font-style: italic;}.n {font-style: normal;}</style>
</head>
<body><div class="i">字体倾斜</div><em class="n">em被覆盖</em>
</body>
</html>

1.4字体类型 font-family

我们无法得知用户电脑上安装了哪一种字体, 但是一定安装了一种无衬线字体

sans-serif 代表任意一种无衬线字体(笔画均匀且首尾无装饰)

font-family: 微软雅黑, 黑体, sans-serif;

1.5字体类型 font属性连写

font(复合属性)

顺序是 style weight size family

只能省略前两个, 如果省略了相当于设置了默认值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.font {font: italic 700 60px 宋体;}</style>
</head>
<body><div class="font">展示字体</div>
</body>
</html>