一、CSS基础语法（CSS层叠样式表、选择器、字体样式、emmet语法）

窗台的花花

已于 2023-01-12 15:48:59 修改

阅读量307

点赞数 1

分类专栏： web前端文章标签： css html html5

于 2021-08-19 17:39:17 首次发布

本文链接：https://blog.csdn.net/qq_40116418/article/details/119805768

版权

web前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

1. CSS层叠样式表

2. CSS选择器

3. CSS字体样式

4. sublime快捷操作emmet语法

1. CSS层叠样式表

1.1 HTML的局限性

说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义，

比如<h1>表明这是一个大标题，用<p>表明这是一个段落，用<img>表明这儿有一个图片，用<a>表示此处有链接。

很早的时候，是世界上的网站虽然很多，但是他们都有一个共同的特点：丑。

这是一个外国比较早的购物网站

有些人就忍受不了了，你就不能把自己打扮漂亮一点吗?

HTML说，我试试....

如果要改变下高度或者变一下颜色，就需要大量重复操作

总结：

HTML满足不了设计者的需求
操作html属性不方便
HTML里面添加样式带来的是无尽的臃肿和繁琐

1.2 CSS网页的美容师

让网页更加丰富多彩，布局更加灵活自如
CSS的最大贡献就是：让HTML从样式中脱离，实现了HTML专注去做样式呈现，样式交给css

我们理想的结果是：结构(html)与样式(css)相分离

而且。。。。CSS做的很出色，比如JavaScript是网页的魔法师，那么CSS他是我们网页的美容师，不信，你看：

1.3 CSS初始

概念：

CSS(Cascading Style Sheets)，通常称为CSS样式表或层叠样式表(级联样式表)

作用：

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

2.CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

1.4 引入CSS样式表（书写位置）

1.行内式（内联样式）

概念：

称行内样式、行间样式。是通过标签的style属性来设置元素的样式。

其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

实际上任何HTML标签都拥有style属性，用来设置行内式。

案例：

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

注意：

1.style其实就是标签的属性

2.属性和值中间是：

3.多组属性值之间用；隔开。

缺点：

没有实现样式和结构相分离

2.内部样式表（内嵌样式表）

概念：

称内嵌式

是将CSS代码集中写在HTML文档的头部标签中，并且用style标签定义

其基本语法格式如下：

<head>
<style>
    选择器(选择的标签){
        属性1: 属性值1;
        属性2: 属性值2;
        属性3: 属性值3;
    }
</style>
</head>

<style>
    div {
        color: red;
        font-size: 18px;
    }
</style>

注意：

1.style标签一般位于head标签中，当然理论上他可以放到HTML文档的任何地方。

2.type="text/css" 在html5中可以省略。

3.只能控制当前的页面。

缺点：

没有彻底分离

综合案例：

查看源码

3.外部样式表（外链式）

概念

称链入式

是将所有的样式放在一个或多个以 .CSS为扩展名的外部样式表文件中，

通过link标签将外部样式表文件链接到HTML文档中。

其基本语法格式如下：

<head>
    <link rel = "stylesheet" type="text/css" href="css文件路径">
</head>

综合案例：

style.css文件

h3{
    color: blueviolet;
}

03-外部样式表.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 给html文件和css文件建立联系 -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h3>来呀！快活呀~ 反正有大把时间</h3>
</body>
</html>

03-外部样式表1.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 给html文件和css文件建立联系 -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h3>来啊！造作啊~ 反正有大把时光</h3>
</body>
</html>

注意：

1.link是个单标签

2.link标签需要放在head头部标签中，并且指定link标签的三个属性

4.三种样式表总结（位置）

团队约定-代码风格

样式书写一般有两种：

一种是紧凑格式（Compact）

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

一种是展开格式（推荐）

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

团队约定-代码大小写

样式选择器，属性名，属性值关键字全部使用小写，属性字符串允许使用大小写。

/*推荐*/
h3{
    color: pink;

}

/*不推荐*/
H3{
    COLOR: PINK;

}

5.总结CSS样式规则

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

具体格式如下：

总结：

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

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

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

4.属性和属性值之间用英文“:”连接。

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

2. CSS选择器

2.1 标签选择器

概念：

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

语法：

标签名{属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3;}

作用：

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

优点：

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

缺点：

不能设计差异化样式。

总结口诀：

标签选择器，

页面同选起。

直接写标签，

全部不放弃。

2.2 类选择器

类选择器使用"."（英文点号）进行标识，后面紧跟类名。

语法：

类名选择器

.类名 {
    属性1: 属性值1;
    属性2: 属性值2;
    属性3: 属性值3;
}

标签

<p class = "类名"></p>

优点：

可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签。

注意：

1). 类选择器使用"."(英文点号进行标识)，后面紧跟类名

2). 长名称或词组可以使用中横线来为选择器命名

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

案例：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .blue {
            font-size: 100px;
            color: blue;
        }

        .red {
            font-size: 100px;
            color: red;
        }

        .orange {
            font-size: 100px;
            color: orange;
        }

        .green {
            font-size: 100px;
            color: green;
        }
    </style>
</head>

<body>
    <span class="blue">G</span>
    <span class="red">o</span>
    <span class="orange">o</span>
    <span class="blue">g</span>
    <span class="green">l</span>
    <span class="red">e</span>
</body>

</html>

2.3 类选择器特殊用法-多类名

代码（改进）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .font100 {
            font-size: 100px;
        }

        .blue {
            color: blue;
        }

        .red {
            color: red;
        }

        .orange {
            color: orange;
        }

        .green {
            color: green;
        }
    </style>
</head>

<body>
    <span class="blue font100">G</span>
    <span class="red font100">o</span>
    <span class="orange font100">o</span>
    <span class="blue font100">g</span>
    <span class="green font100">l</span>
    <span class="red font100">e</span>
</body>

</html>

2.4 id选择器

id选择器使用#进行标识，后面紧跟id名

其基本语法格式如下:

id选择器

# id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

标签

<p id = "id名"></p>

元素的id值是唯一的，只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。

案例：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #pink{
            color: pink;
        }
    </style>
</head>
<body>
    <p>愿你走出半生，</p>
    <p>归来仍是少年。</p>
    <p>愿我洗尽铅华，</p>
    <p id="pink">依旧笑魇如花</p>
    
</body>
</html>

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

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

○ 类选择器（class）好比人的名字，是可以多次重复使用。比如：张伟王伟李伟

○ id选择器好比人的身份证号码，全中国唯一的，不得重复。只能使用一次。

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

2.5 通配符选择器

概念

通配符选择器用 * 号表示，* 就是所有的他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

其基本语法格式如下：

* {
    属性1:属性值1;
    属性2:属性值2;
    属性3:属性值3;
}

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

* {
    margin: 0;/*定义外边距*/
    padding: 0;/*定义内边距*/
}

注意：

会匹配页面所有的元素，降低页面的响应速度，不建议随便使用。

2.6 基础选择器总结

2.7 团队约定

选择器

尽量少用通用选择器 *
尽量少用id选择器
不使用无具体语义定义的标签选择器 div span

/*推荐*/
.jbc {}
li {}
p {}

/*不推荐*/
* {}
#jbc {
}
div {} 因为div没有语义，我们尽量少使用。

3. CSS字体样式

3.1 font-size: 字体大小

作用：

font-size属性用于设置字号

p {
    font-size: 20px;    

}

单位：

○ 可以使用相对长度单位，也可以使用绝对长度单位。

○ 相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。

注意：

1). 我们字体大小以后，基本就用px了，其他单位很少使用。

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

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

3.2 font-mamily: 字体

font-family属性用于设置哪一种字体大小。

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

网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑
可以同时指定多个字体，中间以逗号隔开，表示浏览器如果不支持第一个字体，则会尝试下一个，知道找到合适的字体。

p{font-family: Arial,"Microsoft YaHei","微软雅黑";}

常用技巧:

1.各种字体之间必须使用英文状态下的逗号隔开。
2.中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体必须位于中文字体名之前。
3.如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的引号，例如font-family: "Times NewRoman";。
4.尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

CSS Unicode字体

为什么要使用Unicode字体

○ 在CSS中设置字体名称，直接写中文是可以的。但是在文件编码（BG2312、UTF-8等）不匹配时会产生乱码的错误。

○ xp系统不支持类似微软雅黑的中文。

解决

○ 方案一：你可以使用英文来替代。比如：font-family: "Microsoft YaHei" 。

○ 方案二：在CSS直接使用Unicode编码来写字体名称可以避免这些错误。使用Unicode写中文字体名称，浏览器是可以正确的解析的。

font-family: "\5FAE\8F6F\96C5\96D1"; 表示设置字体为"微软雅黑"。

为了照顾不同电脑的字体安装问题，我们尽量只是用宋体和微软雅黑中文字体。

3.3 font-weight: 字体粗细

在html中如何将字体加粗？我们可以用标签来实现

○ 使用 b 和 strong 标签文本加粗

可使用CSS来实现，但是CSS是没有语义的。

提倡：我们平时更喜欢用数字来表示加粗和不加粗。

使用css2.0中文手册查文档

去百度云下载

链接：百度网盘请输入提取码
提取码：1234

3.4 font-style:字体风格

在html中如何将字体倾斜？我们可以用标签来实现

○ i 或 em 标签

可以使用CSS来实现，但是CSS是没有语义的

font-style属性用于定义字体风格，如设置斜体、倾斜或者正常字体，其可用属性值如下：

属性	作用
normal	默认值，浏览器会显示标准的字体样式
italic	浏览器会显示斜体的字体样式

小技巧：

平时我们很少给文字加斜体，反而喜欢给斜体标签(em,i)改为普通样式。

3.5 font: 综合设置字体样式(重点)

font属性用于对字体样式进行综合设置

基本语法格式如下：

选择器{font: font-style font-weight font-size/line-height font-family;}

注意：

○ 使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

○ 其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

3.6 font总结

3.7 CSS外观属性总结

4. sublime快捷操作emmet语法

.demo$*3
<div class = "demo1"><div>
<div class = "demo1"><div>
<div class = "demo1"><div>

窗台的花花

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
一、CSS基础语法（CSS层叠样式表、选择器、字体样式、emmet语法）

1. CSS层叠样式表1.1 HTML的局限性说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义，比如<h1>表明这是一个大标题，用<p>表明这是一个段落，用<img>表明这儿有一个图片，用<a>表示此处有链接。很早的时候，是世界上的网站虽然很多，但是他们都有一个共同的特点：丑。这是一个外国比较早的购物网站有些人就忍受不了了，你就不能把自己打扮漂亮一点吗?HTML说，我试试....如果要改变下高度或者变一下颜..
复制链接

扫一扫