网页icon图标

配置网页的cion图标
在网站根目录下放置 favicon.ico 文件，浏览器在加载网页的时候会自动加载的。这个图片只能是 ico 格式，并且只能叫这个名字

如: css项目的根目录下

刷新网站没有生效，需要强制刷新，shift + 刷新

外部引入样式方式

<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <!-- rel: 指定引入文件和当前html的关系类型，如果不指定有些浏览器则不识别 -->
 <link rel="stylesheet" href="./position.css">
</head>

position.css

img {
 width: 100px;
 height: 100px;
}

优势：样式复用，html结构清晰，可触发浏览器缓存提高加载css速度

样式表的优先级

样式优先级: 行内样式 > 内部样式 = 外部样式，内部样式和外部样式按照加载顺序覆盖（后来者居上）

基本选择器

通配选择器

<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 * {
 color: red;
 }
 </style>
</head>
<body>
 <h1>与天奋斗，与地奋斗，与人奋斗，其乐无穷</h1>
 <p>学习CSS</p>
</body>

使用场景：可使用通配符选择器清除样式

元素选择器

<style>
 p {
 color: blue;
 }
</style>

对p标签设置样式，无法差异化设置样式

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .title {
 color: blue;
 }
 .size {
 font-size: 80px;
 }
 .custom-position {
 text-align: center;
 }
 </style>
</head>
<body>
 <p class="title size custom-position">学习CSS</p>
</body>
</html>

根据class名匹配元素，并为其添加样式。使用-用作名称单词连接，如custom-position

ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 #color {
 color: blue;
 }
 </style>
</head>
<body>
 <p id="color">学习CSS</p>
</body>
</html>

注意：不能是数字开头，如1color，尽量以字母、数字、下划线、短杠(-)组成，不要包含空格，区分大小写
一个元素只能有一个ID属性

复合选择器

交集选择器

选中同时符合多个条件的元素，选择器之间没有空格，保持连续

语法: 选择器1选择器2...选择器n {}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 p#size {
 font-size: 50px;
 }
 #size.color {
 color: red;
 }
 </style>
</head>
<body>
 <p id="size">学习CSS</p>
 <p class="color" id="size">id和类交集</p>
 <p class="color">学习CSS</p>
</body>
</html>

注意：交集标签最多包含一个元素标签，而且元素必须在开头紧跟着是ID选择器或者类选择器，如p#size

并集选择器

选中多个对应的元素，又称分组选择器

语法: 选择器1,选择器2...选择器n {}

逗号含义为或

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .first,
 .second,
 .third,
 h1,
 #id {
 color: red;
 font-size: 60px;
 }
 </style>
</head>
<body>
 <p class="first">学习CSSfirst</p>
 <p class="second">学习CSSsecond</p>
 <p class="third">学习CSSthird</p>
 <h1>学习CSSh1</h1>
 <p id="id">学习CSSid</p>
</body>
</html>

后代选择器

作用: 选中指定元素中，符合要求的后代元素
语法: 选择器1 选择器2 选择器2 ... 选择器n {}

选择器中的空格可以理解为 xxx中的，就是xxx的后代，选择器可以是任意类型的中的选择器，如ID选择器,class选择器,元素选择器,交集选择器,并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 ol li {
 color: red;
 font-size: 80px;
 }
 .change li {
 color: green;
 font-size: 60px;
 }
 </style>
</head>
<body>
 <ul>
 <li>孙中山</li>
 <li>陈独秀</li>
 <li>蒋介石</li>
 </ul>
 <ol>
 <li>教员</li>
 <div>
 <li>阶级</li>
 </div>
 </ol>
 <ol class="change">
 <li>改造我们的学习</li>
 </ol>
</body>
</html>

子代选择器

作用: 选中指定元素中，符合要求的子元素(儿子元素)
子代选择器又称子元素选择器或子选择器

>含义，可以理解为 xxx的子代。选择器可以是我们学过的任意一种

语法: 选择器1>选择器2>...选择器n {}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 div>a {
 color: red;
 font-size: 80px;
 }
 .sun>a{
 color: blue;
 font-size: 80px;
 }
 </style>
</head>
<body>
 <div>
 <a href="">张三</a>
 <a href="">李四</a>
 <a href="">王五</a>
 <p>
 <a href="">赵六</a>
 <div class="sun">
 <a class="sun" href="">孙七</a>
 </div>
 </p>
 </div>
</body>
</html>

兄弟选择器

相邻兄弟选择器: 选中指定元素后，符合条件的相邻兄弟元素
所谓相邻就是紧挨着它的下一个元素，睡在我下铺的兄弟。
语法: 选择器1+选择器2 {}
通用选择器: 选中指定元素后，符合条件的所有兄弟元素。睡在我下铺的所有兄弟
语法: 选择器1~选择器2 {}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 /* 选中div后紧紧相邻的兄弟p元素，相邻兄弟选择器 */
 div+p {
 color: red;
 font-size: 80px;
 }
 /* 选中div后所有的兄弟p元素，通用兄弟选择器 */
 /* div~p {
 color: red;
 font-size: 80px;
 } */
 /* 选中li相邻的li标签，选中li标签，那么1,2,3都可以选中，相邻的li，就只有第2,3个li，因此只有2,3的li选中 */
 li+li {
 color: blue;
 font-size: 80px;
 }
 </style>
</head>
<body>
 <p>java</p>
 <div>CSS</div>
 <p>前端</p>
 <p>后端</p>
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>
</body>
</html>

注意: 两种选择器选中的都是下面的兄弟元素。上面的元素不会选中

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 /* 第一种写法: 选中具有title属性的元素 */
 [title] {
 color: red;
 font-size: 80px;
 }
 /* 第二种写法: 选中具有title属性并且值等于css2的元素 */
 [title="css2"] {
 color: blue;
 font-size: 80px;
 }
 /* 第三种写法: 选中具有title属性并且值以t开头的的元素 */
 [title^="t"] {
 color: gray;
 font-size: 80px;
 }
 /* 第四种写法: 选中具有title属性并且值以4结尾的元素 */
 [title$="4"] {
 color: green;
 font-size: 80px;
 }
 /* 第五种写法: 选中具有title属性并且值包含e的元素 */
 [title*="e"] {
 color: hotpink;
 font-size: 80px;
 }
 </style>
</head>
<body>
 <p title="css1">第一种写法: 选中具有title属性的元素</p>
 <p title="css2">第二种写法: 选中具有title属性并且值等于css2的元素</p>
 <p title="tcss3">第三种写法: 选中具有title属性并且值义t开头的的元素</p>
 <p title="css4">第四种写法: 选中具有title属性并且值以4结尾的元素</p>
 <p title="css5e">第五种写法: 选中具有title属性并且值包含e的元素</p>
</body>
</html>

CSS学习