在标签上设置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]LeetCode380. 常数时间插入、删除和获取随机元素 | Insert Delete GetRandom O(1)

    Design a data structure that supports all following operations in averageO(1) time. insert(val): Ins ...

  2. [Swift]LeetCode662. 二叉树最大宽度 | Maximum Width of Binary Tree

    Given a binary tree, write a function to get the maximum width of the given tree. The width of a tre ...

  3. [Swift]LeetCode837. 新21点 | New 21 Game

    Alice plays the following game, loosely based on the card game "21". Alice starts with 0 p ...

  4. Redis 设计与实现 （四）--事件、客户端

    事件 一.文件事件 文件事件处理器使用I/O多路复用程序来同时监听多个套接字, 监听套接字,分配对应的处理事件. 四个组成部分:套接字 .I/O多路复用 . 文件事件分派器 . 事件处理器 连接应答处 ...

  5. Linux中FTP远程传输，SSH远程连接，以及SCP远程拷贝

    常用服务器ftp.ssh 1. Linux常用服务器构建-ftp服务器 ftp服务器 FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议”. 用于 ...

  6. mysql之delete语法

    一:DELETE语法 以往用delect删除表数据是都是单表(一个表)删除.对于关联表,往往都是先删除第一个表的数据,然后再写另一个delect语句删除另一个表的数据(浪费时间,又影响性能,与数据库交 ...

  7. innerHTML，outerHTML，innerText，outerText

    - innerHTML 设置或获取位于对象起始和结束标签内的 HTML - outerHTML 设置或获取对象及其内容的 HTML 形式 - innerText 设置或获取位于对象起始和结束标签内的文 ...

  8. 【WCF系列】（三）如何配置和承载服务

    如何配置和承载服务 配置绑定 配置服务:任务 为什么要配置服务:在设计和实现服务协定后,即可配置服务. 在其中可以定义和自定义如何向客户端公开服务指定可以找到服务的地址.服务用于发送和接收消息的传输和 ...

  9. Spring Boot 2.x （十二）：Swagger2的正确玩儿法

    Swagger2简介 简单的来说,Swagger2的诞生就是为了解决前后端开发人员进行交流的时候API文档难以维护的痛点,它可以和我们的Java程序完美的结合在一起,并且可以与我们的另一开发利器Spr ...

  10. 痞子衡嵌入式：并行接口NAND标准(ONFI)及SLC Raw NAND简介

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是ONFI标准及SLC Raw NAND. NAND Flash是嵌入式世界里常见的存储器,对于嵌入式开发而言,NAND主要分为两大类:S ...