前端入门第三天-css选择器和字体属性

最新推荐文章于 2024-04-24 10:57:13 发布

咯吱吱鸭

最新推荐文章于 2024-04-24 10:57:13 发布

阅读量294

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_52016418/article/details/109440444

版权

1.基础认知

1.1css简介

css是层叠样式表（Cascading Style Sheets），是一种标记语言。用来美化布局网页的。

CSS 能设置的样式

文本内容：字体、大小、对齐方式；
图片：宽高、边框、边距；

版面的布局。

结构与样式分离：HTML 专注做结构 + CSS 专注做样式

1.2语法规范

css规则包含选择器和样式声明。

css通常写在里面用括起来。

<head>
  <meta charset="UTF-8" />
  <title>体验CSS语法规范</title>
  <style>
    /* CSS 写在这里 */
  </style>
</head>

语法格式：

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

使用 {} 包含一个或多个样式声明；
每条样式声明以键值对形式出现：属性: 值；
属性和值之间使用 : 分隔；
属性之间使用 ; 分隔，最后一行的分号可以省略。

1.3代码风格

展开格式，因为更直观，更易于阅读和维护

书写样式时，应该使用小写字母。选择器和开始花括号之间保留一个空格；“：”后面保留一个空格。

2.选择器

2.1作用：

选择标签 —— 根据不同的需求，把对应的标签选择出来。

2.2选择器分类

选择器分为：

1.基础选择器：由单个选择器组成，分为标签、类、id、通配符。

2.复合选择器：由多个选择器组成

2.2标签选择器使用 HTML 标签名称作为选择器。

结果：把某一类标签选择出来，统一修改样式；
优点：快速、统一设置同类型标签的样式；
缺点：没有差异化。

2.3类选择器

2.3.1应用场景：如果想差异化选择不同的标签，单独选择一个或某几个标签

2.3.2类选择器的语法、使用步骤和注意事项

1.定义类选择器：

选择器名称前有一个 . 表示是类选择器；
{} 中仍然是一个或多个键值对。

2.使用类选择器：

找到需要修改样式的标签；
给标签增加 class 属性，属性值是选择器的类名。

3.注意事项：

使用类选择器不需要 .！
使用类选择器不需要 .！
使用类选择器不需要 .！

4.类选择器命名的注意事项

. 紧跟类名，. 与类名之间不能有空格；
长名称或词组使用 - 连接，例如：jd-nav；
尽量用英文，不要用数字或中文；
命名要做到见名知意；
类命名规则参考。

类选择器口诀

样式点定义
结构类（class）调用
一个或多个
开发最常用

2.3.3类选择器特殊使用-多类名

多类名的应用场景:把元素相同的样式放在同一个公共类中，个性的样式放在单独的类中，既可以节省 CSS 代码，又方便统一修改

多类名的使用方式:

在标签的 class 属性中使用多个类名；
类名之间使用空格分隔。

2.4 id 选择器

2.4.1 应用场景:专门定义 HTML 中某个特定元素的样式，因为 id 是唯一的

2.4.2id 选择器的使用步骤:

1.定义带id的 HTML 元素：

给 HTML 中的某个特殊元素增加 id 属性。

2.定义带id选择器：

选择器名称前有一个 # 表示是 id 选择器；
选择器名称就是对应 HTML 元素的 id 名称；
{} 中仍然是一个或多个键值对。

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

id 可以看成是身份证号（唯一） / 类可以看成是名字（可多人使用）；
id 只为特定元素设置样式，常与 JavaScript 联用；
类选择器在修改样式中用的最多。

id 选择器口诀
1. 样式 # 定义
2. 结构 id 调用
3. 只能用一次
4. 别人勿使用

2.5 通配符选择器 *

选取页面中的所有元素，通配符选择器不需要调用。

3.css字体属性

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

3.1 font-family 设置字体系列

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

浏览器对字体的搜索顺序是当指定的字体找不到（或者某些文字不支持这个字体）时，就接着往后找。

3.2 font-size 字号大小

字体大小单位是 px，谷歌浏览器的默认文字大小是16px。

3.3 font-weight 字体粗细，不带单位

取值范围 100 ~ 900（按 100 递增）；
normal：正常粗细，与 400 等值；
bold：加粗，与 700 等值。

3.4 font-style 字体样式

italic 斜体 / normal 正常

应用场景是把 em、i 默认的斜体改为不倾斜显示 font-style: normal;

开发时，如果需要对段落中的局部文字进行修饰，例如搜索结果高亮，可以使用 em 标签，然后应用 font-style 首先将字体设置为不倾斜。

3.5 font 复合属性写法

复合属性的编写顺序是：

font: font-style font-weight font-size/line-height font-family；
复合属性不能随意调整顺序；
复合属性至少要保留：font-size 和 font-family 属性，否则设置无效。

4.CSS文本属性

文本属性可以定义颜色、对齐方式、装饰文本、文本缩进、行间距等。

4.1文本颜色color

定义颜色的方式：

预定义的颜色名：red、green、blue；
十六7进制：#ff0000；
RGB 代码：rgb(255, 0, 0) 或 rgba(255, 0, 0, 0.5)。

开发中最常用的是十六进制的颜色。

如果要使用透明色，可以使用 rgba(red, green, blue, 透明度)，其中：
- red：0 ~ 255；
- green：0 ~ 255；
- blue：0 ~ 255；
- 透明度：0 ~ 1，0 表示完全透明（看不见），1 表示完全不透明。

4.2 文本对齐 text-align

4.2.1 text-alian：可以设置水平上的对齐方式。本质是让盒子内部的文本按照盒子边界对齐。

4.2.2三种文本对齐方式

left：左对齐（默认）；
right：右对齐；
center：居中。

4.2.3 注意：

不可以给不是独占一行的元素设置文本对齐；

文本对齐对 span、a、em、ins、strong 等元素设置不生效。

4.3 文本装饰 text-decoration

属性值	描述
none	默认，没有装饰线，最常用
underline	下划线，常用
line-through	删除线，不常用
overline	上划线，几乎不用

4.4 文本缩进 text-indent

作用：设置文本段落的首行缩进，更适合中文阅读习惯

单位：em，是相对单位，当前元素一个文字的大小

注意：text-indent 属性仅对独占一行的元素生效

TIP

&ensp；：半角空格, 占据宽度正好是 1/2 个中文宽度；
&emsp；：全角空格, 占据宽度正好是 1 个中文宽度。

4.5 行间距 line-height

作用：控制文本行与行之间的距离;文本在盒子中垂直居中

组成：上间距；文本高度；下间距。

测量行间距的方法：

从一段文字的下边线测量到相邻一行的下边线；文本的上下间距是相等的。

5.css的三种引入方式

行内样式表（行内式）；
内部样式表（嵌入式）；
外部样式表（链接式）。

5.1内部样式表

理论上可以放在 HTML 的任何位置；

推荐放在 head 标签中，不要忘记还有一个 style 标签哦。

5.2 行内样式表

特点：

写在元素的 style 属性中；
适合于简单、快速、临时修改样式；
在 style 属性中，使用键值对设置样式，不需要 {}；
写在哪个元素就控制哪个元素，对其他元素没有效果。

5.3外部样式表

在实际开发中，外部样式表的引入方式使用的多

核心思想：HTML与CSS分离

5.3.1外部样式表的使用步骤

新建外部的 CSS 文件并编写样式；
在 HTML 中使用 link 标签引入外部样式表

5.4 CSS 引入方式总结

样式表	优点	缺点	使用频率	控制范围
行内	书写方便，权重高	结构样式混合	低	控制一个标签
内部	部分结构和样式分离	没有彻底分离	较多	控制一个页面
外部	完全结构和样式分离	需要 `link` 引入	多	可以被多处复用

6.类命名规则

功能	建议命名
头	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

咯吱吱鸭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端入门第三天-css选择器和字体属性

1.基础认知1.1css简介css是层叠样式表（Cascading Style Sheets），是一种标记语言。用来美化布局网页的。CSS 能设置的样式文本内容：字体、大小、对齐方式；图片：宽高、边框、边距；版面的布局。结构与样式分离：HTML 专注做结构 + CSS 专注做样式1.2语法规范css规则包含选择器和样式声明。css通常写在里面用括起来。<head> <meta charset="UTF-8" /> <title>体
复制链接

扫一扫