前端的初学日记（CSS篇）Day1

Mothes

已于 2023-01-05 14:36:32 修改

阅读量67

点赞数

文章标签： css html 前端

于 2023-01-05 14:25:18 首次发布

本文链接：https://blog.csdn.net/Mothes/article/details/128534877

版权

前端的初学日记（CSS篇）Day1

css简介

网页分成三个部分：结构（HTML）、表现（CSS）、行为（JavaScript）
css是层叠样式表，网页实际上是一个多层的结构，通过css可以分别为网页的每一个层来设计样式，而最终我们能看到的只是网页的最上边一层，总之一句话，css用来设置网页中元素的样式，使用css来修改元素的样式。

内联样式

第一种方式（内联样式行内样式）：在标签内通过style属性来设置元素的样式
格式如下:(请在编译器运行)

<p style="color:red">Love</p>
 <p style="color:red; font-size:30px">Love</p>

不推荐使用，使用内联样式只能对一个标签生效，如果希望影响到多个元素，必须在每一个元素中都复制一遍，并且当样式发生变化时，我们必须要一个一个修改，非常的不方便。

内部样式表

第二种方式（内部样式表），将样式编写到head中的style标签里，然后通过css的选择器来选中元素并为其设置各种样式。可以同时为多个标签设置样式，并且修改时只需修改一个即可全部应用。
格式如下:(请在编译器运行)

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    p{
      color:red;
      font-size:50px;
    }
  </style>
</head>
<body>
 <p>Love</p>
 <p>Love</p>

</body>内部样式表更加方便，对样式进行使用
问题：我们的内部样式表只能对一个网页起作用，它里面的样式不能跨页面进行复用

外部样式表

第三种方式（外部样式表）最佳实践
可以将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件中
通过link标签来引入外部的CSS文件，建立CSS文件1.css文件
<link rel="stylesheet" href="./1.css">stylesheet:样式表 href：路径
外部标签需要通过link标签来引入，意味着只要想要使用这些样式的网页都可以对其进行引用，使样式可以在不同页面之间进行复用。
将样式编写到外部的css文件中，可以最大限度的使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

CSS语法

style标签内部不属于html，应遵循css语法规范
注释：/* */
CSS中的注释内容会自动被浏览器忽略

声明块

声明块:通过声明块来指定要为元素设置的样式,声明块由一个一个的声明组成.
什么是声明:color:red;/font-size:40px;就是声明
声明就是一个名值对结构，一个样式名对应一个样式值，名和值之间以：连接，以；结尾
最后一个；可以省略，中间的；不可以省略，我们可以为元素设置那些样式名，那些样式名设置那些值。

选择器

通过选择器可以选中页面中的指定元素，比如p的作用就是选中页面中所有的p元素
格式如下:(请在编译器运行)

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
 <style>
  p{
   color:red;
   font-size:50px;
   }
  </style>
</head>
<body>
     <p>Love</p>
     <p>Love</p> 
     <h1>you</h1> 
</body>

<style>
  p{
   color:red;
   font-size:50px;
   }
   h1{
   color:blue;
   font-size:50px;
   }
  </style>
</head>
<body>
     <p>Love</p>
     <p>Love</p> 
     <h1>you</h1> 
</body>

想选什么就写什么例如h1标签/p标签
可以在CSS网址上选择select就是选择器

元素选择器

作用：根据标签名来选中指定的元素
语法：标签名{}
例：p{}、h1{}、div{}

p{
   color:red;
    }

id选择器

作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
例：#box{}、#red{}

 <style>
   #box{
     color:red;
     font-size:50px;
   }
  </style>
</head>
<body>
     <p id="box">Love</p>
     <p>Love</p> 
     <h1>you</h1> 
</body>

id不能重复，即使效果行也不行

类选择器

作用：根据元素的class属性值选中一组元素
语法：.class属性值
将某几句话设置属性，class是一个标签属性，它和id类似，不同的是class可以重复使用
一·、我们可以通过class属性来为标签分组

 <style>
   .box{
     color:red;
     font-size:50px;
   }
  </style>
</head>
<body>
     <p class="box">Love</p>
     <p>Love</p> 
     <h1 class="box">you</h1> 
</body>

二·、可以同时为一个元素指定多个class元素

<style>
   .abc{
     font-size:50px;
   }
   .box{
     color:red;
   }
  </style>
</head>
<body>
     <p class="box abc">Love</p>
     <p>Love</p> 
     <h1 class="box">you</h1> 
</body>

通配选择器

作用：选中页面中的所有元素
语法：*

<style>
     *{
       font-size:50px;
       color:red;
   }
  </style>
</head>
<body>
     <p class="box abc">Love</p>
     <p>Love</p> 
     <h1 class="box">you</h1> 
</body>

复合选择器

交集选择器

作用：选中同时复合多个条件的元素
语法：选择器1.选择器2.选择器n{}
注意：交集选择器中如果有元素选择器，必须使用元素选择器开头

<style>
   .red{
     color:red
   }
   div.red2{
     font-size:30px
   }
  </style>
</head>
<body>
     <div class="red">我是div</div>
     <p class="red">我是p元素</p>
     <div class="red2">我是div2</div>
</body>

.a.b.c{
color:blue;
}
同时满足abc

并集选择器（选择器分组）

作用：同时选中多个选择器对应的元素（不只是元素，id也行）
语法：选择器1，选择器2，选择器n{}

<style>
   h1,span{
     color:red;
   }
  </style>
</head>
<body>
     <h1>我是标题</h1>
     <span>哈哈哈</span>
</body>

关系选择器

父元素：直接包含子元素的元素叫父元素
子元素：直接被父元素包含的元素叫子元素
祖先元素：直接或间接包含后代的元素叫祖先元素，一个元素的父元素也是它的祖先元素
后代元素：直接或间接被包含的元素叫祖先元素，子元素也是后代元素
兄弟元素：拥有相同父元素的是兄弟元素

子元素选择器

作用：选中指定父元素的指定子元素
语法：父元素 > 子元素

<style>
     div > p{  
     color:red;
  }
  </style> 
</head>
<body>
  
<div>
  <span>
    love
     <p>you </p>
  </span>
  <p>you</p>
  </div>
  
</body>

后代元素选择器

作用：选中指定元素内的指定后代元素
语法：祖先后代

<style>
     div p{  
     color:red;
  }
  </style> 
</head>
<body>
  
<div>
  <span>
    love
     <p>you </p>
  </span>
  <p>you</p>
  </div>
  
</body>

兄弟选择器

选择下一个兄弟
语法：前一个兄弟：+ 下一个兄弟

<style>
    p + span{
      color:red;
    }
  </style>
</head>
<body>
  <p>love</p>
  <span>you</span>
    <span>you</span>
</body>

选择下边所有的兄弟：
语法：兄 ~ 弟

<style>
    p ~ span{
      color:red;
    }
  </style>
</head>
<body>
  <p>love</p>
  <span>you</span>
    <span>you</span>
</body>

属性选择器

[属性名]选择含有指定属性的元素

<style>
    p[title]{
      color:red;
    }
  </style>
</head>
<body>
  <p title="abc">love</p>
  <p>love</p>
  <p title="hello">you</p>
</body>

[属性名=属性值]选择含有指定属性和属性值的元素

<style>
    p[title=abc]{
      color:red;
    }
  </style>
</head>
<body>
  <p title="abc">love</p>
  <p title="hello">you</p>
</body>

[属性名^=属性值]选择属性值以指定值开头的元素

<style>
    p[title^=abc]{
      color:red;
    }
  </style>
</head>
<body>
  <p title="abc">love</p>
  <p title="abc hello">you</p>
  <p title="hello abc">you</p>
</body>

[属性名$=属性值]选择属性值以指定值结尾的元素

<style>
    p[title$=abc]{
      color:red;
    }
  </style>
</head>
<body>
  <p title="abc">love</p>
  <p title="abc hello">you</p>
  <p title="hello abc">you</p>
</body>

[属性名*=属性值]]选择属性值中含有某值的元素

<style>
    p[title*=abc]{
      color:red;
    }
  </style>
</head>
<body>
  <p title="abc">love</p>
  <p title="abc hello">you</p>
  <p title="helabclo">you</p>
  <p title="hello abc">you</p>

伪类选择器

伪类：（不存在的类、特殊的类）伪类用来描述一个元素的特殊状态，比如第一个子元素、被点击的元素、鼠标移入的元素等等，都是元素所处的特殊状态。
特点：伪类一般情况下都使用：开头
第一个子元素 :first-child
最后一个子元素:last-child
选中第n个子元素:nth-child()(n的范围0-正无穷）
even/2n表示选中偶数位的元素
odd/2n+1表示选中奇数位的元素
以上这些伪类根据所有的子元素进行排序
例：

(ul>li*5+Tab生成列表）
<style>
     ul > li:first-child{
  color:red;
  }
  </style>
 
</head>
<body>
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ul>
</body>

例2：

 <style>
     ul > li:nth-child(2n+1){
  color:red;
  }
  </style>
 
</head>
<body>
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ul>
</body>

如果在ul标签里放一个其他元素就不行了，在此由以下几个标签来解决
:first-of-type/:last-of-type/:nth-of-type()
这几个伪类的功能和上述的类似，不同点是他们是在同类型中进行排序

<style>
     ul > li:first-of-type{
  color:red;
  }
  </style>
 
</head>
<body>
<ul>
  <span>1</span>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ul>
</body>

:not()否定伪类（除了的意思）将符合条件的元素从选择器中去除

 <style>
     ul > li:not(:nth-child(3)){
  color:yellowgreen;
  }
  </style> 
</head>
<body>
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ul>
</body>

超链接伪类（a元素的伪类）

link用来表示没访问过的链接·（正常的链接）
visited用来表示访问过的链接（由于隐私问题，只能修改链接的颜色）
hover用来表示鼠标移入的状态
active用来表示鼠标点击的状态

<style>
a:link{color:orange;}
a:visited{color:red; }   
a:hover{color:aqua; font-size:50px;}
a:active{color:yellowgreen;}
  </style>
</head>
<body>
<a href="https://www.baidu.com/">百度一下，你就知道</a>
</body>

伪元素选择器

伪元素：表示页面中一些特殊的并不真实存在的元素（特殊的位置）
伪元素使用::开头
::first-lettle表示第一个字母

 <style>
   p::first-letter{
     font-size:50px;
   }
  </style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique illo adipisci 
cupiditate illum in iusto explicabo vero ad nemo laboriosam natus hic sint ut, sit,
 laborum veritatis. Tempora asperiores, fuga.</p>
</body>

::first-line表示第一行

<style>
   p::first-line{
     background:yellow;
   }
  </style>

::selection表示选中的内容

<style>
   p::selection{
     background-color:greenyellow;
   }
  </style>

::after表示元素的结束
::before表示元素的开始
这两个结合content属性来使用

<style>
   div::before{
     content:'abc';
     color:red;
   }
   div::after{
     content:'haha';
     color:blue;
   }
  </style>
</head>
<body>
<div>我是一个div</div>
</body>