在标签上设置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. ansible基础-加密

    一 简介 注:本文demo使用ansible2.7稳定版 众所周知,ansible是很火的一个自动化部署工具,在ansible控制节点内,存放着当前环境服务的所有服务的配置信息,其中自然也包括一些敏感 ...

  2. [Swift]LeetCode14. 最长公共前缀 | Longest Common Prefix

    Write a function to find the longest common prefix string amongst an array of strings. If there is n ...

  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. [Swift]LeetCode914.一副牌中的X | X of a Kind in a Deck of Cards

    In a deck of cards, each card has an integer written on it. Return true if and only if you can choos ...

  5. HoloLens开发手记- SpectatorView for iOS编译指南

    微软前两天发布了HoloLens 2,给MR开发带来了新的希望,全面的性能和显示效果提升,让人期待. 去年推出的预览版的全新SpectatorView for iOS解决方案,这允许我们直接使用带AR ...

  6. 陕西省网络空间安全技术大赛部分题目writeup

    签到-欢迎来到CSTC2017 10 欢迎来到CSTC2017 ZmxhZ3tXZWlTdW9GeXVfQmllTGFuZ30= Base64解密:flag{WeiSuoFyu_BieLang} 种棵 ...

  7. React 中 Link 和 NavLink 组件 activeClassName、activeStyle 属性不生效的问题

    首先 导航链接应该使用  NavLink 而不再是  Link NavLink 使用方法见 https://github.com/ReactTraining/react-router/blob/mas ...

  8. python3安装sklearn机器学习库

    安装sklearn需要的库请全部在万能仓库下载: http://www.lfd.uci.edu/~gohlke/pythonlibs/#scipy http://www.lfd.uci.edu/~go ...

  9. Python内置函数(47)——open

    英文文档: open(file, mode='r', buffering=-1, encoding=None, errors=None, newline=None, closefd=True, ope ...

  10. BBS论坛（三十三）

    33.celery实现邮件异步发送 (1)task.py pip install celery redis from celery import Celery from flask import Fl ...