CSS介绍
- 随着HTML的发展，为了满足页面设计者的要求，HTML添加了很多显示功能，但是随着这些功能的增加，使得HTML越来越杂乱，HTML 页面也越来越臃肿，CSS便随之诞生。
- CSS 用于简化HTML标签，把关于样式部分的内容提取出来，进行单独的控制，使结构与样式分离开发。
- CSS 是以HTML为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，和 HTML 类似。
- CSS也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
html是一个架子和内容，css会去给它做美化样式的功能。（css封装了样式表，然后去和html结合起来去生成一个非常漂亮的页面）
CSS概念
CSS(Cascading Style Sheets)层叠样式表，又叫级联样式表（简称样式表）CSS文件后缀名为.css，CSS用于HTML文档中元素样式的定义。（可以将css写到html文件当中，熟悉了css之后再单独的去创建css，到那会后缀再以.css结尾）
为什么需要CSS
使用css的唯一目的就是让网页具有美观一致的页面
语法
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明
CSS使用方法
CSS引入方式：内联方式（行内样式）这个是跟着html标签走的，在HTML中如何使用css样式?
css给HTML留了一个口子，它有一个style的属性，在每一个标签里面都有style的属性，在style的属性里面就可以去定义css的样式。
<p style="color:red">在HTML中如何使用css样式</p>CSS引入方式：内部方式（内嵌样式），在head标签中使用，里面是选择对哪个标签生效
<style type="text/css">
p{
color:red;
}
</style>link 外部导入方式(推荐)，在head标签中使用
<link href="main.css" type="text/css" rel="stylesheet"/><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
<style type="text/css">
a{
color: blue;
}
</style>
</head>
<body>
<div>
<p style="color:red;">这是在div元素当中的段落</p>
<a>我是一串文字</a>
</div>
</body>
</html>
如果body里面有很多的p标签，或者很多的文本，那么就要使用标签选择器的了，也就是内部样式，这样一个css样式就可以解决很多标签。
CSS语法 选择器+样式 加载方式内部样式
选择器：需要改变样式的HTML元素 格式: 选择器{属性:值;属性:值; 属性:值;....}
常见选择器：标签选择器、类选择器、ID选择器、派生选择器(选择器并不是只有一个，可能有很多个，由不同类型的选择器来帮我们选择元素来给对应元素添加样式)
只要页面上有的元素都可以进行匹配，它的优先级是最低的，一般都是做样式初始化的时候
选择的是所有的标签，而不是一个标签。
- 示例1：h1元素设置样式
h1 {
color: red;
font-size: 14;
}- 示例2：多个元素设置样式
h1,h2,h3,h4,h5,h6 {
color: green;
}
html,body{
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
}- 示例3：子元素会继承最高级元素所有属性
body {
color: #000;
font-family: Verdana, serif; /*字体*/
}- 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css">
p{
color: blue;
}
body{
color: blueviolet;
}
</style>
</head>
<body>
<p>在HTML中如何使用css样式</p>
<a>我是一串文字</a>
</body>
</html>
可以看到设置了父标签body样式，那么body里面的标签也会被渲染为父元素的css样式。当子元素有自己定义样式，那么优先级是子元素自己的优先。
CSS语法 选择器+样式 加载方式外部样式
如果绑定在标签上面，或者后面的类选择器上面，这些其实都是可重复的。这就绑定在多个元素标签上面了。 ID选择器的目标就是绑定在特定的区域就行了。
- 使用“id”作为选择器，为指定id设置样式。
- 使用格式：#id名{样式...}
- 特点：每个id名称只能在HTML文档中出现一次，在实际开发中，id一般预留JavaScript使用
- 使用方式：
/*第一步: 给标签指定id*/
<p id="t">...</p>
/*第二步: 针对id设置样式*/
#t {
color: red;
}- 代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css">
#ap{
color: brown;
}
</style>
</head>
<body>
<p id="ap">在HTML中如何使用css样式</p>
</body>
</html>
（2）类选择器 可以重复绑定到多种标签，设置相同的样式
它其实是可以描述个性了，你想给哪个元素添加就给哪个元素添加。不用管它的同类型，不用管其他元素，只给当前想修饰的的元素添加上。你想给一个添加上就添加一个，你想给多个添加就给多个添加。灵活是优点，在整个开发过程当中类选择器使用频率是最高的。
- 使用“类名”作为选择器，为指定类设置样式。
- 使用格式：.类名{样式...}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css">
.ap{
color: brown;
}
</style>
</head>
<body>
<h1 class="ap">在HTML中如何使用css样式</h1>
<p class="ap">在HTML中如何使用css样式</p>
<a class="ap">在HTML中如何使用css样式</a>
</body>
</html>如果是多个选择器，那么使用空格隔开
.ap{
color: black;
}
.size{
font-size: 20px;
}
<a class="ap size">ppppppp</a>
(4)合并选择器
这张图是整个html的文本，第二层是head和body。这些整个html标签就是dom，这一个一个的标签就是dom节点，要对dom进行操作其实就是对这些html元素进行操作。
/*第一步：定义标签内容*/
<div class="c">
<h1>一号标题</h1>
<p>这是一个段落</p>
</div>
/*第二步：设置局部样式*/
<style type="text/css">
.c p {
color: red;
}
</style><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
<!-- <link href="main.css" type="text/css" rel="stylesheet"/> -->
</head>
<body>
<div class="c">
<h1>一号标题</h1>
<p>这是一个段落</p>
</div>
<style type="text/css">
.c p {
color: red;
}
</style>
</body>
</html>选择器优先级
内联选择器就是<p style=""></p> 。
385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
