CSS根基笔记,css笔记

CSS基础笔记,css笔记

CSS(Cascading Style Sheets):用来表示HTML或XML等文件样式的计算机语言;

作用:定义网页的外观,统一的方式,实现内容(数据)和表现(样式)分离;

三大特征

1.继承性:父元素的样式,子元素默认继承(例外:边框,边距,间距相关的属性都不继承)
2.优先级:内联样式优先级最高!后解释的优先(解释执行)
3.层叠性:多级样式最终合并运用

1 css样式的引入

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>css样式的引入</title>
     /*
         CSS和HTML的结合方式:
           1. 行级样式表: 采用style属性完成,重用性和可维护度不好
           2. 内部样式表: 采用style标签完成
           3. 外部样式表: 采用外部css文件完成,html 页面上用 link 引入-----优先推荐使用
       */      
 
 <!-- 内嵌的CSS样式 -->
 <style type="text/css">
  /*将某一个CSS文件的样式直接导入到当前的位置*/
  /*导入样式必须写在所有的其他样式设置之前*/
  @import url(CSS/main.css);

  p { 
   color: green; /*设置前景色,也就字体的颜色*/
   background-color: silver; /*设置段落的背景颜色*/
  }
 </style> 
     /*
       rel属性:值: 1. stylesheet: 定义样式表
                2. alternate stylesheet: 候选样式表 
      */ 
     <!-- 外联CSS样式,外部CSS样式 -->
 <link rel="stylesheet" href="CSS/main.css">
</head>
<body>
 <!-- id , name, style, -->
 <!-- 行内的CSS样式 -->
 <h1> 2 css语法案例 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>CSS语法案例</title>
 <style>
      /*
          选择器: 1. 基本选择器  
                a. 标签选择器: 就是选择了页面上一类标签
                   b. 类选择器: 规定用圆点. 来定义
                   c. ID选择器:  规定用#来定义 : 正对特定的一个标签用
                   d. 通用选择器: 用*来定义
        */

  /*标签的选择器*/
  p {
   background-color: yellow;
   color: white;
  }
  h1 { color: green; }
  span { font-size: 14px; }

  /*通配符选择器:  * 代表选择当前页面中的所有的标签 */
  * {
   font-size: 16px;
  }

                /*id选择器*/
  #p1 {
   font-size: 20px;
  }

  #p2 { font-size: 10px; }
 </style>
</head>
<body>
 <p id="p1">3 类选择器

<!DOCTYPE html>
<html lang="en">
    <head>
 <meta charset="UTF-8">
 <title>类选择器</title>
 <style>
  .web {
   color: green;
  }
  .demo {
   background-color: yellow;
  }
 </style>
    </head>
    <body>
 <p class="web demo">我是一个段落标签1</p>
 <p>我是一个段落标签2</p>
 <p>我是一个段落标签3</p>

 <div class="web">
      块级标签
 </div>
    </body>
</html>

4 复合选择器

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>复合选择器</title>
 <style>
  h3.title-msg {
   color: red;
  }
 </style>
</head>
<body> 
 <h3 class="title-msg">标题标签1</h3>
 <h3>www.baidu.com</h3>
 <p class="title-msg">我是一个段落标签,也拥有 titleclass</p>
</body>
</html>

 5 后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>后代选择器</title>
 <style>
  /*首先找到所有的 .box类对应的标签,然后找到ul标签的所有后代 li 标签*/
  .box li {
   color: green;
  }
  div li {
   color: red; 
  }
 </style>
</head>
<body>
 <div class="box">
  <ul>
   <li class="citys">北京</li>
   <li class="citys">上海</li>
  </ul>
  <ul>
   <li class="citys">昆明</li>
   <li>深圳</li>
   <li>广州</li>
  </ul>
  <ul>
   <li>后来添加到li标签</li>
  </ul>
 </div> 
 <div class="">
  <ul>
   <li>武汉</li>
   <li>郑州</li>
   <li>深圳</li>
  </ul>
 </div>
</body>
</html>

 6 并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>并集选择器</title>
 <style>
            /*
  h1 { color: red; }
  h2 { color: red; }
  p  { color: red; }
            */
          /*以上可替换为如下形式*/
  h1, h2, p {
   color: red;
  } 
 </style>
</head>
<body>
 <h1>中国的房价要大涨了</h1>
 <h2>中国的物价上涨了</h2>
 <p>中国的人民币贬值了</p>
 <ul>
  <li>人民幸福安康</li>
 </ul>
</body>
</html>    

 7 子元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>子元素选择器</title> 
 <style>
    /*div下的段落标签1、2、4被定义样式*/ 
        div > p {
   color: yellow;
      }
 </style>
</head>
<body>
 <div>
  <h1>h1标题</h1>
  <p>段落标签1</p>
  <p>段落标签2</p>
  <p><a href="www.baidu.com">百度一下</a></p>
  <ul>
   <li>
    <p>段落标签3</p>
   </li>
  </ul>
  <p>段落标签4</p>
 </div>
 <p>
  段落标签5 
     </p>
</body>
</html>

 8 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>属性选择器</title>
 <style>
  h1[id] { color: red; }
  /*把拥有id和class属性的h1标题选出来然后设置字体大小为17px*/
  h1[id][class] { font-size: 17px; }
  input[type="text"] { background-color: purple; }
 </style>
</head>
<body>
 <h1>中国足球出线了 ???吗?</h1>
 <h1 id="aside-title" class="aside-msg">中国足球终于又没出现,哈哈</h1>
 <input type="text">
 <input type="password">
</body>
</html>

 9 伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>11伪类的案例</title>
 <style>
     /*   扩展选择器:
               a. 组合选择器: 用逗号隔开多个选择器
               b. 关联选择器(后代选择器) : 用空格隔开,
               c. 伪类选择器
                  1): 静态伪类: :link,:visited,只能用于超链接
                  2):  动态伪类: 适用于各种标签
                             :onfocus 控件获得焦点
                             :active  点击控件的时候
                             :hover   当鼠标移动到某个控件上方的时候
                   a{}与a:link{}:
                           区别:a{}包括了锚点 a:link{}不包括锚点
      */
  a:link { /*链接颜色*/
   color: red;
  }
  a:visited {/*当链接被访问过后显示的样式*/
   color: blue;
  }
  a:hover { /*当鼠标移动到链接上显示的样式*/
   background-color: silver;
   color: white;
  }

  a:active {/*当鼠标按下时显示的样式*/
   color: yellow;
  }
  .txtName:focus {/*当文本聚焦时显示的样式*/
   background-color: green;
  }

  a:focus {/*当鼠标按下时显示的样式*/
   font-size: 20px;
  }
 </style>
</head>
<body>
 <a href="#">当前网站</a>
 <a href="http://www.baidu.con">百度一下</a>
 <a href="http://www.sina.com.cn/">新浪官网</a>
 <a href="http://weibo.com/">新浪微博</a>
 <a href="https://mail.qq.com/">qq邮箱</a>

 <input type="text" class="txtName">
</body>
</html>

 10 伪元素

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>伪元素</title>
 <style>
  .article-txt:first-line {
   color: red;
  }
  .article-txt:first-letter {
   font-size: 50px;
  }  

  /*选择第一个孩子是span标签的元素*/
  span:first-child {
   color: blue;
  }
 </style>
</head>
<body>
 <p class="article-txt">
 伪元素 是控制内容
    :first-line 伪元素
    :first-letter 伪元素
    注释:以上两个伪元素只能用于块级元素
    :first-child 伪元素,选择属于第一个子元素的元素。
 例如:span:first-child{}  /*选择属于第一个子元素的所有span标签。*/
     比如:#demo:after,#demo:before {  content:"--";display:block; }
 </p>
 <div>
  我是第一个儿子
  我是第二个儿子
  我是第三个儿子
 </div>
 <p>
  第1个span
  第2个span
 </p>
</body>
</html>

 11 伪元素的before和after

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>伪元素before和after</title>
 <style>
         /* :before与:after伪元素,可以设置元素之前后之后的 内容,并且配合content设置相关内容。*/
  .wrap:before, .wrap:after {
   content: "-------";
   display: block;/*这个是让当前 伪元素 转换成块级元素*/
  }
 </style>
</head>
<body>
 <div>
  <hr>
 </div>
 <div class="wrap">
  我是div
 </div>
 <div>
  <hr>
 </div>
</body>
</html>

 12 css层叠性

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>css层叠</title>
 <style>
          /*背景色将会被第二个颜色所覆盖*/
  .box {
   background-color: red;
   height: 200px;
   width: 200px;
  }
  .wrap {
   background-color: green;
  }
 </style>
</head>
<body>
 <div class="box wrap">  
 </div>
</body>
</html>

 13 css继承性

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>15 CSS的继承性</title>
 <style>
         /*div块机中的元素及内容都继承了.box样式*/ 
  .box {
   color: red;
  }
  body {
   font-size: 12px;
  }
 </style>
</head>
<body> 
 <div class="box">
  我是div
  <p>
   我是段落
  </p>
 </div>
</body>
</html>

 14 css特殊选择器的优先级

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>CSS特殊性</title>
 <style>
  #txt-wrap {
   color: green;
  }
  .box  {
   color: red;
  } 

  /*层叠性是指: 在样式的优先级相同的情况下才会考虑的*/
 </style>

</head>
<body>
 <div class="box" id="txt-wrap">
  我是div的文字
 </div>
</body>
</html>

 15 css选择器案例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>CSS选择器案例</title>
 <style>
  body {
   color: red;   /*继承的样式  >  浏览器默认的样式 */
  }
  * {
   color: blue;   /*通配符选择器的样式 >  继承的样式*/
  }
  h1 {
   color: green; /*标签选择器的样式  >  通配符选择器的样式*/
  }
  .title-demo {
   color: purple;  /*类选择器的样式  > 标签选择器的样式的优先级*/
  }
  #id-title {
   color: yellow;   /*id选择器的优先级  >  类选择器的样式*/
  }
  .aside .aside-dt h1 {
   background-color: silver;
  }

  .aside #title-txt #id-title {
   background-color: yellow;
  }
 /* 行内 > ID > Class > 标签 */
 </style>
</head>
<body>
 <div class="wrap">
  <div class="aside">
   <div class="aside-dt" id="title-txt">
    <h1 class="title-demo" id="id-title"> 16 display 属性的使用

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>display属性的使用</title>
 <style>
  div {
   background-color: silver;
   display: inline; /*  可以让元素编成行内模式的标签*/
  }
  strong  {
   display: block;/*将显示为块级元素,前后会带有换行符*/
   /*display: none;*/   /*直接把当前标签从页面中直接移除了,不影响页面的布局*/
   background-color: yellow;
   visibility: hidden;   /*这个只是不显示,但还是占用页面的空间*/
  }
  .demo-inline {
   display: inline-block; /*行内块元素*/
   height: 200px;
  }
  span {
   height: 400px;
   background-color: green;
  }

 </style>
</head>
<body>
 <!-- 行内元素 -->
 我是span
 <strong>我是strong标签</strong>
 <s>我是一个s标签</s>

 <!-- 块级标签 -->
 <div>
  我是一个div
 </div>
 <div class="demo-inline">
  我是一个行内块标签
 </div>
</body>
</html>

17 颜色的表示

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>颜色的表示</title>
 <style>
  .demo {
   height: 300px;
   width: 300px;
   /*background-color: rgb(100, 100, 100);*/
   /*background-color: rgb(0, 0, 0); */ /*纯黑色*/
   /*background-color: rgb(255, 255, 255);*/  /*纯白色*/
   /*background-color: rgb(3, 99, 178);*/  /*蓝色*/
   /*background-color: rgb(20%, 9%, 78%);*/  /*深蓝色*/

   /*十六进制的表示方法  #red green blue*/
   background-color: #0399B2;
  }
 </style>
</head>
<body>
 <div claSS="demo">  
 </div>
</body>
</html>

 18 字体设置

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>CSS字体设置</title>
 <style>
          h1 {    font-family: "黑体";   } 

          #p {    /*font-size: 20px;  

              font-weight: 700;  

              font-style: oblique;  

              font-family: “微软雅黑”;*/

            /*

              font字体合写

               font: 字体样式 字体是否加粗 字体大小 
字体类型;

            */

               font: oblique 700 20px “微软雅黑”;

             text-transform:capitalize; 
/*每个单词首字符大写*/ 

              }

             p {

              font-size: medium;/*字体大小中等*/
              font-weight: 700;/*字体加粗,不需要单位*/

              font-variant:small-caps;  
/*小写变大写*/
               /*font-family: “宋体”;*/ 
              /* font-family: “微软雅黑”, “Lucida
Console”;*/ 
              /*font-style: italic;*/ 
/*使用文字本身的斜体样式显示。*/
                 font-style: oblique;   /*
让文字进行倾斜显示*/  }

           div {

             /*font-size: 20px;*/

             /*字体大小*/ /*font-size: large;*/
 /*超大字体*/

             font-size: x-small; /*超小字体*/
}        

 </style>
</head>
<body>  
      <h1>我是标题标签</h1> 
  <p>我是一段段落文本1abc,</p>
      <p id="pp">我是一段段落文本2, what's you name ?</p>
 <div>
  我是一个div块级元素
 </div>
</body>
</html>

 19 文本布局

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>文本布局</title>
 <style>
  .letter-spacingdemo {
   /*可以控制字符的间距, 中文一个汉字就代表一个字符,英文一个字母代表一个字符*/
   letter-spacing: 10px;
  }

  .word-spacingdemo {
   /*下面的设置只对英文单词有影响,对中文字与字之间的距离没有影响。*/
   /*如果中文字之间有空格的话,会把空格设置成20px宽度*/
   word-spacing: 20px;
  }
 </style>
</head>
<body>
 <p class="letter-spacingdemo">
  百度一下 : http://www.baidu.com
 </p>
 <p class="word-spacingdemo">
  百度  一下 : http://www.baidu.com 
 </p>
</body>
</html>

 20 宽按钮文本案例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>26宽按钮文本的案例.html</title>
 <style>
  a {
   background-color: silver;
   /*font-size: 20px;
   font-weight: 700;
   font-family: "黑体";*/

   font: 700 20px "黑体";

   display: block; /*显示为块级元素*/
   width: 200px;
   height: 50px;

   /*设置行高,控制文本 垂直方向居中*/
   line-height: 50px;
   /*控制文本水平方向居中*/
   text-align: center;

   /*letter-spacing: 30px; 字符间距*/
   word-spacing: 30px;/*文件间距*/
   text-decoration: none;
  }
 </style>
</head>
<body>
 <a href="#">按 钮</a>
</body>
</html>

 21 行高

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>27行高的练习</title>
 <style>
  * {
   padding: 0; /*内边距*/
               margin: 0;  /*外边距*/
  }
  p.demo {
   height: 100px;/*文字高度*/
   line-height: 100px;/*行高*/

   text-align: center;/*文本水平位置*/
   font-size: 40px;
   background-color: silver;
  }
  .wrap {
   font: 16px "黑体";
   background-color: green;
  }
  .wrap p {
   background-color: red;
   /*font: 20px/1.5em "宋体"; */  /* 此时行高是:30px= 20*1.5   */
   /*font: 20px/1.5 "宋体";   */
   font: 20px/40px "宋体";/*20px是字体大小,40px是行高*/
  }
 </style>
</head>
<body>
 <p class="demo">
  上海是个国际大都市
 </p>
 <div class="wrap">
  <div>我是子div的文本内容</div> 
  <p>
   我是子段落标签的文本
  </p>
  我是父div的文本内容
 </div>

</body>
</html>

 22 文本修饰

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>文本装饰</title>
 <style>
  .txt-underline {
   text-decoration: underline;
  }
  a {
   text-decoration: none;
  }
  .txt-linethrough {
   text-decoration: line-through;
  }
  #top-line {
   text-decoration: overline;
  }
 </style>
</head>
<body>
 <div>
  <a href="#">我是超级链接</a>

   我是下划线文本


   我是删除线的案例


   我是顶线

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

 23 文本首行缩进

    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>首行缩进</title>
 <style>
  h1 {
   text-indent: 999px;
   /*一般用于 网站的h1标题logo的seo的优化*/
  }
  p {
   text-indent: 2em;
  }
 </style>
</head>
<body>

 <h1><a href="#" class="logo-txt">传智播客</a></h1>
       <p>
            Sublime Text 是一个代码编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim。
        </p>
        <p>
          Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。
        </p>
      <p>
          Sublime Text具有体积较小,运行速度快等特点。
      </p>
</body>
</html>                    

 24 文本空白符处理

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>文本空白符处理</title>
 <style>
  div {
   background-color: green;
   height: 200px;
   width: 200px;
   border: 1px solid red;
  }

       /*  .nowrap {  默认;空白会被浏览器忽略
   white-space: normal;
  }  */
  .nowrap { 
   white-space: nowrap; /*文本不会换行,直到遇到<br>标签为止*/
  }
  .pre {
   white-space: pre;/*空白会被浏览器保留。行为方式类似于html中的<pre>标签*/
  }
 </style>
</head>
<body>
 <div class="normal">
  normal: www.baidu.com  http://www.baidu.com
 </div>
 <div class="nowrap">
  nowrap: www.baidu.com  http://www.baidu.com
 </div>
 <div class="pre">
  pre www.baidu.com    http://www.baidu.com
  var i = 0;
  i++;
  console.log(i);
 </div>
</body>
</html>

 25 自动换行处理

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>自动换行的处理</title>
 <style>
  div {
   border: 1px solid red;
   background-color: blue;
   width: 100px;
   height: 400px;
   color: #fff;

   /*word-break: break-all; */  /*可以把一个单词放到两行中,充分利用行的空间*/
   word-break: keep-all;  /*只能在半角空格或连字符处换行。*/
                       /* word-break: normal; */  /*使用浏览器默认的换行规则。*/
  }
 </style>
</head>
<body>
 <div>
  I  am  a teacher theather theather theather
  http://www.baidu.com/i/id/ljljljj
 </div>
</body>
</html>

 26 背景属性

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>背景属性</title>
  <style type="text/css">
   body{
  background-image:url(images/2.gif) ;/*把图像设置为背景*/
 
  background-repeat:no-repeat; /*背景图像将仅显示一次*/ 
          /*
            其它值:
              repeat(默认。背景图像将在垂直方向和水平方向重复)
              repeat-x(背景图像将在水平方向重复)
              repeat-y(背景图像将在垂直方向重复)
              inherit(规定应该从父元素继承 background-repeat 属性的设置)      
          */ 

  background-position:right top; /*设置背景图像的起始位置*/

  background-attachment: fixed ; 
          /*背景的滚动方式 fixed(当页面的其余部分滚动时,背景图像不会移动)
          scroll(默认,背景图像会随着页面其余部分的滚动而移动)*/

  background-color:#ffff66;/*十六进制值的背景颜色*/
   }
  </style>
 </head>
 <body>
    <pre>




    </pre>
 </body>
</html>

 27 列表属性

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>列表属性</title>
 <style type="text/css">
  ol{
   list-style-image:url(images/2.gif) ; /*将图象设置为列表项标志*/ 
  }
        /*
          list-style-position 属性设置在何处放置列表项标记。值:inside|outside 
        */
        /*
          list-style-type:none|circle(空心圆)|square(实心方块)|disc(默认,实心圆点);标记类型
        */
 </style>
 </head>
 <body>
     <ol>
   <li>中国</li>
   <li>美国</li>
   <li>小日本</li>
  </ol>
 </body>
</html>

 28 定位属性案例

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>定位属性</title>
 <style type="text/css">
   /*
    position:  a. 绝对定位:原点在父容器的左上角
         b. 相对定位:相对于自己原来的位置(左上角为原点)

         顺序流:所有的标签初始排列顺序就称为顺序流。
             两种情况控件脱离了顺序流: 
         1. 当我们把控件的位置设定为绝对定位
         2. 当我们设置控件的float属性的时候。
   */
   *{
    padding:0px;
    margin:0px;
   }
  div{
   position:absolute;
   left:20px;
   top:20px;
   width:200px;
   height:200px;
   border:1px solid red ;
  }

  p{
   position:absolute;
   left:20px;
   top:20px;
  }

  body{
   padding:100px;
  }

  #d{
   position:absolute;
   width:200px;
   height:200px;
   border:1px solid red ;
  }

  #d1{
   position:relative;
   left:50px;
   top:-50px;
   width:200px;
   height:200px;
   border:1px solid blue ;
  }

 </style>
 </head>
 <body>
   <div id = "d">
    <p>你好</p>
   </div>
   <div id = "d1">d1</div>
 </body>
</html>

 29  float属性,overflow属性

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>float属性,overflow属性</title>
 </head>
 <style type="text/css">
  div{
   width:200px;
   height:200px;
   float:left;/*左浮动*/  /*值:right(有浮动)|none(默认,元素不浮动)*/

   clear:both;/*不允许有浮动对象*/ 
                      /*值:none(允许两边有浮动现象)|left(不允许左边有浮动对象)|right(不允许右边有浮动对象)*/
  }
  #d{
   background-color:#ff66cc;

  }
  #d1{
   background-color:#00cc66;
  }
  p{
   width:100px;
   height:100px;
   background-color:red;
  }

  #d2{
   width:100px;
   height:100px;
   background-color:#66ff00;
   overflow: auto; /*如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容*//*盒子中的内容超出类范围*/
              /*值:scroll(内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容)
                 hidden(内容会被修剪,并且其余内容是不可见的)
                  visible(默认值,内容不会被修剪,会呈现在元素框之外)|
              */
  }
 </style>
 <body>
 <div id = "d"></div>
 <div id = "d1"></div>
 <p>我是中国人</p>

 <div id  = "d2">
   我喜欢孙悟空我喜欢孙悟空我喜欢孙悟空我喜欢孙悟空我喜欢孙悟空我喜欢孙悟空我喜欢孙悟空
          我喜欢孙悟空我喜欢孙悟空我喜欢孙悟空我喜欢孙悟空我喜欢孙悟空我喜欢孙悟空我喜欢孙悟空
          我喜欢孙悟空我喜欢孙悟空我喜欢孙悟空我喜欢孙悟空我喜欢孙悟空
 </div>
 </body>
</html>

30 z-index属性

 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>z-index属性</title>
 <style type="text/css">
  *{
   padding:0px;
               /*
                四边设置:padding:上 右 下 左
                          padding:上下 左右
                          padding:一个值
               */  
   margin:0px;/*外边距*/
              /*
               margin:10px  20px  30px    40px; 
                             top   right  bottom left     
              */
  }
  div{
   width:200px;
   height:200px;
  }

  #d{
   position:absolute;
   left:100px;
   top:100px;
   background-color:red ;

   z-index:10 ;
                      /*设置元素的堆叠顺序,如果为正数,则离用户更近,为负数则表示离用户更远。*/
  }
  #d1{
   position:absolute;
   left:200px;
   top:200px;
   background-color:green ;
   z-index:5;
  }
 </style>
 </head>
 <body>
   <div id  ="d">d</div>
   <div id = "d1">d1</div>
 </body>
</html>

 

 31 导航栏菜单案例

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>导航栏菜单的制作</title>
 <style type="text/css">
   li{
   float:left;
   margin-left:50px;
   }   
  ul{
   list-style:none;
   width:900px;
   height:30px;
   background-color:black ;
   padding-top:10px;
   padding-left:0px;
  }
  a{
   text-decoration:none;
   color:white;
  }

 </style>
 </head>
 <body>
   <ul>
    <li><a href = "#">首页</a></li>
    <li><a href = "#">学习论坛</a></li>
    <li><a href = "#">学员问答</a></li>
    <li><a href = "#">IT圈子</a></li>
    <li><a href = "#">实时课堂</a></li>
    <li><a href = "#">客户端下载</a></li>
    <li><a href = "#">帮助</a></li>
   </ul>
 </body>
</html>

 32 鼠标属性

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>鼠标的样式</title>
 <style type="text/css">
   p:hover{
   cursor:pointer;/*光标呈现为指示链接的指针(一只手)*/
              /*值:crosshair(光标呈现为十字线)|auto(默认。浏览器设置的光标)|help(帮助)*/      
   }
 </style>
 </head>
 <body>
      <p>你好</p>
 </body>
</html>

 33 标准盒子模型

图片 1

 

 34 IE盒子模型

图片 2

CSS(Cascading Style
Sheets):用来表示HTML或XML等文件样式的计算机语言;
作用:定义网页的外观,统一的方式,实现内容(…

CSS基础,css

学习笔记(一) HTML+CSS基础课程,学习笔记css

这个周把慕课网的《HTML+CSS基础课程》课程学完,内容都是非常非常基础的,不过还是学到了几个小知识点,记下来先。

CSS基础,css基础语法

一、CSS语法

1、CSS 语法由三部分构成:选择器、属性和值;

  eg:selector {property: value} 选择器 (selector) 通常是你希望定义的
HTML 元素或标签,属性 (property)
是你希望改变的属性,并且每个属性都有一个值。

2、如果值为若干单词,则要给值加引号。eg:p {font-family:
"sans serif";}

3、是否包含空格不会影响 CSS 在浏览器的工作效果,同样,与 XHTML 不同,CSS
对大小写不敏感。不过存在一个例外:如果涉及到与 HTML
文档一起工作的话,class 和 id 名称对大小写是敏感的。

4、可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。

  eg:h1,h2,h3,h4,h5,h6 {
      color: green;
     }

5、继承:生效的前提是这个属性没有自己的样式

  eg:     body{color:red;}    
//单独定义了样式的就体现自己的样式,未被定义的就体现body的样式

 


 

二、选择器

1、派生选择器:通过依据元素在其位置的上下文关系来定义样式.

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>选择器</title>
 6     <style type="text/css">
 7         li strong{font-style: italic;}
 8     </style>
 9 </head>
10 
11 <body>
12     <p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p>
13     <ol>
14         <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
15         <li>我是正常的字体。</li>
16     </ol>
17 </body>
18 </html>

  效果:

    图片 3

2、id选择器:

    id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id
选择器以 “#” 来定义。id 属性只能在每个 HTML
文档中出现一次。在现代布局中,id 选择器常常用于建立派生选择器。

3、类选择器:

    在 CSS
中,类选择器以一个点号显示类名的第一个字符不能使用数字!和 id
一样,class 也可被用作派生选择器。

4、属性选择器:对带有指定属性的HTML元素设置样式

    *选择器如果不指定其值,它的值怎么写都无所谓,如果指定了其值,那么必须按照其具体的值来写,如果值变化,那么将不再生效。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>选择器</title>
 6     <style type="text/css">
 7         [title]{color:blue;}
 8         [title=t]{color:red;}
 9     </style>
10 </head>
11 
12 <body>
13     <p title="t">标题为t的属性选择器</p>
14     <p title="te">标题为te的属性选择器</p>
15     </ol>
16 </body>
17 </html>

  效果:

    图片 4


 

三、CSS背景

1、背景颜色:background-color

2、背景图像:background-image

3、背景重复:background-repeat

    *属性值 repeat
导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。

    *repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复。

    *no-repeat 则不允许图像在任何方向上平铺。

  (1)在水平方向重复:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>背景</title>
 6 <style type="text/css">
 7     body{
 8         background-image:url(1.png);
 9         background-repeat:repeat-x;
10         }
11 </style>
12 </head>
13 
14 <body>
15 </body>
16 </html>

  效果:

图片 5

4、背景定位:background-position

  为 background-position 属性提供值有很多方法。

  (1)可使用关键字:top、bottom、left、right 和
center。通常,这些关键字会成对出现,如果只出现一个关键字,则认为另一个关键字是center。

  (2)还可以使用长度值,如 100px 或
5cm。长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

  (3)最后也可以使用百分数值。百分数值同时应用于元素和图像,不同类型的值对于背景图像的放置稍有差异。background-position
的默认值是 0% 0%,在功能上相当于 top left。

 5、背景关联: background-attachment

  如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。可以通过
background-attachment属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:

  *background-attachment 属性的默认值是
scroll,也就是说,在默认的情况下,背景会随文档滚动。


四、CSS文本

1、CSS文本属性:

  图片 6

2、缩进文本首行:

  (1)通过使用 text-indent
属性,所有元素的第一行都可以缩进一个给定的长度,一般来说,可以为所有块级元素应用
text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用
text-indent
属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。

  (2)text-indent
还可以设置为负值。利用这种技术,可以实现很多有趣的效果,比如“悬挂缩进”,即第一行悬挂在元素中余下部分的左边。不过在为
text-indent
设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>文本</title>
 6 <style type="text/css">
 7     #id1{text-indent:1cm;color:#F03;}
 8     #id2{text-indent: -1cm;}
 9 </style>
10 </head>
11 
12 <body>
13     <p id="id1">这是用来测试CSS文本属性的</p>
14     <p id="id2">这是用来测试CSS文本属性的</p>
15 </body>
16 </html>

  效果:

    图片 7

3、字间隔(word-spacing 属性)、字母间隔(letter-spacing
属性):可正可负

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>文本</title>
 6 <style type="text/css">
 7     p.spread {word-spacing: 20px;}
 8     p.tight {word-spacing: -0.5em;}
 9     h1 {letter-spacing: -0.3em;}
10     h4 {letter-spacing: 20px;}
11 </style>
12 </head>
13 
14 <body>
15     <p class="spread">This is a paragraph. The spaces between words will be decreased.</p>
16     <p class="tight">This is a paragraph. The spaces between words will be increased.</p>
17     <h1>This is header 1</h1>
18     <h4>This is header 4</h4>
19 </body>
20 </html>

  效果:

  图片 8

4、字符转换:text-transform

    这个属性有 4 个值:

  • none
  • uppercase:将所有字母全部变成大写
  • lowercase:所有字母全部变成小写
  • capitalize:单词首字母大写

5、文本装饰:text-decoration

    text-decoration 有 5 个值:

  • none:none
    值会关闭原本应用到一个元素上的所有装饰(去掉超链接的下划线)
  • underline:对元素加下划线
  • overline:在文本的顶端画一个上划线
  • line-through:在文本中间画一个贯穿线
  • blink:让文本闪烁

6、空白符:white-space

  图片 9


五、CSS字体

1、CSS字体属性

  图片 10


六、CSS列表

1、CSS列表属性

  图片 11

2、list-style-type的值:

  *无序列表:disc:实心圆;circle:空心圆;square:实心方块;none:什么都没有

  *有序列表:decimal:(1.2.3.);lower-roman:(i.ii.iii.);upper-roman:(I.II.III.);lower-alpha:(a.b.c.);upper-alpha:(A.B.C.)

3、list-style-position的值:设置列表中列表项标志的位置

  inside往内边缘靠;outside:往外边缘靠

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>列表</title>
 6 <style type="text/css">
 7     ul.inside {list-style-position: inside;}
 8     ul.outside {list-style-position: outside;}
 9 </style>
10 </head>
11 
12 <body>
13     <p>该列表的 list-style-position 的值是 "inside":</p>
14     <ul class="inside">
15         <li>Earl Grey Tea - 一种黑颜色的茶</li>
16         <li>Jasmine Tea - 一种神奇的“全功能”茶</li>
17         <li>Honeybush Tea - 一种令人愉快的果味茶</li>
18     </ul>
19     
20     <p>该列表的 list-style-position 的值是 "outside":</p>
21     <ul class="outside">
22         <li>Earl Grey Tea - 一种黑颜色的茶</li>
23         <li>Jasmine Tea - 一种神奇的“全功能”茶</li>
24         <li>Honeybush Tea - 一种令人愉快的果味茶</li>
25     </ul>
26 
27 </body>
28 </html>

  图片 12


七、CSS表格

1、CSS<table>属性

  图片 13

2、table-layout的值:

  图片 14

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>表格</title>
 6 <style type="text/css">
 7     table.one{table-layout: automatic}
 8     table.two{table-layout: fixed}
 9 </style>
10 </head>
11 
12 <body>
13     <table class="one" border="1" width="100%">
14         <tr>
15             <td width="20%">1000000000000000000000000000</td>
16             <td width="40%">10000000</td>
17             <td width="40%">100</td>
18         </tr>
19     </table>
20     <br />
21     
22     <table class="two" border="1" width="100%">
23         <tr>
24             <td width="20%">1000000000000000000000000000</td>
25             <td width="40%">10000000</td>
26             <td width="40%">100</td>
27         </tr>
28     </table>
29 </body>
30 </html>

  效果:

  图片 15


八、CSS轮廓

1、CSS边框属性

  图片 16

2、outline-style 属性:用于设置元素的整个轮廓的样式

  图片 17

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>轮廓</title>
 6     <style type="text/css">
 7         
 8         p.dotted {outline-style: dotted}
 9         p.dashed {outline-style: dashed}
10         p.solid {outline-style: solid}
11         p.double {outline-style: double}
12         p.groove {outline-style: groove}
13         p.ridge {outline-style: ridge}
14         p.inset {outline-style: inset}
15         p.outset {outline-style: outset}
16     </style>
17 
18 </head>
19 
20 <body>
21     <p class="dotted">A dotted outline</p>
22     <p class="dashed">A dashed outline</p>
23     <p class="solid">A solid outline</p>
24     <p class="double">A double outline</p>
25     <p class="groove">A groove outline</p>
26     <p class="ridge">A ridge outline</p>
27     <p class="inset">An inset outline</p>
28     <p class="outset">An outset outline</p>
29 
30 </body>
31 </html>

  效果:

  图片 18

3、在一个声明中设置所有轮廓属性:

  eg:border:red solid thin;

    “border”后面的三个参数的含义是:边框线的宽度是:thin(细线);边框线的类型:solid(实线);边框线的颜色:red(红色)。

 

  

一、CSS语法 1、CSS
语法由三部分构成:选择器、属性和值; eg:selector {property: value}
选择器 (selector) 通常是你希望定义…

CSS基础语法(一) CSS的3种引入,css3种

CSS样式表

CSS可算是网页设计的一个突破,它解决了网页界面排版的难题。可以这么说,HTML的Tag主要是定义网页的内容(Content),而CSS决定这些网页内容如何显示(Layout)。

Web早期,HTML是一种很有限的语言,这种语言不关心外观,它只是一种简洁的小型标记机制。

随着Mosaic网页浏览器的出现,网站开始到处涌现。对于页面改变外观的需求增加,于是增加了类似<font>和<big>之类的标记元素。

几年之后,大多数网站标记几乎完全由表格和font元素组成,且对于所要表现的内容不能传达任何实际含义,使文档可用性降低,且不易于维护。

于是1995年,W3C发布了CSS草案,试图解决结构与样式混杂的问题。

1996年,W3C正式推出CSS1。

1998年,推出CSS2。

2001年从CSS3开始,CSS这门语言分割成多个独立的模块,每个模块独立分级,且只包含一小部分功能。

2011年开始设计CSS4

 

 一、css样式表的引入

1.内嵌样式表

内嵌样式表是写在Tag(标签)里面的。内嵌样式只对所在的Tag有效
。(如果有多种样式,内嵌式会覆盖其它的样式,并生效自己的)

 示例:

 <p style="font-size:20pt; color:red"></p>

这个style定义<p></p>里面的文字 是20pt字体,字体颜色是红色。

 

2.内部样式表

内部样式表是写在HTML的<head></head>里面的。内部样式表只对所在的网页有效。

内部样式表要用到style这个Tag,写法如下 :

 <style  type="text/css">
     div{
           color : red;
         }
</style>

 

3.外部样式表

如果很多网页需要用到同样的样式(Styles),要用外部样式表。外部样式表需要将样式写在一个css文件中,然后在页面中用<link>标签引入,在需要应用该样式的每个页面中引入该文件。**

示例:

<HTML>

<HEAD>

   <link href="../css/a.css%20" rel ="stylesheet" type="text/css ">

</HEAD>

<BODY>…</BODY>

 </HTML>

1、<link>标签位置一般写在<head>标签之内。

2、css样式文件名称以有意义的英文字母命名,如 main.css。

3、href=””是引入css的路径

4、rel=”stylesheet” type=”text/css” 是固定写法不可修改。

 

记住他们的优先级:内联式 > 嵌入式 > 外部式

在CSS中也有注释语句:用/*注释语句*/来标明  (Html中使用<!–注释语句–>)

 

) CSS的3种引入,css3种 CSS样式表
CSS可算是网页设计的一个突破,它解决了网页界面排版的难题。
可以这么说,HTML的Tag主要是…

 一、什么是CSS

  W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化。其倡导中第一条的“表现”指的便可以说是CSS。CSS全称Cascading
StyleSheets,中文名为层叠样式表,是一种用来表现HTML等文件样式的计算机语言。

<a>超链接发送邮件

图片 19

直接上把他的图片给挪过来了,我就不打字了。

例:<a
href=”mailto:[email protected]?subject=主题名称&body=邮件内容”>对此影评有何感想,发送邮件给我</a>

 二、CSS的常用选择器

  1、标签选择器

    写法:HTML标签名

    作用:可以选中页面中,所有与选择器同名的HTML标签。

    图片 20

  2、类选择器    

    写法:.class名{}
    调用:在需要调用选择器样式的标签上,使用class=”class名”调用选择器。
    优先级:类选择器大于标签选择器 。两个起冲突时,优先级高的生效

    图片 21

  3、id选择器

    写法:#id名{}

    调用:需要调用样式的标签,起一个id=”ID名”

    优先级:id选择器大于class选择器

    注意:整个页面中,不能发出现同名ID

  

        

      【class选择器与ID选择器的区别】

      1、写法不同:class选择器用.声明,ID选择器用#声明。
      2、优先级不同:ID选择器>class选择器。
      3、作用范围不同:class选择器可以多次调用,ID选择器只能使用一次。

  4、通用选择器

    写法:*{}

    作用:可以选中页面中所有的HTML标签。

    优先级:最低!!!

    图片 22

  5、并集选择器

      写法:选择器1,选择器2,……,选择器n{}

      生效规则:多个选择器取并集,只要标签满足其中任意一个选择器,样式即可生效。

    图片 23

  6、交集选择器

      写法:选择器1选择器2……选择器n{}  所有选择器紧挨着,没有分隔

      生效规则:多个选择器取交集,则必须满足所有选择器的要求,才能生效。

    图片 24

  7、后代选择器

      写法:选择器1 选择器2 …… 选择器n{}  选择器之间有空格间隔

      生效规则:只要满足,后一选择器是前一个选择器的后代,即可生效。(后代包括子代、孙代、重孙代。。。)通俗的讲:只要后一个选择器,在前一个选择器里面即可。

    图片 25

  8、子代选择器

      写法:选择器1>选择器2>……>选择器n{}
 选择器之间用>间隔

      生效规则:必须满足,后一个选择器是前一个选择器的直接子代,才能生效。(中间不能间隔人和标签)。

    图片 26

CSS选择器权值

 标签的权值为1,

类选择符的权值为10,

ID选择符的权值最高为100

例: p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1+1=2*/

.warning{color:white;} /*权值为10*/

p span.warning{color:purple;} /*权值为1+1+10=12*/

#footer .note p{color:yellow;} /*权值为100+10+1=111*/

 三、CSS导入方式和优先级

  1、优先级的权重问题

      1、css生效的第一原则是:近者优先!!即,哪个选择器作用于最里层标签,则这个选择器生效。
      2、当选择器作用于同一层时,可以根据优先级权重,进行累加计算:
        id选择器*100>class选择器*10>标签选择器*1
        注意:并集选择器,相当于多个选择器拆开写,所以,并集选择器优先级不能累加。
      3、当选择器作用于同一层,且优先级权重相等时。则,写在最后选择器生效。

*  2、*引入css的三种方式

      1、行内样式表:直接在HTML标签中,使用style=””的方式引用;

           <div>3、导入css文件的两种方式

      ①在<head>标签中,使用link链接:<link
rel=”stylesheet” type=”text/css” href=”css/02_css.css” />
      ②在<style>标签中,使用@import导入; @import
url(“css/02_css.css”);【一般不用】

  4、【两种导入方式的区别】

      ①link属于标准的HTML标签,而@import不是标准标签
      ②link可以兼容所有低版本浏览器,而@import只在css2之后能用;
      ③link是将两个文件链接起来,起桥梁作用;而@import相当于将css文件复制到HTML文件中;
      ④link会在HTML文件边加载的过程中,边链接css文件;@import会在HTML文件全部加载完以后,再导入css文件;
      综上所述,我们使用link链接的方式,加载css文件。

  5、引入外部css样式表

      rel:选择stylesheet
      type:选择text/css:可以省略
      href:表示链接的css文件路径

      图片 27

字母间的间隔

如果想在网页排版中设置文字间隔或者字母间隔就可以使用
letter-spacing来实现

 

 

参考资料:

 四、CSS常用文本属性 

    1、字体、字号类
      ①font-weight:字体粗细;bold-加粗 normal-正常
、lighter-细体
       也可以使用100~900之间的数值。400表示normal,700表示bold
      ②font-style:字体样式。italic-倾斜、normal-正常
      ③font-size:字号。可以写px单位,也可以写%
        200%表示浏览器默认大小(16px)的两倍=32px;
      ④font-family:字体系列(字体族)。可以直接写字体名,也可以写字体系列名;
        常用字体系列:serif-衬线体 sans-serif-非衬线体;
         font-family可以接收多个值,用逗号分隔。表示优先使用第一个,如果没有这种字体,依次向后使用。
        通常一个值放字体系列名;
         eg:font-family:”黑体”,”微软雅黑”,sans-serif;
      ⑤font缩写形式:
        >>>顺序必须是:
           font-weight font-style font-size/line-height
font-family
        >>>不同属性之间,用空格分隔;
        >>>font-size/line-height必须一组,用/分隔;
        >>>font-family多个字体之间,用逗号分隔;
        >>>eg:font:bold italic 6px/100px
“微软雅黑”,sans-serif;

      

    2、字体颜色
      ①color:字体颜色 。可以使用单词、十六进制、RGB等
      ②opacity:透明度,可选值0-1
        [opacity和rgba的区别]
        rgba本身可以设置颜色,而opacity必须配合其他颜色属性来用;
        rgba仅仅是让当前元素设置的所有文字、背景、子元素都透明;

              

     CSS中的颜色表示方式
      ①直接使用颜色的英文单词表示:red、green、blue
      ②使用颜色的十六进制数表示:#ffff00
        六位数,两两分组,分别表示红、绿、蓝的配比;
      ③RGB(0~255,0~255,0~255);三位数,分别表示红、绿、蓝的配比;
       rdba();第四位数,表示透明度。

    3、行距、对齐类
      ①line-height:行高。可以写px单位、可以直接写数字(表示默认行距的几倍)、
       也可以写%(表示默认行距的百分比)
        >>>行高重要作用:怎么让单行文字在div中垂直居中?
          设置行高等于div的高度,即可让单行文字垂直居中。
      ②text-align:设置区域内的行级元素水平方式;left/center/right
      ③letter-spacing:字符间距,字与字之间的距离
      ④text-decoration:文本修饰:
          underline-下划线、overline-上划线、line-through-删除线、none
      ⑤overflow:设置超出区域文字的显示方式。
          >>>overflow;hidden;超出区域的文字隐藏不显示;
          >>>overflow:scroll;无论文字多少,都会显示水平垂直滚动条;
          >>>overflow:auto;自动,默认效果。文字多显示滚动条,文字少不显示滚动条;
          >>>可以使用overflow-x和overflow-y单独修改两个方向的滚动条;
            overflow-y:scroll;overflow-x:hidden;
      ⑥text-overflow:设置行末多余文字的显示方式;
          >>>clip-多余文字裁剪掉
ellipsis-多余文字省略号显示
          >>>显示省略号,需要配合white-space:nowrap;使用
          >>>【重点内容】设置行末显示省略号:(三行代码,缺一不可)
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
      ⑦white-space:nowrap;设置中文行末,不断行显示
      ⑧text-indent:首行缩进。
      ⑨-webkit-text-stroke: 0.5px blue; 文字描边
        -webkit:表示只要webkit内核的浏览器生效、常见的有chrome、safari
      ⑩text-shadow:文字阴影。有四个属性值,空格分隔;2px 2px 2px
green;
          >>>水平阴影距离,正数表示阴影右移,负数左移;
          >>>垂直阴影距离,正数表示阴影下移,负数上移;
          >>>阴影模糊距离,0表示阴影一点不模糊;
          >>>阴影的颜色;

 4、CSS常用背景属性

    1、background-color:背景色
    2、background-image:背景图。使用url(””)选择背景图片。
       背景图和背景色同时存在时,背景图覆盖背景色。
    3、background-repeat:背景图的重复方式。
      no-repeat:不平铺、repeat:平铺、repeat-x:沿x轴平铺、repeat-y:沿y轴平铺。
    4、background-size:背景图的大小
      [指定宽度、高度]
      >>>宽度高度的指定,可以写px,也可以写%(父容器宽高的百分比)
      >>>当写两个属性时,分别表示宽度、高度;
      当写一个属性时,表示宽度、高度将会等比缩放;
      [其他属性值]
      >>>contain:图片等比缩放,直到宽或高中较大的一边缩放到100%为止。
      (可能导致较短的一边<100%,图片无法盖住全部区域)
      >>>cover:图片等比缩放,直到宽或高中较小的一边缩放到100%为止。
      (可能导致较大的一边>100%,图片超出区域显示不全)
    5、background-position:背景图偏移量
        >>>指定位置:left/center/right
top/center/bottom
          当只写一个值时,另一个默认居中。
        >>>指定坐标:两个属性分别表示 水平位移
垂直位移
      ①坐标的值,可以是px单位,也可以是百分数
      ②当写像素单位时:(左负右正,上负下正)
        水平方向:正数右移,负数左移
        垂直方向:正数下移,负数上移
      ③当写%(百分数)时:
        一般只能是正数。表示的是,去掉图片的宽高,剩余空白区域的分布比例。
        eg:background-position:30%
水平方向去掉图片宽度,剩余区域3:7分。

0基础怎自学html与css

根据经验,网页界面设计是就业的一个方向。但是,至少要涉及htmlcss,甚至Dreamweaver,PS之类的知识技能,还要懂得些网络知识。
动手能力很重要,背标签意义不大。
成考靠自己,学习环境不行的。
如果有计算机基础,年龄不大,有兴趣,倒是可以试试。
感觉,入门容易,但是学精也不容易。要知道,每年毕业的学生中有太多的人在进行专业地学习,与他们竞争,你没基础,自学,难度很大的。除非有天份,你可以与他们竞争,否则,放弃它,选择更擅长的,会更好些。
建议:你从网上找些资料,包括就业的要求及计算机各专业的课程设置。你考虑与他们竞争,看有没有信心,有,可以学。
 

 5、CSS伪类选择器

    1、写法:伪类选择器,在选择器后面,用:分隔,紧接伪类状态;
        eg: .a:link
    2、超链接的伪类状态:
      :link:未访问状态 :visited已访问状态
      :hover-鼠标指上状态
:active-激活选定状态(鼠标点下未松开)
      注意:当超链接多种伪类状态同时存在时,必须按照link-visited-hover-active的顺序,
         否则会导致部分选择器不生效
    3、input的伪类状态:
      :hover :focus(获得焦点状态) :active
      注意input的多种状态同时存在时,必须按照上面的顺序;
    4、其他标签,基本只用:hover事件;

  6、CSS盒子模型

    1、margin 外边距

      ①、只写一个值:表示四周的外边距均为指定的值;
      ②、写两个值:第一个数为上下外边距 第二个数为左右外边距;
      ③、写三个值:分别表示上右下三个方向,左边默认等于右边;
      ④、写四个值:表示上右下左四条边顺时针方向;
      ⑤、margin:0 auto;设置块级元素,在父容器中水平居中!!!
    2、padding 内边距   

      设置方式与magin完全相同;
      注意:设置padding,将会导致div区域被撑大!!!使用时必须注意div的实际的宽高是多少!!!!

    3、边框

      1、设置边框需要三个属性:宽度,样式,颜色  
 原则上三个属性缺一不可,顺序可以随便修改;
      2、可以使用top、right、bottom、left分别设置四个边

    4、当父盒子包裹子盒子,给子盒子添加margin-top时,子盒子与父盒子的上边线并不能分开,而是会导致,两个盒子同时掉下来。    

      [解决办法]
      1、给父盒子添加一点padding-top;不推荐使用,会导致父盒子结构多余1px的padding;
      2、给父盒子添加1px的border-top;同样会导致1px的多余空间,不推荐使用;
      3、给父盒子或者子盒子添加浮动;可能会由于浮动,一定程度的影响页面的布局;
      4、给父盒子添加overflow属性;推荐使用的方式。

    5、border-radius 圆角    

      1、border-radius可以接受8个属性值,分别表示:x轴(左上、右上、右下、左下角)/y轴(左上、右上、右下、左下角)
          eg:border-radius:10px 20px 30px 40px/10px 20px
30px 40px
      2、缩写形式:
        只写x轴,y轴将默认等于y轴;
        四个角写不全,默认对角相等;
        只写一个值,默认8个数均等;
          eg:border-radius:50px 20px;
      3、当圆角弧度>=正方形边长一半,将会显示为圆形。

    6、border-image  图片边框    

      1、border-image:一共可以放10个属性值:
        ①图片的路径:url();
        ②图片的切片宽度:4个值,分别代表上下左右四跳边;
      通过4个切线切割,可以将图片分为九宫格,九宫格四个角分别对应边框的四个角(不会进行任何拉伸),九宫格四个边分别对应四条边框(会根据设置进行拉伸/铺完/重复等操作)
      
          注意:写的时候必须不能带px单位!!!!!
        ③边框的宽度:4个值,分别代表上右下左四条边框的宽度;
          注意:写的时候必须带px单位,与切片宽度用/分隔
        ④边框的重复方式:stretch(拉伸)、round(铺满)、repeat(重复)
      [round和repeat的区别]
      round:会对四条边进行适当的拉伸、压缩,确保四条边可以重复整数次;
      repeat:会保持每条边的宽度长度比例不变,可能导致四角处,无法显示一条完整的边;

    7、box shadow  盒子阴影

      6个属性值,用空格分隔;
      ①x轴阴影距离(必选):可正可负,正—-右移,负—-左移;
      ②y轴阴影距离(必选):可正可负,正—-下移,负—-上移;
      ③阴影的模糊半径(可选):只能是正数,默认为0.数值越大,阴影越模糊;
      ④阴影扩展半径(可选):可正可负,默认为0,数值增大,阴影扩大;数值减小,阴影减小;
      ⑤阴影颜色(可选):默认为黑色
      ⑥内外阴影(可选):默认为外阴影。 inset表示内阴影

    8、盒子模型分类
      1、 标准盒子(W3C盒子):
我们设置的宽度和高度,仅仅包含content部分;
再添加padding或border,会导致盒子变大;
      2、 IE盒子(怪异盒子):
我们设置的宽度和高度,包含content+padding+border;再添加padding或border,会压缩content区域,但盒子总大小不变; 

怎快速有效的学习CSS+div 刚看了一点点的html基础 但是不知道怎学了 很乱

我开始学HTML的时候,就是模仿别人站,下载模板来进行学习的。
有兴趣就会花时间去学,这样学得就快。

CSS学习的重点还是在于多写代码,你可以先从控制一个DIV开始练习,然后学习大模块布局,两列到三列再到四列,绝对定位到相对定位,再到DIV之间的嵌套布局,做到掌握浮动的层度。
然后再去了解浏览器兼容的东西,再去学习更高层次的与JS联合。
 

HTML+CSS基础课程,学习笔记css
这个周把慕课网的《HTML+CSS基础课程》课程学完,内容都是非常非常基础的,不过还是学到了…

  7、CSS浮动   

    1、标准流中的块级盒子,宽度将会自动伸展为100%;而浮动的块级盒子,宽度不会自动伸展,而是由内容撑开;
    2、 当一个盒子浮动,
标准流中未浮动的其他盒子,将视浮动盒子不存在而占据浮动盒子原来的位置。(浮动盒子,会盖在这个盒子的上方),但是,未浮动盒子中的文字内容,将会受到浮动盒子宽度的影响。(未浮动盒子中的内容,不会被浮动盒子盖住)

    3、由于第二条的原因。可以给受影响的盒子,添加clear属性,清除掉浮动盒子对自身的影响。
      clear可选值:left-清除左浮动影响, right-清除右浮动影响;
       both-同时清除左右浮动影响 ,常选;   

    4、 父盒子没有指定高度。
如果子盒子没有浮动,则父盒子的高度可以被子盒子撑开。如果,父盒子中的所有子盒子都浮动,则父盒子高度将变为0;
      

      [解决所有子盒子浮动,父盒子高度塌陷的问题]
    ① 给父盒子也添加浮动;
    ② 给父盒子添加overflow属性; 推荐使用!!!
    ③ 在父盒子最后,添加一个高度为0的空div。 给这个div添加clear:
both;属性,清除掉浮动效果。
    ④可以将第三条的div,用伪对象选择器::after实现:
      #div4::after{
          display:block;
          content:””;
          height:0px;
          clear:both;
          }

8、CSS定位  

   [相对定位 relative]
    1、使用position: relative;设置元素为相对定位元素;
    2、使用top、right、left调整元素的位置。当left和right同时存在时,left生效;top和bottom同时存在时,top生效。
    3、定位机制:
      ①相对定位时相对于自己原来的位置定位。当top等属性不指定时,元素位置不会发生改变
      ②相对定位,不会释放掉元素在原有文档流中的位置。不会影响其他文档流元素的位置;
    4、关于元素z轴重叠
      ①定位元素,默认的z轴高于普通文档流元素。
      ②同为定位元素,后来者居上。后面的盖住前面的。
      ③可以使用z-index手动调节定位元素的上下层z轴顺序。
      z-index默认为0,而且只能用于定位元素。

   [绝对定位]
    1、使用position:absolute;设置元素为绝对定位;
    2、定位机制:
      ①相对于第一个非static定位的祖先元素进行定位。(即相对于使用了relative、absolute、fixed定位的祖先元素进行定位)
      ②如果所有的祖先元素都未定位,则相对于浏览器左上角进行定位;
      ③使用absolute的元素,会从文档流中完全删除。原有空间会被释放。
   [固定定位]
    1、使用position:fixed;设置固定定位;固定定位,是一种特殊的绝对定位!!!!只是祖先元素无法使用定位锁住;
    2、定位机制:永远相对于浏览器的左上角进行定位,而且不随滚动条的滚动而滚动

   [z-index属性]
    1、作用:根据z-index属性设置的数值,决定元素在z轴方向上的层叠次序;
    2、使用要求:
      ①z-index
只能给定位元素调整层叠次序。relative、absolute、fixed
      ②元素的z-index属性,要考虑父容器z-index的约束:
        >>>如果父容器设置了z-index属性,则子容器的所有元素,将不能脱离父容器层次的约束。(即,父容器设置了z-index,则子容器只能以父容器的数值为准。再给子容器设置z-index,只能调整子容器在父容器层次之内的层叠次序)
        >>>如果父容器没有设置z-index,或者设置z-index:auto;则子容器调整z-index将不受父容器层次约束。
    3、z-index:auto和z-index:0的异同点
      ①z-index:auto;是默认值,与z-index:0;处于同一个平面;
      ②z-index:0;会约束子元素必须与父容器在同一平面;
      z-index:auto;不会约束子元素的层次;
   [clip属性]

    1、作用:clip属性用于裁切图片标签,显示图片的指定区域;
    2、使用要求:clip属性,只能作用于有absolute或fixed定位的图片标签上;
    3、clip属性,接受一个rect()函数,函数传入四个值,分别表示上右下左四条切线的位置;
      注意:与其他属性不同的是,rect中的四个值,上下两个值的距离都是从上边量取;左右两个值都是从左边量取;

 

     

 

    

 

 

 

 

 

 

一、什么是CSS
W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化。其倡导中第一…

相关文章