CSS学习

  • CSS学习已关闭评论
  • 35 次浏览
  • A+
所属分类:Web前端
摘要

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

网页icon图标

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

如: css项目的根目录下
CSS学习

刷新网站没有生效,需要强制刷新,shift + 刷新
CSS学习

外部引入样式方式

<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速度

样式表的优先级

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

CSS学习

CSS学习

基本选择器

通配选择器

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

CSS学习

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

元素选择器

<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> 

CSS学习

根据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属性

CSS学习

复合选择器

交集选择器

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

语法: 选择器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> 

CSS学习

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

并集选择器

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

语法: 选择器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> 

CSS学习

CSS学习

后代选择器

作用: 选中指定元素中,符合要求的后代元素
语法: 选择器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> 

CSS学习

CSS学习

子代选择器

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

>含义,可以理解为 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> 

CSS学习

CSS学习

兄弟选择器

  • 相邻兄弟选择器: 选中指定元素后,符合条件的相邻兄弟元素
    所谓相邻就是紧挨着它的下一个元素,睡在我下铺的兄弟。

  • 语法: 选择器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> 

CSS学习

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

属性选择器

<!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学习

CSS学习