在标签上设置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]LeetCode853. 车队 | Car Fleet

    N cars are going to the same destination along a one lane road.  The destination is target miles awa ...

  2. [Swift]LeetCode996. 正方形数组的数目 | Number of Squareful Arrays

    Given an array A of non-negative integers, the array is squareful if for every pair of adjacent elem ...

  3. ubuntu中环境变量的几个问题思考

    问题一:export PATH=$PATH:/usr/local和export PATH=/usr/local:$PATH这两个的区别是什么?可以随便用吗? 这两个都是要把该目录加到环境变量中,一般的 ...

  4. app自动化问题点整理

    1.配置SDK环境发现adb无法生效: 解决方案: 这个问题一般就是你的环境变量没有配置好,很多同学比较容易出现的点就是win10系统的环境变量配置: 一定要注意打开path添加:%ANDROID_H ...

  5. iOS学习——图片压缩到指定大小以内

    一.图片压缩简述 在我们开发过程中,有可能会遇到拍照.或者从相册中选择图片,要么单选或者多选,然后上传图片到服务器,一般情况下一张图片可能3-4M,如果类似微信朋友圈上传9张图片大约是 35M左右,如 ...

  6. 第三周 IP通信基础回顾

    本周的知识归纳如下:Hubs工作在物理层,物理层所有的设备都处于同一个冲突域,所有的设备都处于同一个广播域,设备共享相同的带宽. MAC地址48位, MAC帧结构 #字符   8            ...

  7. js获取input上传文件名和后缀

    var file = $("#filedata").val(); var pos = file.lastIndexOf("\\");  var filename ...

  8. Java集合类的那点通俗的认知

    文/沉默王二 开门见山地说吧,Java提供了一套完整的集合类(也可以叫做容器类)来管理一组长度可变的对象(也就是集合的元素),其中常见的类型包括List.Set.Queue和Map.从我个人的编程经验 ...

  9. GitHub 1W star 成就达成！

    起因 感谢各位大佬的支持收获了人生第一个(很有可能也是唯一一个)1W star 项目. 从今年一月份创建项目至今 8 个月时间. 一共关闭了 27 个 issue,47 个 RP,总共有 11 位小伙 ...

  10. 从零开始学习PYTHON3讲义（七）条件分支和哥德巴赫猜想

    <从零开始PYTHON3>第七讲 人生是由无数个选择组成,每个选择都有不同的限定条件.现在来说人生有点早是吧:)不过事实的确是这样的. 程序也充满着选择,满足不同的条件,则运行不同的运算. ...