在标签上设置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]LeetCode304. 二维区域和检索 - 矩阵不可变 | Range Sum Query 2D - Immutable

    Given a 2D matrix matrix, find the sum of the elements inside the rectangle defined by its upper lef ...

  2. [Swift]LeetCode749. 隔离病毒 | Contain Virus

    A virus is spreading rapidly, and your task is to quarantine the infected area by installing walls. ...

  3. [Swift]LeetCode767. 重构字符串 | Reorganize String

    Given a string S, check if the letters can be rearranged so that two characters that are adjacent to ...

  4. [Swift]LeetCode963. 最小面积矩形 II | Minimum Area Rectangle II

    Given a set of points in the xy-plane, determine the minimum area of any rectangle formed from these ...

  5. python日志syslog运用

    syslog的官方说明在: https://docs.python.org/2/library/syslog.html#module-syslog 该模块的主要方式为: #!/usr/bin/pyth ...

  6. oracle常用命令收集

    1.查看监听状态 lsnrctl status 2.启动监听 lsnrctl start 3.关闭监听 lsnrctl stop 4.以数据库管理员登录 sqlplus / as sysdba 5.手 ...

  7. Zara精讲C#.Cache、它和Redis区别是什么???

    前言:今天在博客园看到大佬在用Cache,非常不懂,原来它是搞缓存的,原来我只知道Redis是搞这个的,才知道有这个玩腻. 那它们的区别是什么呢?? 区别: redis是分布式缓存,是将数据随机分配到 ...

  8. 带着萌新看springboot源码8（spring ioc源码下）

    继续接着上一节,到了第六步(温馨提醒,内容有点小多,不过看完ioc原理就差不多了) 6.注册Bean后置处理器(registerBeanPostProcessors(beanFactory)) 最后一 ...

  9. pymysql.err.InternalError: (1205, 'Lock wait timeout exceeded; try restarting transaction')错误处理

    问题描述: 在使用pymysql库时,利用游标执行插入操作,产生错误,会出现pymysql.err.InternalError: (1205, 'Lock wait timeout exceeded; ...

  10. Java开发知识之JAVA的反射

    目录 Java中的反射机制 一丶什么是反射机制 二丶Class类,自描述类.获取类名的三种方法 1.使用静态属性Class获取 2.使用Class方法 forName()获取自描述Class 3.使用 ...