- A+
网页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> 
