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;
  7. }
  8. </style>
  9. <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;
  7. }
  8. </style>
  9. <link rel="stylesheet" href="css/style.css">
  10. <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;
  7. }
  8. </style>
  9. <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>
  11. </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>
  16. </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;
  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>

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. PHP实现搜索联想功能(基于字典树算法)
  2. php比Node.js好用的五大理由
  3. php如何使用PHPAnalysis提取关键字中文分
  4. 简单的php多线程解决方法
  5. 教你用PHP实现微信小程序人脸识别刷脸登
  6. 谈一谈php面向对象的理解
  7. php实现文件上传到服务器(含代码)
  8. 十大最主流的PHP框架
  9. 新手应该知道的php多图片上传的实现
  10. php构建一个区块链(含源码)