码迷,mamicode.com
首页 > Web开发 > 详细

CSS(一)-- CSS的基本语法,选择器,伪元素,伪类

时间:2021-01-18 10:41:00      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:注意   指定元素   情况下   select   体验   选择器   开头   inf   :hover   

1.CSS

  • 层叠样式表
  • 网页实际上是一个多层的结构,通过css可以分别为网页的每一个层来设置样式,而最终我们能看到的只是网页的最上边的一层
  • 总之一句话,css用来设置网页中元素的样式

内联样式,行内样式

在标签内部通过style属性来设置元素的样式

<p style="color:red;font-size:60px;">hello world!</p>
  • 内联样式不能实现css样式的复用,因此开发时绝对不要使用内联样式

内部样式表

  • 将样式编写到head中的style标签中
  • 然后通过CSS选择器来选中元素并为其设置各种样式,可以同时为多个标签设置样式,并且修改时只需要修改一处即可全部应用
<style>
      p{
            color: green;
            font-size: 50px;
      }
</style>

缺点:不能多个HTML页面使用

外部样式表(最佳样式)

  • 可以将CSS样式表编写到一个外部的CSS文件中
  • 通过link标签引入css文件
<link rel="stylesheet" href="./style.css">
  • 外部样式需要通过link标签进行引入,所有网页都可以对其进行引入
  • 使用外部样式表,可以使用到浏览器的缓存机制,从而加快网页的加载速度,提高用户的体验

2.CSS的基本语法

<style>
      p{
            color: green;
            font-size: 50px;
      }
</style>

2.1注释

/* */

2.2CSS的选择器

通过选择器可以选中页面中的指定元素

  • 比如p的作用就是选中页面中所有的指定元素

2.2.1常用选择器

元素选择器

  • 作用:根据标签名来选中指定的元素
  • 语法:标签名
    例子:p{},h1{},div{}

id选择器

  • 作用:根据元素的id属性值选中一个元素
  • 语法:#id属性值
  • id不能重复
#red{
      color: red;
}

类选择器

  • 作用:class是一个标签的属性,他和id类似,但是可以多个元素用同一个class
  • 语法:.class{}
.blue{
      color:blue;
}
  • 可以同时为一个元素指定多个class属性
<h1 class="blue abc">hello world</h1>

通配选择器

  • 作用:选中页面中的所有元素
  • 语法:*
*{
      color:red;
}

2.2.2复合选择器

交集选择器

  • 作用:选中同时符合多个条件的元素
  • 语法:选择器1选择器2选择器3{}
    注意点:交集选择器中如果有元素选择器,必须使用元素选择器开头
div.red{
      font-size:30px;
}

并集选择器(选择器分组)

  • 作用: 同时选择多个选择器对应的元素
  • 语法: 选择器1,选择器2,选择器3{}
让元素h1和span都受到color:green;渲染
h1,span{
      color:green;
}

2.2.3关系选择器

html中的元素关系

父元素,子元素,祖先元素,后代元素,兄弟元素

子元素选择器

  • 作用:选中指定父元素的指定子元素
  • 语法:父元素 > 子元素
  • 范围: 直接子元素(只包括儿子辈)
为div直接包含的span设置一个字体颜色
而其子元素p下的span因为没有直接被div包含而不受到影响
<head>
      <style>
            div > span{
                  color:orange;
            }
      </style>
</head>
<body>
      <div>
            我是一个div
            <p>
                  我是div中的p元素
                  <span>我是p元素中的span</span>
            </p>
            <span>我是div中的span元素</span>**被选中**
      </div>

      <div>
            <span>
                  我是div外的span
            </span>**被选中**
      </div>
</body>
  • 如果只想选中第一个div下的span,只需要给其加一个class并识别食客
<head>
      <style>
            div.box > span{
                  color:orange;
            }
      </style>
</head>
<body>
      <div class="box">
            我是一个div
            <p>
                  我是div中的p元素
                  <span>我是p元素中的span</span>
            </p>
            <span>我是div中的span元素</span>**被选中**
      </div>

      <div>
            <span>
                  我是div外的span
            </span>**被选中**
      </div>
</body>

后代元素选择器

  • 作用:选中指定元素内的指定后代元素
  • 语法:祖先 后代
  • 范围:选中所有满足条件的后代,(不是子元素选择器的只有直接后代才行)
div span{
      color:skyblue;
}

兄弟元素选择器

  • 作用:选择下一个兄弟(并行关系)
  • 语法:前一个,下一个
选择p后面的span(后面的,离得最近的)
p + span{
      color:red;
}

选择下边所有的兄弟
p ~ span{
      color:red;
}

2.2.4属性选择器

根据元素的属性选择

  • 语法:元素[属性名]{},元素[属性名=属性值]{}
元素[属性]{}

[属性]{} <==> *[属性]{}//前面不写则默认为*,搜索所有元素的属性

[属性名 ^= 属性值]{} //选择属性值以指定值开头的元素
[属性名 $= 属性值]{} //选择属性值以指定值结尾的元素
[属性名 *= 属性值]{} //选择属性值中含有某值的元素
<head>
      <style>
            p[title]{
                  color:orange;
            }
            p[title=2]{
                  color:red;
            }
      </style>
</head>
<body>
      <p title="1">a</p>
      <p title="2">b</p>
      <p title="3">c</p>
</body>

2.2.5伪类、伪元素选择器

伪类(不存在的类,特殊的类)

  • 伪类用来描述一个元素的特殊状态
    比如:第一个子元素,被点击的元素,鼠标移入的元素
  • 伪类一般情况下都是使用:开头

排序位置的伪类

根据所有的子元素排序

  • :first-child 第一个子元素
  • :last-child 最后一个子元素
  • :nth-child() 选中第n个子元素
    • :nth-child(n) 选中所有子元素
    • :nth-child(2) 选中第二个子元素
    • :nth-child(2n)<==>:nth-child(even)选中偶数位的子元素
    • :nth-child(2n+1)<==>:nth-child(odd)选中奇数位的子元素

根据同类型的伪类进行排序

  • :first-of-type
  • :last-of-type
  • :nth-of-type()
    这几个伪类在功能上和上述类似,不同点是他们是在同类型元素中进行排序

2.3CSS的声明块

通过声明块来指定要为元素设置的样式

  • 声明是一个名值对结构,一个样式名对应一个样式值

否定伪类

将符合条件的元素从选择器中去除

<head>
      <style>
            ul > li:not(:nth-child(3)){//选中所有的li,除了第三个
                  color:red;
            }
      </style>
</head>
<body>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
</body>

超链接的伪类

  • link表示没访问过的链接
a.link{

}
  • visited表示访问过的链接
a.visited{
      
}

以上两个伪类只适用于a
由于隐私的原因,visted这个伪类只能修改链接的颜色

  • :hover用来表示鼠标移入的状态
a:hover{
      color:aqua;
      font-size: 50px;
}
  • :active 用来表示鼠标点击
    a:active{

}

伪元素选择器

不存在的元素

  • ::开头

  • ::first-letter
    元素内容的第一个字母


p::first-letter{            //选中p元素中的第一个字母
      font-size:50px;
}

<p>hello world!</p>
  • ::first-line
    表示第一行

  • ::selection 表示选中的内容

p::selection{
      background-color:greenyellow;
}

技术图片

  • ::after
    befor和after在开发中用的非常多
    元素最后的位置

  • ::before
    元素开始的位置
    before和after必须结合content使用

div::before{
      content:"abc";
      color:blue;
}
div::after{
      content:"xyz";
      color:blue;
}

技术图片

技术图片

CSS(一)-- CSS的基本语法,选择器,伪元素,伪类

标签:注意   指定元素   情况下   select   体验   选择器   开头   inf   :hover   

原文地址:https://www.cnblogs.com/psyduck/p/14286162.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!