前端学习笔记（CLASS 3）：css的基本功能

本文链接：https://blog.youkuaiyun.com/2301_81351468/article/details/143580141

CSS定义

层叠样式表（Cascading Style Sheets，缩写为CSS），是一种样式表语言，用来描述HTML文档的呈现（美化内容）。书写位置：title标签下方添加style双标签，style标签里面书写CSS代码

<title>CSS初体验</title>

<style>

/*选择器{}*/

p{

/*css属性*/

color: red;

}

</style>

<p>体验CSS</p>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=div, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择器 */
        p {
            /* 选择颜色 */
            color: red;
            /* 选择字号 */
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>体验CSS</p>
</body>
</html>

效果：

核心总结

1、CSS书写在title标签下方

2、style标签内书写CSS代码

3、CSS的书写规则是要有选择器

1、CSS的引入方式

1、内部样式表

学习方式（CSS代码写在style标签里面）

2、外部样式表

开发使用（CSS代码写在单独的CSS文件里，文件扩展名为.css，并在html里使用link标签引入）

<link rel="stylesheet" href="./my.css">

3、行内样式

配合JS使用（CSS写在标签的style属性值里）

<div style="color:red;font-size:20px;">这是div标签</div>

示例：

/*这是HTML代码*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=div, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./Untitled-1.css">
</head>
<body>
    <p>体验CSS</p>
</body>
</html>


/*这是css代码*/
p {
    color: red;
    font-size: 30px;
}

效果与上图一样。

核心总结：

1、实际工作中，外部样式表为常用的CSS引入方式

2、在HTML中，使用link标签可以引入外部样式表

2、选择器

查找标签，设置样式

基础选择器有标签选择器、类选择器、id选择器、通配符选择器

1、标签选择器

使用标签名作为选择器->选中同名标签设置相同的样式

例如：p、h1、div、a、img.....

2、类选择器

查找标签，差异化设置标签的显示效果。

步骤：

1、定义类选择器->.类名

2、使用类选择器->标签添加class=”类名“

<style>
    .red {
        color:red;
        }
</style>

<div class="red">这是div标签</div>

如果要添加多个类，只需在class的属性值中用空格空开就行

注意：

1、类名自定义，不要用纯数字或中文，尽量使用英文命名

2、一个类选择器可以供多个标签使用

3、一个标签可以使用多个类名，类名之间用空格隔开

4、开发习惯，最好类名见名知意，多个单词用-连接

3、id选择器

查找标签，差异化设置标签的显示效果

场景：id选择器一般配合JS使用，很少用来设置CSS样式

步骤：

1、定义id选择器->#id名

2、使用id选择器->标签添加id="id名"

<style>
    #red {
        color:red;
        }
</style>

<div id="red">这是div标签</div>

同一个id选择器在一个页面中只能使用一次

4、通配符选择器

作用是查找页面的所有标签，设置相同样式

通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

* {
   color:red;
  }

3、画盒子

目标：使用合适的选择器画盒子

新属性：

属性名	作用
width	宽度
height	高度
background-color	背景颜色

示例：

<!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>
        .red{
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .orange{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="red">div1</div>
    <div class="orange">div2</div>
</body>
</html>

效果：

4、文字控制属性

用于美化文字

描述	属性
字体大小	font-size
字体粗细	font-weight
字体倾斜	font-style
行高	line-height
字体族	font-family
字体复合属性	font
文本缩进	text-indent
文本对齐	text-align
修饰线	text-decoration
颜色	color

1、字体大小

属性名：font-size

属性值：文字尺寸，pc端网页常用的单位是px(谷歌浏览器文字默认大小为16px）

p {
   font-size:30px;
  }

2、字体粗细

属性名：font-weight

属性值：

数字（开发使用）

正常	400
加粗	700

关键字

正常	normal
加粗	bold

h3 {
   font-weight:400
   }

3、字体样式（是否倾斜）

清除文字默认的倾斜效果

属性名：font-style

属性值：

正常：normal

倾斜：italic

4、行高

设置多行文本的间距

属性名：line-height

属性值：

数字+px

数字（当前标签font-size属性值的倍数）

行高的测量方法：从一行文字的最顶端量到下一行文字的最顶端

*行高-垂直居中

垂直居中技巧：行高属性值等于盒子高度属性值

<!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>
        div {
            height: 100px;
            background-color: antiquewhite;

            line-height: 100px;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

效果：

5、字体族

属性名：font-family

属性值；字体名

6、font复合属性

div {
  font：italic 700 30px/2 楷体
  }

设置网页文字公共样式

复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开

font：是否倾斜是否加粗字号/行高字体（必须按顺序书写）

注意：字号和字体值必须书写，否则font属性不生效

7、文本缩进

属性名：text-indent

属性值：

数字+px

数字+em（推荐1em=当前标签的字号大小）

8、文本对齐方式

控制内容水平对齐方式

属性名：text-align

属性值

属性值	效果
left	左对齐（默认）
center	居中对齐
right	右对齐

*水平对齐方式-图片

text-align本质是控制内容的对齐方式

/*css代码*/

<style>
   div {
      text-align:center;
       }
</style>


/*html局部代码*/

<div>
   <img src="./picture" alt="">
</div>

9、文本修饰线

属性名：text-decoration

属性值：

属性值	效果
none	无
underline	下划线
line-through	删除线
overline	上划线

10、color文字颜色

属性名：color

颜色表示方式	属性值	说明	使用场景
颜色关键字	颜色英文单词	red、green、blue...	学习测试
rgb表示法	rgb(r,g,b)	r，g，b表示红绿蓝三原色，取值：0-255	了解
rgba表示法	rgba（r，g，b，a）	a表示透明度，取值：0-1	开发使用，实现透明度
十六进制表示法	#RRGGBB	...