在标签上设置style属性：

background-color：#2459a2；

height：48px；

。。。

编写CSS样式：

如何注释：/* 或 */

一. 在标签的属性中编写

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

       <div style="background-color: aqua;height:48px;">12fhjkhjjk44</div>

       <div style="background-color: red;height:48px">ff1537ff</div>

       <div style="background-color: pink;height: 48px">fhajhjak</div>

 </body>

 </html>

二. 写在head里面，style标签中写样式

1. id选择区

#i1{

background-color: #2459a2;

height: 48px;

}

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         #i1{

             background-color: aqua;height:48px;

         }

         #i2{

             background-color: aqua;height:48px;

         }

     </style>

 </head>

 <body>

       <div id="i1">12fhjkhjjk44</div>

       <div id="i2">ff1537ff</div>

       <div style="background-color: pink;height: 48px">fhajhjak</div>

 </body>

 </html>

2. class选择器

.名称{

...

}

<标签 class=‘名称’>    </标签>

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         #i1{

             background-color: aqua;height:48px;

         }

         #i2{

             background-color: aqua;height:48px;

         }

         .c1{

             background-color: aqua;height:48px;

         }

     </style>

 </head>

 <body>

       <div class="c1">12fhjkhjjk44</div>

       <span class="c1">ff1537ff</span>

       <div class="c1">fhajhjak</div>

 </body>

 </html>

3. 标签选择器

在head标签内的style标签中div{

......

}

所以div设置上此样式

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .c1{

             background-color: aqua;height:48px;

         }

         div{

             background-color: red;color:black

         }

     </style>

 </head>

 <body>

       <div>12fhjkhjjk44</div>

       <span class="c1">ff1537ff</span>

       <div>fhajhjak</div>

 </body>

 </html>

4. 层级选择器

.c1 .c2 div{

......

}

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .c1{

             background-color: aqua;height:48px;

         }

         span div{

             background-color: red;color:black

         }

     </style>

 </head>

 <body>

       <div>12fhjkhjjk44</div>

       <span class="c1">ff1537ff

             <div>shjhjhjjhk</div>

       </span>

       <div>fhajhjak</div>

 </body>

 </html>

5. 组合选择器（逗号）

6. 属性选择器

对选择到的标签再通过属性再进行一次筛选

.c1 [n='alex'] { width:100px; height: 200px;}

PS:

优先级，标签上style优先，编写顺序，就近原则

css样式也可以写在单独文件中

三 注释

/*     */

第四篇 CSS的更多相关文章

  1. 第四篇 -- CSS基础

    表单.单选.下拉框.文本域.多选框.提交.重置.按钮 <!DOCTYPE html> <html lang="en"> <head> <m ...

  2. IIS负载均衡-Application Request Route详解第四篇：使用ARR实现三层部署架构（转载）

    IIS负载均衡-Application Request Route详解第四篇:使用ARR实现三层部署架构 系列文章链接: IIS负载均衡-Application Request Route详解第一篇: ...

  3. 前端总结·基础篇·CSS（一）布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  4. 前端总结·基础篇·CSS（二）视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  5. 前端总结·基础篇·CSS（三）补充

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...

  6. 前端总结·基础篇·CSS

    前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;}  /* IE8+ */body {margin:0;}  ...

  7. 前端第四篇---前端基础之jQuery

    前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...

  8. 从0开始搭建SQL Server AlwaysOn 第四篇（配置异地机房节点）

    从0开始搭建SQL Server AlwaysOn 第四篇(配置异地机房节点) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www ...

  9. 第四篇 Entity Framework Plus 之 Batch Operations

    用 Entity Framework  进行 增,删,改.都是基于Model进行的,且Model都是有状态追踪的.这样Entity Framework才能正常增,删,改. 有时候,要根据某个字段,批量 ...

随机推荐

  1. [Swift]LeetCode508. 出现次数最多的子树元素和 | Most Frequent Subtree Sum

    Given the root of a tree, you are asked to find the most frequent subtree sum. The subtree sum of a ...

  2. Python Django(WEB电商项目构建)

    (坚持每一天,就是成功) Python Django Web框架,Django是一个开放源代码的Web应用框架,由Python写成.采用了MTV的框架模式,即模型M,模板T和视图V组成. 安装Pyth ...

  3. 关于CKEditor 4.0 过滤html标签

    今天遇到一个问题,就是整个页面存储在数据库中,然后后台可以进行编辑,开始我使用ckeditor进行编辑,后来发现他会自动的过滤掉一些html标签,花了一上午的时间在网上查找资料,并且在官网也看了,但是 ...

  4. synchronize 关键字原理

    众所周知 synchronized 关键字是解决并发问题常用解决方案,有以下三种使用方式: 同步普通方法,锁的是当前对象. 同步静态方法,锁的是当前 Class 对象. 同步块,锁的是 () 中的对象 ...

  5. Fleck For Web Socket

    效果图 (前沿).WebSocket是一种基于TCP/IP通讯一种新的通讯协议,它实现了服务器和客户端双工通讯,允许服务器主动发送给客户端. (浏览器对Socket的支持) . 浏览器 支持情况 Ch ...

  6. qt 共享内存 单例

        QT 进程间通信之古老的方法(内存共享)     让QT只运行一个实例     以上两篇文章中分别讲述了QSharedMemory的不同作用,第一篇讲了进程间通信,第二篇讲述了怎么让应用程序只 ...

  7. JAVA集合类兄妹List和Set

    List 接口及其实现类 有序集合,集合中每个元素都有其对应的顺序索引,类似数组,索引也是从 0 开始,可以根据元素的索引,来访问元素. List 集合允许添加相同的元素,因为它是通过下标来取值的,不 ...

  8. 精读《Scheduling in React》

    1. 引言 这次介绍的文章是 scheduling-in-react,简单来说就是 React 的调度系统,为了得到更顺滑的用户体验. 毕竟前端做到最后,都是体验优化,前端带给用户的价值核心就在于此. ...

  9. RabbitMQ消息队列（九）-通过Headers模式分发消息（.Net Core版）

    Headers类型的exchange使用的比较少,以至于官方文档貌似都没提到,它是忽略routingKey的一种路由方式.是使用Headers来匹配的.Headers是一个键值对,可以定义成Hasht ...

  10. spring源码分析之spring-jdbc模块详解

    0 概述 Spring将替我们完成所有使用JDBC API进行开发的单调乏味的.底层细节处理工作.下表描述了哪些是spring帮助我们做好的,哪些是我们要做的. Action  Spring  You ...