CCS基础样式表⼀.css样式表1.样式表分类1.内联式<p >This is an apple</p>2.内嵌样式表作为⼀个独⽴的区域内嵌在⽹页⾥⾯，必须写在head标签⾥⾯<style type="text/css>p{text-decoration:underline}</style>3.外部样式表新建⼀个CSS⽂件，然后在HTML⽂件中调⽤此样式表。
在HTML⽂件中邮件——CSS样式——附加样式表。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>优先级⽐较</title><link href="red.css" type="text/css" rel="stylesheet">//链接式-外部样式<style type="text/css">p{//内嵌样式表color: blue;font-size: 20px;}@import url(yellow.css);//导⼊式</style></head><body><p >⾏内样式>链接式>内嵌式>导⼊式(链接式在后⾯)<br/>//⾏内样式---内联式⾏内样式>内嵌式>导⼊式>链接式(链接式在前⾯)<br/>总的规律：后⾯的样式会覆盖前⾯的样式</p></body></html>⼆.选择器1.标签选择器⽤标签名直接做选择器<style type="text/css">p{font-size=14px;}</style>直接作⽤下⾯的p标签<p>GOd is a girl</p>2.class选择器class选择器都是以“.”为开头<head><style type="text/css">.main {height=24px;width=18px;text-align:center;}</style></head><body><div class="main">调⽤的class样式。
什么是CSS？CSS（Cascading Style Sheets）是一种用于描述网页样式和布局的样式表语言。
它与HTML结合使用，为网页提供外观和样式的控制。
CSS通过选择器和属性来选择和定义网页中的元素，使得开发人员可以轻松地改变网页的外观、布局和交互效果。
以下是CSS的一些关键概念和特点：1. 样式表：CSS是一种样式表语言，用于定义网页元素的外观和布局。
样式表由一系列的规则组成，每个规则由选择器和一组样式属性构成。
2. 选择器：CSS使用选择器来选择网页中的元素，并将样式应用于这些元素。
选择器可以根据元素的标签名、类名、ID、属性等进行匹配。
例如，选择器`p`选择所有的段落元素，选择器`.class`选择所有具有特定类名的元素。
3. 样式属性：CSS使用属性来描述元素的外观和布局。
属性定义了元素的颜色、字体、大小、边框、间距等方面的样式。
例如，属性`color`定义了元素的文本颜色，属性`font-size`定义了元素的字体大小。
4. 层叠和继承：CSS的名称中包含了"层叠"（Cascading）一词，表示样式的层叠和优先级规则。
当多个样式规则应用于同一个元素时，CSS使用层叠规则来确定最终的样式。
此外，CSS 中还存在继承的概念，某些样式属性可以从父元素继承到子元素。
5. 盒模型：CSS中的盒模型用于描述元素的布局。
每个元素都被视为一个矩形盒子，其包括内容区域、内边距、边框和外边距。
开发人员可以通过设置盒模型相关的属性来控制元素的大小和间距。
6. 响应式设计：CSS可以用于实现响应式设计，即根据不同设备和屏幕尺寸自动调整和适应网页的布局和样式。
通过使用CSS媒体查询或CSS框架，可以根据设备的特性和屏幕尺寸应用不同的样式。
7. CSS预处理器：CSS预处理器是一种将类似编程语言的语法引入CSS的工具。
它们增加了变量、嵌套规则、函数、导入等功能，使得CSS的编写更加灵活和可维护。
CSS列表样式自定义方法CSS（层叠样式表）是一种用于定义网页布局和外观的语言。
使用CSS，我们可以更改列表的样式，以使其与网页的整体风格相匹配。
本文将介绍一些常用的CSS列表样式自定义方法。
一、使用内置列表样式CSS提供了一些内置的列表样式，包括无序列表（ul）和有序列表（ol）。
1. 无序列表样式：通过设置列表项（li）的样式（list-style-type）属性，我们可以更改无序列表的样式。
常见的样式选项包括：- none：不显示任何符号。
- disc：显示为实心圆点。
- circle：显示为空心圆点。
- square：显示为方块。
例如，可以使用以下CSS代码将无序列表的样式更改为方块：```ul {list-style-type: square;}```2. 有序列表样式：有序列表的样式可以通过设置列表项（li）的样式属性（list-style-type）进行更改。
常见的样式选项包括：- decimal：按数字顺序显示。
- lower-alpha：按小写字母顺序显示。
- upper-alpha：按大写字母顺序显示。
- lower-roman：按小写罗马数字显示。
- upper-roman：按大写罗马数字显示。
例如，可以使用以下CSS代码将有序列表的样式更改为小写字母：```ol {list-style-type: lower-alpha;}```二、使用自定义图像作为列表符号除了使用内置的列表样式外，我们还可以使用自定义图像作为列表项的符号。
这需要使用CSS的background-image属性。
1. 准备图像：首先，我们需要准备一个用作列表符号的图像，可以是PNG、JPEG或GIF格式。
确保图像的大小适合作为列表符号，并上传至服务器。
2. 设置背景图像：然后，使用CSS的background-image属性将图像设置为列表项的背景图像。
可以使用以下CSS代码来设置背景图像：```ul {list-style-image: url("path/to/image.png");}```请将"path/to/image.png"替换为实际图像文件的路径。
CSS内部样式表是指将样式代码嵌入HTML或XML文档中，直接作用于文档的各个元素。
以下是CSS内部样式表的写法：
1. 在HTML文档的head部分中添加style标签，如下所示：
<head>
<style>
/* CSS样式代码*/
</style>
</head>
2. 在style标签内部编写CSS样式代码。
可以使用class、id、属性等方式选择元素，然后为其指定样式属性。
例如，为body元素设置字体颜色和背景色，可以使用以下代码：
<head>
<style>
body {
color: red;
background-color: white;
}
</style>
</head>
3. 如果需要使用外部CSS样式表，可以在HTML文档的head部分中使用link标签引用外部CSS样式表，如下所示：
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
其中，href参数指定外部CSS样式表的路径和文件名。
需要注意的是，CSS内部样式表只能作用于当前HTML文档中的元素，无法作用于其他HTML 文档中的元素。
而使用外部CSS样式表可以使样式代码更加灵活、可重用，同时也方便进行样式管理和维护。
