CSS介绍
CSS 基本介绍一目录
[*]CSS 基本介绍一
[*]一.快速入门
[*]1.练习模式：
[*]2.只需3步即可让HTML焕然一新：
[*]二、CSS优势
[*]三、四种导入方式
[*]四、核心选择器详解
[*]1. 三大基本选择器
[*]标签选择器
[*]类选择器
[*]id选择器
[*]2.层次选择器
[*]后代选择器：在某个元素后面
[*]子选择器：一代
[*]相邻兄弟选择器：同辈，只有一个 ，相邻（向下）
[*]通用兄弟选择器，当前元素中向下的所有兄弟元素
[*]3.属性选择器
[*]五.字体样式
[*]1.span标签
[*]2.字体样式
[*]3.文本样式
[*]结语
css是网页设计的核心语言，负责将枯燥的HTML变得丰富多彩，本文将介绍css的一些用法。
一.快速入门
1.练习模式：
2.只需3步即可让HTML焕然一新：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>我是标题1</h1>
</body>
</html>效果如下：
二、CSS优势
[*]内容和表现分离
[*]网页结构表现统一，可以实现复用
[*]样式十分丰富
[*]建议使用独立于html的css文件
[*]利用SEO，容易被搜索引擎收录
三、四种导入方式
方式示例行内样式
内部样式外部样式@import导入@import url('style.css');1.若有多个导入样式，遵循就近原则
2.大型项目优先使用外部样式表
四、核心选择器详解
1. 三大基本选择器
选择器优先级：ID > 类 > 标签
标签选择器
**页面里直接用HTML标签名（比如
、）当选择器，能选中页面里所有这个标签的元素。比如用当选择器，页面里所有段落都会被选中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>内容1</h1>
<h1>内容2</h1>
<p>内容3</p>
</body>
</html> 效果如下：
类选择器
类选择器：给元素起个“类别名”（用定义），选择时用.类名，能选中所有带这个类名的元素。
一个类名可以给多个元素用，一个元素也能有多个类名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 >标题1</h1>
<h1 >标题2</h1>
<h1 >标题3</h1>
</body>
</html>效果如下：
id选择器
给元素起个“唯一名字”（用id="id名"定义）,选择时用#id名，一个id在页面里只能用一次，只能选中一个元素,必须保证全局唯一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 >标题1</h1>
<h1 >标题2</h1>
<h1 >标题3</h1>
</body>
</html>标题4
标题5
效果如下：
2.层次选择器
后代选择器：在某个元素后面
用空格连接两个选择器，比如div p，选中div里所有的p标签，不管是儿子、孙子还是更深层的都算。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>p1</p>
<p >p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p >p7</p>
<p>p8</p>
</body>
</html>如下：
子选择器：一代
用>连接两个选择器，比如body > p，只选中body直接包含的“亲儿子”p标签，孙子辈的p不算。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>p1</p>
<p >p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p >p7</p>
<p>p8</p>
</body>
</html>
相邻兄弟选择器：同辈，只有一个 ，相邻（向下）
用+连接，比如.active+p，选中紧挨着.active标签后面的那个p（必须是同一个父元素下，且紧挨着）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>p1</p>
<p >p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p >p7</p>
<p>p8</p>
</body>
</html>如下
通用兄弟选择器，当前元素中向下的所有兄弟元素
用连接，比如.activeP，选中.active标签后面所有同层级的p（同一个父元素下，不用紧挨着）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>p1</p>
<p >p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p >p7</p>
<p>p8</p>
</body>
</html>效果如下：
3.属性选择器
根据元素的属性来选，比如input，选中所有type属性是text的输入框；a选中所有带href属性的链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p ></p>
1
2
3
4
5
6
</body>
</html>如下
五.字体样式
1.span标签
一个“小容器”标签，本身没啥样式，主要用来包裹一小段文字或内容，方便单独设置样式（比如给一句话里的几个字改颜色），不像div会换行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
欢迎学习标签
</body>
</html>效果如下：
2.字体样式
控制文字本身的样子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>背景故事</h1>
<p >
2034年，人类首次接收到来自宇宙深处的讯息。这段来自深空文明的讯息并未能够被完整破译，这激发了人们对于宇宙和未知文明探索的好奇心，也衍生了各种有关于深空的传说，甚至影响了未来几十年人类历史的发展。
世界观</p>
<p>
Evol：只体现在少数人身上的特殊能力。拥有Evol的极少数人被称为Evolver，即超进化人类。超前的自然进化的基因使得Evolver的某方面能力得到强化，超越一般人类。经过数百年的变迁，Evol的存在已经不是秘密。被提取并运用到生活各方面中的Evol基因，也在进一步改变世界。
</p>
</body>
</html>
3.文本样式
控制文字整体的排版和外观
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>背景故事</h1>
<p >
2034年，人类首次接收到来自宇宙深处的讯息。这段来自深空文明的讯息并未能够被完整破译，这激发了人们对于宇宙和未知文明探索的好奇心，也衍生了各种有关于深空的传说，甚至影响了未来几十年人类历史的发展。
世界观</p>
<p >
Evol：只体现在少数人身上的特殊能力。拥有Evol的极少数人被称为Evolver，即超进化人类。超前的自然进化的基因使得Evolver的某方面能力得到强化，超越一般人类。经过数百年的变迁，Evol的存在已经不是秘密。被提取并运用到生活各方面中的Evol基因，也在进一步改变世界。
</p>
<p >12345</p>
<p >12345</p>
<p >12345</p>
</body>
</html>如下
样式继承：字体/文本属性自动继承
结语
CSS3现已支持动画、渐变、网格布局等高级特性，优秀的CSS代码应像好散文——清晰、简洁、富有表现力。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]