CSS基础学习

最新推荐文章于 2024-08-21 03:33:34 发布

@ Salt

最新推荐文章于 2024-08-21 03:33:34 发布

阅读量546

点赞数

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_61920612/article/details/121855205

版权

CSS 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS的基础，包括其在网页美化中的作用，HTML与CSS的分离原则，选择器的种类与使用，如标签选择器、类选择器、id选择器和通配符选择器，以及字体属性的设置。通过实例演示了如何运用CSS进行元素样式定制和布局控制。

摘要由CSDN通过智能技术生成

学习内容：

1. CSS简介

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

1.1 HTML的局限性

HTML只关注内容的语义，比如<h1>表明真是一个大标题，<p>表明这是一个段落，<img>表明这有一个图片，<a>表示此处有链接。

1.2 CSS-网页的美容师

CSS是层叠样式表的简称。

有时我们也会称之为CSS样式表或级联样式表。

CSS也是一种标记语言。

CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS可以美化HTML，让HTML更漂亮，让页面布局更简单。

总结：

1.HTML主要做结构，显示元素内容。

2.CSS美化HTML，布局网页。

3.CSS最大的价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离。

1.3 语法规范

使用HTML时，需要遵从一定的规范，CSS也是如此。要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则。

CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式。

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

属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等。

属性和属性值之间用英文 “ : ” 分开。

多个键值对之间用英文 “ ; ” 进行区分。

1.4 代码风格

以下代码书写风格不是强制规范，而是符合实际开发书写方式。

1.4.1 样式格式书写

1.紧凑格式

h3 { color: deeppink; font-size: 20px; }

2.展开格式

h3 {

color: pink;

font-size: 20px;

}

强烈推荐第二种格式，因为更直观。

1.4.2 样式大小写

强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。

1.4.3 空格规范

h3 {

color: pink;

}

1. 属性值前面，冒号后面，保留一个空格。

2. 选择器（标签）和大括号中间保留空格。

2.CSS基础选择器

2.1 选择器的作用

选择器（选择符）就是根据不同需求把不同的标签选出来这就是选择器的作用，简单来说，就是选择标签用的。

以上CSS做了两件事：

1. 找到所有的h1标签，选择器（选对人）。

2. 设置这些标签的样式，比如颜色为红色（做对事）。

2.2 选择器分类

选择器分为基础选择器和复合选择器两大类。

2.2.1 基础选择器

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

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

2.3 标签选择器

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

语法：

标签名 {

属性1：属性值1；

属性2：属性值2；

属性3：属性值3；

}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>基础选择器之标签选择器</title>
    <style>
        /* 标签选择器：写上标签名 */
        p {
            color: green;
        }
        div {
            color: pink;
        }
    </style>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>
</html>

作用：
标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签。

优点：

能快速为页面中同类型的标签统一设置样式。

缺点：

不能设计差异化样式，只能选择全部的当前标签。

2.4 类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号显示。

口诀：样式点定义结构类(class)调用一个或多个开发最常用

语法：

.类名 {

属性1: 属性值1；

...

}

例如，将所有拥有red类的HTML元素均为红色。

.red {

color: red;

}

结构需要用class属性来调用 class就是类的意思

<div class='red'> 变红色 </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>基础选择器之类选择器</title>
    <style>
        /* 类选择器口诀：样式点定义 结构类(class)调用 一个或多个  开发最常用*/
        .red {
            color: red;
        }
        .star-sing {
            color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">冰雨</li>
        <li class="red">来生缘</li>
        <li>李香兰</li>
        <li>生僻字</li>
        <li class="star-sing">江南style</li>
    </ul>
    <div class="red">我也想变红色</div>
</body>
</html>

tips:
1. 类选择器使用" . "(英文点号)进行标识，后面紧跟类名（自定义，我们自己命名的）

2. 可以理解为给这个标签起了个名字，来表示。

3. 长名称或词组可以用短横线" - "来为选择器命名。

4. 不要使用纯数字、中文等命名，尽量使用英文字母来表示。

5. 命名要有意义，尽量使别人一眼就知道这个类名的目的。

6. CSS命名规则：

　　头：header

　　内容：content/container

　　尾：footer

　　导航：nav

　　侧栏：sidebar

　　栏目：column

　　页面外围控制整体布局宽度：wrapper

　　左右中：left right center

　　登录条：loginbar

　　标志：logo

　　广告：banner

　　页面主体：main

　　热点：hot

　　新闻：news

　　下载：download

　　子导航：subnav

　　菜单：menu

　　子菜单：submenu

　　搜索：search

　　友情链接：friendlink

　　页脚：footer

　　版权：copyright

　　滚动：scroll

　　内容：content

　　标签页：tab

　　文章列表：list

　　提示信息：msg

　　小技巧：tips

　　栏目标题：title

　　加入：joinus

　　指南：guild

　　服务：service

　　注册：regsiter

　　状态：status

　　投票：vote

　　合作伙伴：partner

案例：课堂案例——利用类选择器画三个盒子

案例练习两个地方：

1. 类选择器的使用

2. div就是一个盒子，用来装网页内容的

<!DOCTYPE html>
<html lang="en">
<head>
    <title>利用类选择器画三个盒子</title>
    <style>
        .red {
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: red;
        }
        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red">红色</div>
    <div class="green">绿色</div>
    <div class="red">红色</div>
</body>
</html>

2.4 类选择器——多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。

简单理解就是一个标签有多个名字。

2.4.1 多类名使用方式

<div class="red font20">亚瑟</div>

1. 在标签class属性中写多个类名

2. 多个类名中间必须用空格分开

3. 这个标签就可以分别具有这些类名的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <title>多类名的使用方式</title>
    <style>
        .red {
            color: red;
        }
        .font35 {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="red font35">刘德华</div>
</body>
</html>

2.4.2 多类名开发中使用场景

1. 可以把一些标签元素相同的样式（共同的部分）放到一个类里面。

2. 这些标签都可以调用这个公共的类，然后再调用自己独有的类。

3. 从而节省CSS代码，统一修改也非常方便。

下面将之前案例修改一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>多类名的使用场景</title>
    <style>
        .box {
            width: 150px;
            height: 100px;
            font-size: 30px;
        }
        .red {
            /* 背景颜色 */
            background-color: red;
        }
        .green {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box red">红色</div>
    <div class="box green">绿色</div>
    <div class="box red">红色</div>
</body>
</html>

2.5 id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义。

语法：

#id名 {

属性1：属性值1；

…

}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>基础选择器之id选择器</title>
    <style>
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">迈克尔·杰克逊</div>
</body>
</html>

tips:id属性只能在每个HTML文档中出现一次

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

id选择器和类选择器的区别

1. 类选择器(class)好比人的名字，一个人可以有多个名字，同时一个名字也可以被多人使用。

2. id选择器好比人的身份证号码，全中国是唯一的，不得重复。

3. id选择器和类选择器最大的不同在于使用次数上。

4. 类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。

2.6 通配符选择器

在CSS中，通配符选择器使用" * "定义，它表示选取页面中所有元素（标签）。

语法：

* {

属性1：属性值1；

…

}

1. 通配符选择器不需要调用，自动就给所有的元素使用样式

2. 特殊情况才使用，后面讲解使用场景（以下是清除所有的元素标签的内外边距，后期讲）

* {

margin: 0;

padding: 0;

}

2.7 基础选择器总结

1. 每个基础选择器都有使用场景，都需要掌握。

2. 如果是修改样式，类选择器是使用最多的。

3.CSS字体属性

CSS Fonts（字体）属性用于定义字体系列、大小、粗细、和文本样式（如斜体）。

3.1 字体系列

CSS使用font-family属性定义文本的字体系列。

p {font-family:"微软雅黑"；}

div {font-family: Arial, "Microsoft Yahei", "微软雅黑"；}

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体系列</title>
    <style>
        h2 {
            font-family: 'SimSun';
        } 
        p {
            font-family:'Microsoft YaHei';
        }
    </style>
</head>
<body>
    <h2>程序员鱼皮</h2>
    <p>兴趣，学自己喜欢的，这是你前进的主要动力。</p>
    <p>目标，有目标才有规划，避免走太多弯路浪费了些时间。</p>
    <p>自学，只有持续自学，你才能看到更大的世界。</p>
    <p>实践，纸上得来终觉浅，对编程来说更是如此，必须要多加练习。</p>
    <p>机会，其实每一个机会都是要自己争取来的，你变强了，更多机会和幸运才会眷顾你。而每个机会都可能会改变你的命运。</p>
    <p>突破，打破自己的舒适圈，这样才能给自己多一点选择，多一点成功的可能性。</p>
    <p>时间，珍惜你大学的时间，这段时间的努力会在未来，给你带来更大的价值。</p>
    <p>生活，保持健康规律的生活，不要常年熬夜，记性越来越差，头发掉的越来越快。</p>
</body>
</html>

1. 各种字体之间必须使用英文状态下的逗号隔开。

2. 一般情况下，如果有空格隔开的多个单词组成的字体，加引号（单引号和双引号都可以）。

3. 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示。

4. 最常见的几个字体：body {font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB';}

Microsoft YaHei 微软雅黑（谷歌默认字体）SimSun 宋体

我们可以指定好几个字体，浏览器先看你的电脑系统有没有第一个字体，有就以这个字体来显示，如果没有继续找下一个字体，以此类推。如果都没有就会用浏览器的默认字体。

3.2 字体大小

CSS使用font-size属性定义字体大小。

p {

font-size: 20px;

}

1. px（像素）大小是我们网页的最常用的单位。

2. 谷歌浏览器默认的文字大小为16px。

3. 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。

4. 可以给body指定整个页面文字的大小

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

3.3 字体粗细

CSS使用font-weight属性设置文本字体的粗细。

p {

font-weight: bold;

}

学会让加粗标签（比如h和strong等）不加粗，或者其他标签加粗。

实际开发中，我们更提倡使用数字表示加粗或者变细

3.4 文字样式

CSS使用font-style属性设置文本的风格。

em {

font-style: normal;

}

tips：平时我们很少给文字加斜体，反而要给斜体标签（em, i）改为不倾斜字体。

3.5 字体的复合属性

字体属性可以把以上文字样式综合来写，这样可以更节约代码

body {

font: font-style font-weight font-size/line-height font-family;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之复合属性</title>
    <style>
        /* 想要div文字变倾斜 加粗 字号设置为16像素 并且是微软雅黑 */
        div {
            /* font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: 'Microsoft YaHei'; */
            /* 复合属性：简写的方式 节约代码*/
            /* font: font-style font-weight font-size/line-height font-family; */
            font: italic 700 16px Microsoft YaHei;

        }
    </style>
</head>
<body>
    <div>三生三世十里桃花，一心一意百行代码</div>
</body>
</html>