CSS基础

最新推荐文章于 2023-09-08 16:40:10 发布

醉月无归

最新推荐文章于 2023-09-08 16:40:10 发布

阅读量1.3w

点赞数 1

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

本文链接：https://blog.csdn.net/EX1332914934/article/details/120628058

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.CSS初识

概念：

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

作用：

主要用于设置HTML页面中的文本内容(字体,大小,对齐方式等)、图片的外形(宽高,边框样式,边距等)以及版面的布局和外观显示样式。
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

2.引入CSS样式表

1.行内式（内联样式）

概念：

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

基本语法格式如下：

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

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

注意：

style其实就是标签的属性
样式属性和值中间是 :
多组属性值之间用 ; 隔开。
只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余

缺点：

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

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

概念：

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

基本语法格式如下：

<head> 
<style type="text/CSS"> 
    选择器（选择的标签） { 
        属性1: 属性值1; 
        属性2: 属性值2; 
        属性3: 属性值3; 
    } 
</style> 
</head>

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

注意：

style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
type=“text/css” 在html5中可以省略。
只能控制当前的页面

缺点：

没有彻底分离

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

概念：

称链入式
是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，
通过link标签将外部样式表文件链接到HTML文档中

基本语法格式如下：

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

注意：

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

在这里插入图片描述

4.三种样式表总结

在这里插入图片描述

5.总结CSS样式规则

总结：

选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。
属性和属性值以“键值对”的形式出现。
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
属性和属性值之间用英文“:”连接。
多个“键值对”之间用英文“;”进行区分。

3.CSS基础选择器

1.标签选择器

概念：

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

语法：

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

作用：

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

优点：

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

缺点：

不能设计差异化样式。

2.类选择器

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

语法：

类名选择器

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

标签
```
<p class='类名'></p>
```

优点：

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

注意：

类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)
长名称或词组可以使用中横线来为选择器命名。
不要纯数字、中文等命名，尽量使用英文字母来表示。

3.类选择器特殊用法-多类名

注意：

各个类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

4.id选择器

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

基本语法格式如下：

id选择器

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

标签
```
<p id="id名"></p>
```
元素的id值是唯一的，只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。

5.通配符选择器

概念：

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

基本语法格式如下：

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

6.基础选择器总结

在这里插入图片描述

4.font字体

1.font-size：大小

作用：

font-size属性用于设置字号
```
p {
	font-size:20px;
}
```

单位：

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

注意：

我们文字大小以后，基本就用px了，其他单位很少使用
谷歌浏览器默认的文字大小为16px
但是不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小。一般给body指定整个页面文字的大小

2.font-family：字体

作用：

font-family属性用于设置哪一种字体。
```
p{ font-family:"微软雅黑";}
```
网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体，如果都没有，则以我们电脑默认的字体为准。
```
p{font-family: Arial,"Microsoft Yahei", "微软雅黑";}
```

常用技巧：

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

• CSS Unicode字体

为什么使用 Unicode字体：

在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。
xp 系统不支持类似微软雅黑的中文。

解决：

方案一：你可以使用英文来替代。比如 font-family:“Microsoft Yahei” 。
方案二：在CSS直接使用Unicode编码来写字体名称可以避免这些错误.使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。

在这里插入图片描述

3.font-weight：字体粗细

在这里插入图片描述

4.font-style：字体风格

在这里插入图片描述

5.font：综合设置字体样式

基本语法格式如下：

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

注意：

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

6.font总结

在这里插入图片描述

5.CSS外观属性

1.color：文本颜色

作用：

color属性用于定义文本的颜色，

取值方式有如下3种：

在这里插入图片描述

2.text-align：文本水平对齐方式

作用：

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性

可用属性值如下：

在这里插入图片描述

注意：

是让盒子里面的内容水平居中，而不是让盒子居中对齐

3.line-height：行间距

作用：

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。

单位：

line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

4.text-indent：首行缩进

作用：

text-indent属性用于设置首行文本的缩进

属性值：

其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,
建议使用em作为设置单位。

1em 就是一个字的宽度如果是汉字的段落， 1em 就是一个汉字的宽度

5.text-decoration 文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

在这里插入图片描述

6.CSS外观属性总结

在这里插入图片描述

6.开发者工具

此工具是我们的必备工具

以后代码出了问题我们首先第一反应就是：

“按F12”或者是 “shift+ctrl+i” 打开开发者工具。
菜单：右击网页空白出—检查
通过开发人员工具小指针工具，查找页面元素
左侧是html页面结构，右侧是css样式

小技巧：

ctrl+滚轮可以放大开发者工具代码大小。
左边是HTML元素结构右边是CSS样式。
右边CSS样式可以改动数值和颜色查看更改后效果。
ctrl + 0 复原浏览器大小

醉月无归

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

CSS基础1.CSS初识2.引入CSS样式表1.行内式（内联样式）2.内部样式表（内嵌样式表）3.外部样式表（外链式）4.三种样式表总结5.总结CSS样式规则3.CSS基础选择器1.标签选择器2.类选择器3.类选择器特殊用法-多类名4.id选择器5.通配符选择器6.基础选择器总结4.font字体1.font-size：大小2.font-family：字体• CSS Unicode字体3.font-weight：字体粗细4.font-style：字体风格5.font：综合设置字体样式6.font总结5.CSS
复制链接

扫一扫