博客列表 >跟着大牛学PHP--CSS样式和选择器

跟着大牛学PHP--CSS样式和选择器

奔跑的金豆
奔跑的金豆原创
2022年07月07日 19:11:29233浏览

一.CSS样式表和选择器

1.插入样式表的方法

  • 外部样式
  • 内部样式
  • 内联样式

外部样式表

通过使用<link>标签调用外部样式表,一般加在HTML文档头部(head).

  1. <link rel="stylesheet" href="test.css">

通过<link>标签关联外部样式表(test.css)

内部样式表

使用<style>标签在HTML文档内部定义内部样式表。

  1. <style>
  2. he {color: blue;}
  3. hr {background-color: black;}
  4. </style>

内联样式

又称“行内样式”,即在相关标签内使用style属性来定义样式

  1. <p style="color:blue"></p>

style属性仅在P标签内应用

优先级

一般情况下:内联样式>内部样式>外部样式>浏览器默认样式
自定义样式>浏览器默认样式>继承样式

2.CSS常用选择器

标签选择器

  1. h1 {
  2. color: black;
  3. background: red;
  4. }

属性选择器

  1. 一般属性使用方法:
  2. h2[title='name'] {
  3. color: aquamarine;
  4. }
  5. class属性使用方法(使用符号.):
  6. h2.name2 {
  7. color: aquamarine;
  8. }
  9. id属性使用方法(使用符号#):
  10. h2#name1 {
  11. color: aquamarine;
  12. }

群组选择器

  1. h2#name1,h2.name2 {
  2. color: aquamarine;
  3. }

通配选择器(全选所有父级下面子级的所有标签 例如: body)

  1. body * {
  2. background-color: aqua;
  3. }

3.上下文选择器

子元素选择器(使用符号>)

  1. <ul class="list">
  2. <li class="item">itme1</li>
  3. <li class="item">itme2</li>
  4. <li class="item">itme3</li>
  5. </ul>
  6. 使用方法如下:
  7. .list>.item {
  8. background-color: aqua;
  9. }

后代元素选择器(使用空格符号)

  1. <ul class="list">
  2. <li class="item">itme1</li>
  3. <li class="item">itme2</li>
  4. <ul>
  5. <li class="item">itme2-1</li>
  6. <li class="item">itme2-2</li>
  7. </ul>
  8. <li class="item">itme3</li>
  9. 使用方法如下(所有元素生效):
  10. .list .itme {
  11. background-color: aqua;
  12. }

相邻兄弟选择器

  1. <ul class="list">
  2. <li class="item">itme1</li>
  3. <li class="item two">itme2</li>
  4. <li class="item">itme3</li>
  5. </ul>
  6. 使用方法如下(使用+符号,并带上通配*符号):
  7. .list>.item.two + * {
  8. background-color: aqua;
  9. }

所有兄弟选择器

  1. <ul class="list">
  2. <li class="item">itme1</li>
  3. <li class="item two">itme2</li>
  4. <li class="item">itme3</li>
  5. <li class="item">itme4</li>
  6. <li class="item">itme5</li>
  7. </ul>
  8. 使用方法如下(使用~符号,并带上通配*符号):
  9. .list>.item.two ~ * {
  10. background-color: aqua;
  11. }
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议