欢迎光临
我的个人博客网站

CSS编写及选择器


设置CSS样式的方式

  1. 内联样式(行内样式)

    • 在标签内通过style属性来设置元素的样式
    <p style="color:red;font-size:60px"><!--设置字体颜色和大小-->     CSS设置样式 </p> 

    问题:使用内联样式,只能对一个标签生效

    ​ 复用程度不高,维护起来比较麻烦

  2. 内部样式表

    • 将样式编写到head标签中的style标签里,然后通过css选择器选中元素,并为其设置各种样式。
    <style>     p{  /*标签选择器*/         color:green;         font-size:50px;     } </style> 

    好处:可同时为多个标签设置样式,更加方便对样式进行复用

    问题:内部样式表只能对一个网页起作用,不能跨页面复用

  3. 外部样式表(最佳实现)

    • 可以将css样式编写到外部的css文件中

      然后通过link标签来引入到对应的网页中

    <head> <!--在head标签中编写--> <link rel="stylesheet" href="./style.css">   </head>      

    好处 :样式可以在不同页面之间进行复用

    ​ 可以使用到浏览器的缓存机制,加快网页的加载速度,提高用户体验。

CSS基本语法

css中的注释

<style> /*    注释内容      */ </style> 

声明块

  • 声明块:通过声明块来指定为元素设置的样式,是一个名值对 —名和值之间以 : 连接,以 ; 结尾

选择器

  • 定义:通过选择器可以选中页面中的指定元素
常用选择器
  1. 元素选择器

    • 作用:根据标签名选中指定的元素
    • 语法:标签名{ }
    • 例:p{ } 、div{ } 、h1{ }
  2. id选择器

    • 作用:根据元素的id属性值选中一个元素
    • 语法:#id属性值{}
    • 例 #box{ }、#red{ }
  3. 类选择器

    • 作用:根据元素的class属性值选中一组元素
    • 语法: .class属性值{ }
    • 例 .box{ } 、.bottom{ }
    • 补充:class是一个标签的属性,和id类似,不同的是class可以重复使用,可以为同个元素指定多个class属性
  4. 适配选择器

    • 作用:选中页面中的所有元素
    • 语法:*{ }
复合选择器
  1. 交集选择器

    • 作用:选中同时符合多个条件的元素

    • 语法:选择器1选择器2选择器3…n { }

      选择器之间没有空格

      p.box.num{              color: blue;              font-size: 50px;             }  
    • :交集选择器中如果有元素选择器,必须使用元素选择器开头

  2. 并集选择器

    • 作用:同时选择多个选择器对应的元素
    • 语法:选择器1,选择器2,选择器3…选择器n{ }
    • 例 #box,p,h1,div,span{}
关系选择器
  • 相关概念

    • 父元素:直接包含子元素的元素

    • 子元素:直接被父元素包含的元素

    • 祖先元素:直接或间接包含后代元素

      ​ 一个元素的父元素也是他的祖先元素

    • 后代元素:直接或间接被祖先元素包含的元素

      ​ 子元素也是后代元素

    • 兄弟元素:拥有相同父元素的元素

  1. 子元素选择器
    • 作用:选中指定父元素的指定子元素
    • 语法:父元素>子元素
  2. 后代元素选择器
    • 作用:选中选中指定元素内的指定后代元素
    • 语法:祖先 后代
  3. 兄弟选择器
    • 作用 ①:选择下一个兄弟
    • 语法:前一个+后一个
    • 作用 ②:选择下边所有的兄弟
    • 语法:兄~弟
属性选择器
  • 语法:[属性名] 选择含有指定属性的元素

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

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

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

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

伪类选择器
  • 伪类(不存在的类,特殊的类)

    • 说明:描述一个元素的特殊状态

    • 一般使用 :开头

    • :first-child 第一个子元素

      :last-child 最后一个子元素

      :nth-child(n) 选中第n个子元素

      ​ 特殊值:n 第n个 n的范围0~正无穷

      ​ even/2n选中偶数位的元素

      ​ odd/2n+1 选中奇数位的元素

    • :first-of-type

      :last-of-type

      :nth-of-type()

      这几个伪类功能与上面的类似,不同点是他们是在同类型元素中进行排序

    • : not() 否定伪类,将符合条件的元素从选择器中去除

a标签特有的伪类
  • :link 用来表示没访问过的链接(正常的链接)
  • :visited 表示访问过的链接 (由于隐私原因,visited这个伪类只能修改链接的颜色
  • :hover 表示鼠标移入的状态
  • :active用来表示鼠标点击
伪元素选择器
  • 伪元素:表示页面中一些特殊的并不真实存在的元素(特殊的位置)

  • 伪元素使用 ::开头

  1. ::first-letter 表示第一个字母、

  2. ::first-line 表示第一行

  3. ::selection 表示选中的内容

  4. ::before 元素的开始

    ::after 元素的最后 必须结合content属性来使用

    <style> p::before{          content:"【";          color: saddlebrown;      }   p::after{          content:"】";      } </style> 

选择器的权重及样式继承

样式的继承

我们为一个元素设置样式同时也会应用到它的后代元素上,发生在祖先元素和后代元素之间

:并不是所有的样式都会被继承,比如 背景相关的布局

选择器的权重

样式冲突:通过不同的选择器选中相同的元素,并且为相同的样式设置不同的值时

内联样式 1,0,0,0

id选择器 0,1,0,0

类和伪类选择器 0,0,1,0

元素选择器 0,0,0,1

通配符选择器 0,0,0,0

继承的样式 没有优先级

  • 优先级计算相同,此时优先使用靠下的样式

  • 比较优先级时,需将所有的选择器的优先级相加,最后优先级越高,则越优先显示

  • 分组选择器单独计算

  • 选择器的累加不会超过其最大的数量级(类选择器再高也不会超过id选择器)

:可以在某一个样式后添加!important 则此样式会获得最高的优先级,甚至超过内联样式(一般不会使用)

赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS编写及选择器
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏