CSS自定义的样式及来源

CSS自定义样式的来源

CSS自定义来源分为三种
1.内联样式。使用style=""
实例

  1. <h1 style="color: rgb(255, 60, 0); text-align: center; font-size: 100px;">Hello world</h1>

效果图如下：

2.文档样式。使用<style></style>标签
实例：

  1. <style>
  2.         /* h1为标签选择器 */
  3.         h1 {
  4.             color: red;
  5.             text-align: center;
  6.             font-size: 100px;
  8.         }
  9.     </style>
  10.     <h1>Hello world</h1>

实例：

3.外部样式。引入外部文件使用<link>标签引用
实例

  1. <link rel="stylesheet" href="css/style.css">
  2. h1 {
  3.     color: rgb(157, 255, 0);
  4.     text-align: center;
  5.     font-size: 100px;    
  6. }

效果图如下：

来源样式的优先级

1.同时引用内联、文档、外部样式

  1. <style>
  2.         /* h1为标签选择器 */
  3.         h1 {
  4.             color: rgb(15, 50, 248);
  5.             text-align: center;
  6.             font-size: 100px;
  8.         }
  9.     </style>
  10.     <link rel="stylesheet" href="css/style.css">
  11.     <h1 style="color: rgb(255, 60, 0); text-align: center; font-size: 100px;">Hello world</h1>


2.同时引用文档、外部样式

2.同时引用文档、外部样式

总结：一般情况下内嵌>文档>外部,当外部和文档样式书写顺序有变化是优先使用最近的。

常用选择器的使用及权重分析

1.标签选择选择器
标签 {
样式声明
}

  1.  <style>
  2.         /* h1为标签选择器 */
  3.         h1 {
  4.             color: rgb(15, 50, 248);
  5.             text-align: center;
  6.             font-size: 100px;
  8.      }
  10.     </style>
  12.     <h1>Hello world</h1>

实例

2.属性选择器
2.1 标签[title=’box’]

2.2.元素{样式声明} 当属性为class是的简写
2.3#元素{样式声明} 当属性为id的简写
以上两种是常用的简写，不常用写法参考2.1

3.群组选择器使用 h2#lime1 , h2.lime2 { }

  1.     <style>
  2.         /* h1为标签选择器 */
  3.          h2.lime1 , h2#lime2{
  4.             color: rgb(15, 50, 248);
  5.             text-align: center;
  6.             font-size: 50px;
  7.      }
  8.     </style>
  9.     <h2 class="lime1">Hello world</h2>
  10.     <h2 id="lime2">Hello php.cn</h2>
  11.     <h2 class="lime3">hello baidu</h2>
  12.     <h2 class="lime4">hellp qq.com</h2>

运行实例：

4.上下文选择器
4.1 子元素(父子)选择器 >

  1.      ul > li {
  2.             color: rgb(89, 0, 255);
  3.             text-align: center;
  4.             font-size: 50px;
  5.         }
  6.         <ul>
  7.         <li>hello1</li>
  8.         <li>hello2</li>
  9.         <li>hello3</li>
  10.         <li>hello4</li>
  12.     </ul>

运行实例：

4.2 后代选择器 空格

  1.   .list .lime {
  2.             color: rgb(89, 0, 255);
  3.             text-align: center;
  4.             font-size: 50px;
  5.          <ul class="list">
  6.         <li>hello1</li>
  7.         <li>hello2
  8.             <ul>
  9.                 <li class="lime">lime</li>
  10.                 <li class="lime">lime</li>
  11.                 <li class="lime">lime</li>
  12.             </ul>
  13.         </li>
  14.         <li>hello3</li>
  15.         <li>hello4</li>
  17.     </ul>

运行实例：

4.3兄弟选择器 +
4.3.1 

  1.   .lime1 + .lime2 {
  2.             color: red;
  3.             text-align: center;
  4.             font-size: 50px;
  5.         }
  6.          <ul class="list">
  7.         <li>hello1</li>
  8.         <li class="lime1">hello2
  9.             <ul>
  10.                 <li class="lime">lime</li>
  11.                 <li class="lime">lime</li>
  12.                 <li class="lime">lime</li>
  13.             </ul>
  14.         </li>
  15.         <li class="lime2">hello3</li>
  16.         <li>hello4</li>

运行实例

4.3.2 相邻兄弟选择器 

  1.    .list > .lime.er + * {
  2.             color: royalblue;
  3.             font-size: 50px; 
  4.         }
  5.          <ul class="list">
  6.             <li class="lime">lime1</li>
  7.             <li class="lime er">lime2</li>
  8.             <li class="lime">lime3</li>
  9.             <li class="lime">lime4</li>
  10.             <li class="lime">lime5</li>
  11.         </ul>

4.3.3 所有兄弟选择器

  1.    .list > .lime.er ~ * {
  2.             color: royalblue;
  3.             font-size: 50px;
  5.         }
  6.         <ul class="list">
  7.             <li class="lime">lime1</li>
  8.             <li class="lime er">lime2</li>
  9.             <li class="lime">lime3</li>
  10.             <li class="lime">lime4</li>
  11.             <li class="lime">lime5</li>
  12.         </ul>

5.通配符选择器 *

  1.    * {
  2.             color: blue;
  3.             font-size: 50px;
  4.         }
  5.         <ul class="list">
  6.             <li class="lime">lime1</li>
  7.             <li class="lime er">lime2</li>
  8.             <li class="lime">lime3</li>
  9.             <li class="lime">lime4</li>
  10.             <li class="lime">lime5</li>
  11.         </ul>

选择器权重分析

百十个
idclasstag
  1. /*权重001 个位为1表示有一个标签，同理个位为2两个标签以此类推 */
  2. h1 {color: red;}
  3. /* 010 十位为1 表示有一个class属性。权重比标签高*/
  4. .lime {color: blue;}
  5. <h1 class="lime">你好</h1>

实例：

优先运行010也就是``.lime{color: blue}

  1. /* 百位为1 表示有一个id标签，权重最高优先执行id标签*/
  2. #lime1 {color: reb;}
  3. .lime {color: bule;}
  4. <h1 id="lime1" class="lime">你好1</h1>

更多相关文章

  1. html常用标签与应用场景
  2. 爆肝之我在html学导航表格
  3. HTMLa标签，img标签配合三种列表标签写出图片导航演示
  4. HTML常用标签及应用场景
  5. html基础：表单元素及多媒体标签学习及实战
  6. html表单元素以及多媒体标签
  7. 内联框架标签与多媒体示例
  8. 跟着大牛学PHP--HTML标签和表格
  9. Android(安卓)EventLog各种标签含义

随机推荐

  1. android 4.0 兼容性问题 java.lang.NoSuc
  2. Android多媒体开发 Pro Android(安卓)Med
  3. Android中的图片处理——色彩、形状拉伸
  4. 自定义RatingBar
  5. android中的按钮以图片的方式显示_基础篇
  6. Android(安卓)如何保证App切换到后台，或页
  7. android ksoap2 访问https javax.net.ssl
  8. android 设置头像以及裁剪功能
  9. Android--Intent常用（拨号，浏览器，联系人，Wi-
  10. Android(安卓)网星工具箱Beta版