一.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. }

更多相关文章

  1. 解决Android(安卓)SDK Manager不能更新的问题
  2. 【原】android通过adb wireless的使用
  3. Android系统原理与测试要点
  4. Android(安卓)使用Google官方组件搭建 MVVM架构
  5. android UI进阶之style和theme的使用
  6. Android菜鸟的成长笔记(28)——Google官方对Andoird 2.x提供的Acti
  7. Android属性动画的简单使用和总结
  8. SQLite在Android中的使用
  9. android之handler使用

随机推荐

  1. Android常用布局:线性布局和相对布局
  2. Android百度地图(一):百度地图定位sdk 类
  3. 说不懂Android系统构架,太亏了!
  4. android log 学习
  5. 有关Android调用服务全解析
  6. Android 之ndk开发
  7. Android的文件系统
  8. 解决Android(安卓)Studio 无法在线更新的
  9. Android实时直播,一千行java搞定不依赖jni
  10. android平台搭建详情