前端——CSS1

原创于 2025-04-29 19:25:50 发布 · 1.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端

一，概述

CSS（Cascading Style Sheets）（级联样式表）

css是一种样式表语言，为html标签修饰定义外观，分工不同

涉及：对网页的文字、背景、宽、高、布局进行修饰

分为内嵌样式表（平常练习时使用）和外部样式表（制定网页时使用，将css与html网页分离）

CSS与HTML的关系:

HTML是网页内容

CSS定义页面的样式

二，基本语法——行内样式表

1.样式表：

（1）行内样式表

行内样式表：是通过标签的 style 属性来设置元素的样式，其基本语法格式如下：
< 标签名 style=" 属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3;"> 内容 </ 标签名 >

（2）内嵌样式表

内嵌式样式表是将 CSS 代码集中写在 HTML 文档的 head 头部标签中，并且用 style 标签定义
<html>
<head>
<title> 样式规则 </title>
将内嵌样式表放在此处
<style></style>
</head>
<body>
</body>
</html>

（3）外部样式表

外部样式表是将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中，通
过 link 标签将外部样式表文件链接到 HTML 文档中
使用link（链接）标签 :
<head>
<link href="引入样式的文件" rel="stylesheet " type=" text /css">
<style type=" text /css">
</style>

2.选择器:

（1）标签选择器：

通过标签选择器可以选择页面中的所有指定标签
语法：标签名 {}

（2）类选择器：

通过标签的 class 属性值选中一组标签
语法： .class 属性值 {}

（3）id 选择器：

通过标签的 id 属性值选中唯一的一个标签
语法： #id 属性值 {}

（4）通配选择器 :

可以用来选中页面中的所有的标签
语法： *{}

3.文本修饰:

color ：字体颜色
font-size ：字体大小
font-family ：字体
text-align ：文本对齐
text-decoration:line-through ：定义穿过文本下的一条线
text-decoration:underline ：定义文本下的一条线
text-decoration:none ：定义标准的文本
font-style: italic; 斜体文本
font-weight: 字体粗细
line-height: 设置行高