1,css有几种引入方式

  1. 使用HTML标签的STYLE属性

    将STYLE属性直接加在单个的HTML元素标签上，控制HTML标签的表现样式。这种引入CSS的方式是分散灵活方便，但缺乏整体性和规划性，不利于后期的修改和维护，当需要修改网站的样式时，一个相同的修改可能涉及多个地方，维护成本高。使用STYLE属性的样式效果最强，会覆盖掉其它几种引入方式的相同样式效果。

     <div style="color:red"></div>
  2.  

    将样式代码写在页面<STYLE>...</STYLE>标签之中

    <STYLE>...</STYLE>结构可以位于页面<HTML>标签中的任何位置，也可以多次出现。通常是将整个<STYLE>...</STYLE>结构写在页面的<HEAD>...</HEAD>部分中。这种引入CSS方式的特点是每个页面的CSS代码可能具有统一性和规划性，一个页面内部便于复用和维护，但多个页面之间的CSS代码复用仍然不够。

     <style>
    
   bdoy{font-size:14px;}
    
 </style>
  3.  

    使用 LINK标签，引入外部CSS文件

    将css代码写在一个单独的文件中，用link标签直接引入该文件到页面中。一个页面可以多次使用LINK标签引入多个外部css文件，注意这些CSS代码的相互影响，通常是后引入的CSS文件会覆盖前面引入的CSS文件的相同效果。这种引入CSS的方式是目前最为流行的，可以在站个网站范围内进行CSS代码的规划，方便复用和维护，但这样将代码高度集中，代码量可能过大，维护不当的话又容易出现混乱。

     <link rel="stylesheet" type="text/css" href="style.css">
     
  4.  

    使用@import引入CSS文件

    使用@import引入CSS文件有两种方式，一种可以放在页面中的<STYLE>...</STYLE> 中,用法如下：

    　@import url(index2.css);

    另外也可以放在CSS文件中使用，用法如下：

    　@import "sub.css";

    使用用@import引入CSS可以很方便的引入外部文件的CSS代码，方便维护和规划。但是每多引入一个CSS文件，就会对服务器增加一次连接请求，当访问量较大时，需在维护性和性能上进行权衡。

    2,div除了可以声明id来控制，还可以声明什么控制？

    div除了用ID赋予它一个名称外，
    还可以用class来赋予它一个名称。 
    还可以不用赋予它一个名字，直接用style来直接设定它的样式。
    唯一区别就是ID是唯一的，只能用一次。反而CLASS是可以反复使用的，可以多个div同时时候class来定义样式。

一般JS中常用ID，因为JS是获取div名字来进行判断的，也是唯一判断，如果用class会出错，如果我们写普通html，用class会好些。
     3,如何让2个div，并排显示。
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>
    
 <title>div并排显示</title>
    
 </head>
    
 <body>
    
 <!--这是两个div-->
    
 <div  style="width:300px;height:300px;background:blue;float:left">div1与div2并排 重点是float：left</div>
    
  <div style="width:300px;height:300px;background:red;float:left">div2重点与div1并排 重点是float：left<div/>
    
 </body>
    
 </html>

    效果图是：

    除了上面的 style="float:left"

    还有  style="display:inline"  也是每个div中都要加

    创建了浮动，阻断与不阻断的效果差别

    不阻断  无 clear：both   代码中已经注销

     <!DOCTYPE html>
    
 <html lang="en">
    
 <head>
    
     <meta charset="UTF-8">
    
     <title>浮动布局</title>

     <style>
    
     #lside{
    
         width: 50px;
    
         height:300px;
    
         background: green;
    
         float:left;
    
     }
    
     #rside{
    
         width: 50px;
    
         height: 200px;
    
         background: red;
    
         float: right;
    
     }
    
     #comm{

         height:300px;
    
         background: blue;
    
         /*clear: both;*/

     }

     </style>
    
 </head>
    
 <body>
    
 <div>
    
     <div id="lside">我是左</div>
    
     <div id="rside">我是右</div>
    
     <div id="comm">普通</div>

 </div>
    
 </body>
    
 </html>

    显示效果：

    如果把clear：both 解除注销    显示效果：

     

2016/2/24 1,css有几种引入方式 2,div除了可以声明id来控制，还可以声明什么控制？ 3,如何让2个div，并排显示。4，清除浮动 clear：left / right / both的更多相关文章

  1. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  2. css-1,css的三种引入方式 基本选择器

    <!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...

  3. CSS的4种引入方式及优先级

    第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...

  4. html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  5. 11 CSS的三种引入方式和基本选择器

    <!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...

  6. 《网页设计基础——CSS的四种引入方式详解》

    网页设计基础--CSS的四种引入方式详解     一.行内式:   规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中.   格 ...

  7. （转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）

    一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...

  8. CSS三：CSS的三种引入方式

    CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:<h1 style="color:red;">st ...

  9. 页面中CSS的四种引入方式的介绍与比较

    转自:https://blog.csdn.net/qq_38689666/article/details/79039392 一:行内式 <p style="color:red" ...

随机推荐

  1. PHP 配置文件php.ini文件优化

    PHP 5.3.3 safe_mode = On #控制php中的函数执行比如system() 这个函数可以调用系统目录 比如 rm ,打开这个配置之后,同时把很多文件操作的函数进行了权限控制 saf ...

  2. 一道在CF上WA了9次才AC的A题题目与10个版本的代码代码

    题目(题目链接:https://codeforces.com/problemset/problem/733/A):   A. Grasshopper And the String time limit ...

  3. PS学习笔记（03）

    ui到底是什么? 很多同学不知道ui是什么,以为画个ICON图标就是做ui了,导致很多人都忙着画各种各样的图标.这样很容易让那些新人们走错路,最后我想说的是icon不是全部,不要沉迷其中,要学的还有很 ...

  4. jenkins在linux环境搭建-公司系统

    1.按照这个搭建的项目https://www.cnblogs.com/zishengY/p/7170656.html 2.配置权限https://blog.csdn.net/mynameissls/a ...

  5. NYOJ 203 三国志

    三国志 时间限制:3000 ms  |  内存限制:65535 KB 难度:5   描述 <三国志>是一款很经典的经营策略类游戏.我们的小白同学是这款游戏的忠实玩家.现在他把游戏简化一下, ...

  6. You Are the One （区间DP）

    The TV shows such as You Are the One has been very popular. In order to meet the need of boys who ar ...

  7. Go切片的操作

    package main import "fmt" //切片的操作 func main() { //创建slice var s []int //zero value for sli ...

  8. [luoguP2577] [ZJOI2005]午餐（DP）

    传送门 显然吃饭时间越长的人排在前面越好,所以先排序. f[i][j]表示前i个人,A队的打饭时间为j的最优解,每个人只有两种选择,去A队或是去B队. #include <cstdio> ...

  9. （在线工具）JSON字符串转换成Java实体类(POJO)

    http://www.bejson.com/json2javapojo/ 付代码代码转换示例: public static FixMixedOrderResponse serialization(St ...

  10. msp430入门编程50

    msp430中项目编程套路 msp430入门编程 msp430入门学习