900字范文 > 初识CSS-引入方式字体属性选择器总结

初识CSS-引入方式字体属性选择器总结

时间：2023-07-24 02:56:42

相关推荐

初识CSS-引入方式字体属性选择器总结

什么是CSS ？

1、层叠样式表（Cascading Style Sheets），简称CSS，或CSS样式表、级联样式表；

2、CSS是一种标记语言，文件后缀名 “.css” ；

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

4、功能：美化页面，优化布局；

5、价值：实现结构（ HTML）与样式（CSS）完美分离。

CSS语法规范

<style>p {color: yellow;/* 属性:属性值; 键值对形式存在，英文“:”分开 */font-size: 22px; /* 多个“键值对”之间用英文“;”进行区分 */}选择器 {属性: 属性值;}</style>

① p ：选择器；

② { } ：花括号内是对该对象设置的具体样式；

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

④ 所有样式写在 style 标签内，表示是样式表。 style 一般写到 head 结束标签上方；

⑤ 多采用展开格式、小写字母、空格规范书写。

CSS引入方式

1、行内式

2、内嵌式

3、外链式

1、行内式

行内式是在元素标签内部的 style 属性中设定 CSS 样式，适合于修改简单样式。

<div style="color: green; font-size: 12px;">人生海海，不过尔尔。</div>

（1）style 其实就是标签的属性，在双引号中间，书写要符合 CSS 规范

（2）可以控制当前的标签设置样式

（3）不推荐大量使用

2、内嵌式

内嵌式是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 style 标签中

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

（1） style 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的 head 标签中

（2）通过此种方式，可以方便控制当前整个页面中的元素样式设置

（3）代码结构清晰，但是并没有实现结构与样式完全分离

3、外链式（最常用）

实际开发都是外链式。适合于样式比较多的情况。核心是：样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用。

引入外链式步骤：

① 新建一个后缀名为 .css 的样式文件，把所有 css 代码写在这个文件中；

② 在 HTML 页面，使用 link 标签引入这个文件。

<link rel="stylesheet" href="css文件路径">

属性：

rel ：定义当前文档与被链接文档之间的关系，此处表示被链接的文档是一个样式表文件。

href ：定义所链接的css文件路径，可以是相对路径，也可以是绝对路径。

CSS字体属性

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

<!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>字体属性</title><style>.one {font-size: 30px;font-family: "宋体";font-weight: bold;font-style: italic;}/* 等价于 *//* font: font-style font-weight font-size/line-height font-family; 属性值有顺序之分，空格隔开 */.two {font: italic bold 30px "宋体";}</style></head><body><p class="one">设置字体属性</p><p class="two">设置字体属性</p></body></html>

注：

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

CSS文本属性

文本属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

color : 预定义的颜色名/十六进制/RGB代码;

text-align: left/center/right； ----左/中/右

text-indent: 不同单位的数值/em字符宽度的倍数/相对于浏览器窗口宽度的百分比%; （建议em）

text-decoration: none/underline/overline/line-through; ----默认/下划线/上划线/删除线

line-height: 像素px/em/%; （建议像素px）

<!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>文本属性</title><style>p {color: #ff6600;text-align: left; /* 居左 */text-indent: 2em; /* 首行缩进2字符 */text-decoration: underline; /* 添加下划线 */line-height: 26px; /* 设置行间距26px */}</style></head><body><p>胡歌小学就读于上海市向阳小学，初中就读于上海市第二中学初中部95级1班，高中就读于上海市第二中学高中部98级3班、高中部01届7班。胡歌在小学阶段曾经是戴三道杠的大队委员，在中学阶段还担任校升旗仪式主持人、校广播台台长、校戏剧社社长、校合唱团团长、班级团支书、班级物理课代表、徐汇区学生话剧团负责人，还参与了中央电视台《正大综艺》节目主题歌《爱的奉献》MV的拍摄。</p></body></html>

选择器

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

分类：基础选择器、复合选择器。

1、基础选择器

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

标签选择器：

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

语法：

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

① 直接使用标签名称，作为选择器的名称，该选择器可以匹配到页面中所有该标签。

② 优点：快速为页面中同类型的标签设置统一样式；

③ 缺点：不能差异化设计样式。

类选择器：

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

<div class="类名"> 人生海海，不过尔尔。 </div>

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

语法：

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

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

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

③ 长名称或词组可以使用中横线来为选择器命名；

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

类选择器 - 多类名：

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签，简单理解就是一个标签有多个名字。

使用方式：

<div class="red font20">人生海海，不过尔尔。</div>

注：

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

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

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

案例：

<!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>多类名使用方式</title><style>.box1 {/* 有差异的样式单独放即可 */background-color: red;}.box2 {background-color: green;}.box3 {/* 我们把共有的一些样式放到一个类里 */width: 200px;height: 200px;}</style></head><body><div class="box1 box3">人生海海，不过尔尔。</div><div class="box2 box3">人生海海，山山而川。</div><div class="box1 box3">人生海海，不过尔尔。</div></body></html>

id选择器：

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

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

语法：

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

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

Tips：

id 选择器和 class 选择器的区别：

① 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

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

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

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

通配符选择器：

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

语法：

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

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

案例：

清除所有元素的内外边距。

* {margin: 0;padding: 0;}

基础选择器总结：

2、复合选择器

复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

更准确、更高效的选择目标元素（标签）由两个或多个基础选择器，通过不同的方式组合而成的常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器：

后代选择器又称为包含选择器，可以选择父元素里面子元素，当标签发生嵌套时，内层标签就成为外层标签的后代。

语法：

元素1 元素2 { 样式声明 } 

元素1 和元素2 中间用空格隔开，最终被选中的元素是所有元素2元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可元素1 和元素2 可以是任意基础选择器

子选择器：

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。

语法：

元素1 > 元素2 { 样式声明 }

选择元素1 里面的所有直接后代(子元素) 元素2。

元素1 和元素2 中间用大于号隔开元素1 是父级，元素2 是子级，最终选择的是元素2元素2 必须是亲儿子，其孙子、重孙之类都不归他管

并集选择器：

并集选择器可以选择多组标签, 同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号 “, ” 连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素1,元素2 { 样式声明 }

选中元素1和元素2。

元素1 和元素2 中间用逗号隔开逗号可以理解为和的意思并集选择器通常用于集体声明

伪类选择器：

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用英文冒号（:）表示，比如 :hover 、 :first-child 。

（1）链接伪类选择器

a:link{} “链接”：超链接点击之前，未访问（只适用于a，默认时蓝色，若不生效清除缓存即可）a:visited{} “访问过的”：链接被访问过之后（只适用a）a:hover{} “悬停”：鼠标放到标签上的时候（适用于所有标签，例如：p、div等）a:active{} “激活”：鼠标点击标签，但是不松手时。（使用于所有标签）

注意：

以上四个属性全部存在时

顺序：先爱后恨 L_V_H_A

<!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>链接伪类选择器</title><style>a:link {color: #66ff87;}a:visited {color: #f6f;}a:hover {color: #66d6ff;}a:active {color: #ff9466;}</style></head><body><a href="#">人生海海，不过尔尔。</a><a href="#">人生海海，不过尔尔。</a><a href="#">人生海海，不过尔尔。</a><a href="#">人生海海，不过尔尔。</a></body></html>

（2）:focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况 input 类表单元素才能获取.

<!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>:focus 伪类选择器</title><style>input:focus {background-color: yellow;}</style></head><body>昵称：<input type="text"><br>昵称：<input type="text"></body></html>