CSS介绍

川长思鸟来 2022-12-28 00:42 117阅读 0赞

*  CSS简介
 *  CSS基础选择器
 *  CSS字体属性
 *  CSS文本属性
 *  CSS的引入方式

#### CSS简介 ####

CSS是层叠样式表（Cascading Style Sheets）的简称。

**作用：**

*  用于HTML文档中元素的样式定义
 *  实现内容（html元素）与表现（css样式）的分离
 *  实现代码的可重用性和可维护性

**CSS主要部分：选择器及一条或多条声明。**

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

#### CSS基础选择器 ####

CSS选择器作用：选择标签

*  **标签选择器**  
    用HTML标签名作为选择器，按标签名分类，为页面中的某一类标签指定统一的CSS样式。
 *  **类选择器**  
    为了差异化选择不同的标签，单独选一个或某几个标签，可以使用类选择器。
 *  **id选择器**  
    样式\#定义，结构id调用，只能用一次，别人勿使用  
    样式点调用，结构类（class）调用，一个或多个，开发最常用
 *  **通配符选择器**  
    使用“\*”定义，表示选中所有元素（标签）。

#### CSS字体属性 ####

（1）常用字体属性

![bfe953e61dd2fed2cd34bca2b0156aa2.png][]

（2）font复合属性

可以把以上文字样式综合来写，节约代码。

格式：

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

比如：

body{
        font: normal 400 25px 'Microsoft yahei'; 
    }

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

#### CSS文本属性 ####

![1890c08aa71d514a9c0be3329f2c8c74.png][]

#### CSS的引入方式 ####

**（1）行内样式表（行内式）**

在标签内部写个style属性，适合修改简单的样式。

**（2）内部样式表（嵌入式）**

将所有的CSS代码抽取出来，单独放到一个标签中。

`<style></style>`标签一般放在`<head></head>`标签里。

**（3）外部样式表（链接式）**

开发过程中，使用的最多的方式。

先单独写一个CSS样式文件，然后在HTML页面通过`<link>`标签引用

> html，css，JavaScript面试题分享，更多[戳我][Link 1],免费分享！

![b3fcc11533f3cf3b4239484a0e0e786d.png][]

[bfe953e61dd2fed2cd34bca2b0156aa2.png]: /images/20221120/f1d853b4f8474155860c917f62767f0f.png
[1890c08aa71d514a9c0be3329f2c8c74.png]: /images/20221120/2184e4726cc548fd994ad94828f75481.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=LfrICXg5
[b3fcc11533f3cf3b4239484a0e0e786d.png]: /images/20221120/21651ddca63f4e7aaf1cb610fdba851d.png