css基础知识（样式及选择器）

首先说明css的语法结构：选择器{属性:属性值;属性:属性值;}注意分号是一定要写，不写下面的属性就没效果

一，css引入方式

分为四种引入方式：1，行内样式 2，内嵌样式 3，外链样式 4，导入样式。

1，行内样式（行内样式又称标签样式，就是在标签里加style属性）语法格式:<标签 style="样式:样式名;样式:样式名;"></标签>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css样式</title>
</head>
<body>
<h2 style="color:red;text-align:center">这是一个标题</h2>
</body>
</html>

2，内嵌样式（样式写在style标签里面，style标签写在head标签里面）

语法格式:

<head><style type="text/css">选择器{样式:样式名样式:样式名......}选择器{样式:样式名样式:样式名......}</style></head>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css样式</title><style type="text/css">h2{color:red;text-align:center;} </style>
</head>
<body>
<h2>这是一个标题</h2>
</body>
</html>

3,外链样式（最标准样式）

第一步：新建一个.css的文件，专门写css样式

第二步：head标签内写入link标签 (link标签可以存在在body标签内，但是不推荐使用)

第三步：link 里href属性将css文件引入（路径（绝对路径和相对路径））

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>/*我这里用的是相对路径*/<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body><h2>麦田里的守望者</h2><h3>平凡的世界</h3></body>
</html>

4，导入样式（和外链样式一样需要新建，然后引入）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css样式</title><style type="text/css">@import url(1.css);</style>
</head>
<body><h2>麦田里的守望者</h2><h3>平凡的世界</h3>
</body>
</html>

二，选择器

基本选择器：1，id选择器 2，类选择器 3，标签选择器 4，通配符选择器

1，id选择器（给标签取一个id名，用符号#id名赋值）注意：值不能为数字或中文

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>id选择器</title><style type="text/css">#one{color:red;}</style>
</head>
<body><p id="one">小王子</p>
</body>
</html>

2，类选择器（class选择器）是给class属性赋值，然后用.符号与值结合。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>类选择器</title><style type="text/css">.one{ color:red;}</style>
</head>
<body><p class="one">三国演义</p>
</body>
</html>

3，标签选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"<title>标签选择器</title><style type="text/css">h3{color:blue;}</style>
</head>
<body><h3>围城</h3>
</body>
</html>

4，通配选择器（把还没有赋值的标签全部赋值）

<!DOCTYPE>
<html lang="en">
<head><meta charset="UTF-8"><title>通配选择器</title><style type="text/css">#one{color:red;  }.one{color:blue;  }p{color:cyan;}*{color:pink; }</style>
</head>
<body><h1 id="one">琴</h1><h2 class="one">棋</h2><p>书</p><div>画</div><h3>游</h3>
</body>

包含选择器：1，子代选择器 2，后代选择器 3，分组选择器

1，子代选择器（子元素选择器）需要用大于符号（子结合符）连接。

获取某标签的第一级标签

<! DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>什么的第一级标签</title></head>
<body>
<h1><p>喜欢<b>看个</b>书</p>
</h1></body>
</html>

上面这个代码<h1>标签的第一级标签是<p>标签，<b>标签则是第二级标签

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">/*用大于符号连接第一级子标签*/h1 > strong {color:red;}
</style>
</head><body>
<h1>There is <strong>very</strong> <strong>very</strong> hot.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>

2，后代选择器（选取一个标签内的所有子标签，不分等级）。格式：标签子标签

例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。

因此，ul em 将会选择以下标记中的所有 em 元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title><style type="text/css">ul em {color:red; font-weight:bold;}</style>
</head>
<body>
<ul><li>List item 1<ol><li>List item 1-1</li><li>List item 1-2</li><li>List item 1-3<ol><li>List item 1-3-1</li><li>List item <em>1-3-2</em></li><li>List item 1-3-3</li></ol></li><li>List item 1-4</li></ol></li><li>List item 2</li><li>List item 3</li>
</ul>
</body>
</html>

3，分组选择器（把想要有相同效果的标签放在一起，用逗号隔开）

<html>
<head>
<style type="text/css">
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
</style>
</head><body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<h3>这是 heading 3</h3>
<h4>这是 heading 4</h4>
<p>这是一段<b>普通</b>的段落文本。</p>
</body>
</html>

属性选择器（四种）

一，简单属性选择

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

格式[属性]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>属性选择器</title><style type="text/css">[title]{color:red;}</style>
</head>
<body><div title="one">这是一个div</div><div title="two">这是第二个div</div>
</body>
</html>

二，根据具体属性值选择

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>属性选择器</title><style type="text/css">div[title="one"]{color:red;}</style>
</head>
<body><div title="one">这是一个div</div><div title="two">这是第二个div</div>
</body>
</html>

三，根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>属性选择器</title><style type="text/css">div[title~="one"]{color:red;}</style>
</head>
<body><div title="one">这是一个div</div><div title="two one">这是第二个div</div>
</body>
</html>

四，子串匹配属性选择器

任何属性都可以使用这些选择器

类型	描述
[title^="o"]	选择 title 属性值以 "o" 开头的所有元素
[title$="o"]	选择 title 属性值以 "o" 结尾的所有元素
[title*="r"]	选择 title 属性值中包含子串 "r" 的所有元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>属性选择器</title><style type="text/css">[title^="o"]{color: red;}[title$="o"]{color: blue;}[title*="r"]{color: pink;}</style>
</head>
<body><div title="one">这是一个div</div><div title="two">这是第二个div</div><div title="three">这是第三个div</div><div title="four">这是第四个div</div>
</body>
</html>

五，特定属性选择类型

[属性|=值]

用于选取带有以指定值开头的属性值的元素，该值必须是完整单词

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>属性选择器</title><style type="text/css">*[title|=two]{color: red;}</style>
</head>
<body><div title="one">这是一个div</div><div title="two-one">这是第二个div</div><div title="two">这是第三个div</div><div title="four">这是第四个div</div>
</body>
</html>