CSS 样式

CSS 样式

css 引入的三种方式

1. 行内式

2. 内接式

   在 head 标签中 写 style标签

3. 外接式

   <link rel="srtlesheet" href="css的文件路径">
   或者
   <style type="text/css">
       @import "css文件路径"
   </style>

• 权重问题

  数数量 id class 标签

  <style type="text/css">
  
      /*权重问题 数数  数选择器的数量  id class 标签*/
      /*1 0 0*/
      #box{
          color: darkorange;
      }
      /*0 1 0*/
      .box-beijing{
          color: green;
      }
      /*0 1 0*/
      .active{
          color: yellow;
      }
      /*001*/
      div{
          color: red;
      }
  
  /* 行内权重1000 > id 100 > 类 10 > 标签 1*/
  /*继承来的权重为0,与选中的标签没有可比性*/
  </style>

选择器

• 外接式的选择器

/*后代选择器*/
.box1 p{
    color: red;
}
/*子代*/
.box2>p{
    color: yellow;
}
/*组合选择器*/
p,span,a{
    font-size: 12px;
}
*{
    font-size: 14px;
    padding: 0;
    margin: 0;
}
/*交集选择器*/
.box-beijing{
    color: red;
}
p{
    font-size: 20px;
}
p.active{
    background-color: yellow;
}

/* 类型选择器 */
input[type='text']{}
ul li:first-child{ 选择第一个 }
ul li:last-child{ 最后一个 }
ul li:nth-child(4){ 第四个 }
ul li:first-child(2n){ 间隔两个 }


/*伪类选择器  爱恨准则*/ 

/*没有被访问之前的样式*/
a:link{  }
/*访问过后的颜色*/
a:visted{  }
/*鼠标悬浮时的状态*/
a:hover{  }
/*按住时的样式*/
a:active{  }

/* 微元素选择器  content 的内容会添加到 对应的位置 before after */
div:before{
    content: '鸡汤';  
}
div:after{
    /*行内的元素*/
    content: '鸡汤';
    font-size: 20px;

}

常用样式

/*设置字体颜色*/
color: #00b481;
/*设置字体大小*/
font-size: 40px;
/*设置背景色*/
background: #64a8f9;
/*去掉下划线*/
text-decoration: none;
/*设置   小手状态*/
cursor: pointer;
/*显示 转成块*/
display: block;
/*转成行内块*/
display: inline-block;
/*隐藏*/
display: none;
/*隐藏边框*/
border: 0;
/*去除边框*/
outline: none;
/*设置长宽*/
width: 300px;
height: 40px;
/*设置出入框及颜色*/
border: 1px solid #999;
/*将输入框 圆弧*/
border-radius: 2px;
            /*还是在一行显示  转成行内块*/
            display: inline-block;

盒模型

标准文档流下的微观现象

• 空白折叠
• 高矮不齐,底边对齐
• 自动换行

盒模型的计算

• 盒子在文档占据的宽度 = 内容的宽度+2*padding+2*border

width: 200px;  
height: 200px;
padding: 50px;   内边框
border: 1px solid blue;  边线
margin: 30px;  外边框

• padding

  /*四个方向都有值*/
  padding: 30px;
  /*两个值:上下  左右*/
  padding: 20px 30px;
  /*三个值: 上 左右  下 */
  padding: 30px 20px 40px;
  /*四个值: 上 右 下 左 顺时针*/
  padding: 20px 30px 40px 50px;
  padding-top: 20px;
  padding-right: 30px;
  padding-bottom: 40px;
  padding-left: 50px;

• border

  /*根据方向 设置四边线*/
  
  /*设置上边线  solid  实线*/
  border-top: 5px solid black;
  /*设置右边线  dotted  点线*/
  border-right: 5px dotted #1d4fd4;
  /*设置下边线  double 双实线 */
  border-bottom: 5px double black;
  /*下边线 dotted 虚线*/
  border-left: 5px dashed #1d4fd4;
  
  /*根据三要素 设置*/
  /*三要素  粗细   线性样式   颜色*/
  border: 1px solid chartreuse;
  
  /*上  左右  下*/
  border-width: 5px 10px 30px;
  /*实线  电线  虚线*/
  border-style: solid dotted dashed;
  /*上     右      下     左*/
  border-color: #1d4fd4 firebrick aqua darkviolet;
  /*去掉边线*/
  border: 0;
  
  border-left: 100px solid blue;
  border-right: 100px solid blue;
  
  /*画一个圆*/
  border-radius: 50%;
  
  /*画一个三角形*/
  width: 0;
  height: 0;
  /*transparent 透明*/
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid black;
  

  margin

  /*
  css 奇淫技巧   margin垂直方向塌陷
  弹出的边界会重合 以长的为准
  如何避免 只要设置一个方向
  margin  描述的是兄弟标签 的之间的距离
  padding 描述的父子标签
  */
  <div  class="top"></div>
  <div class="header"></div>

  /*让盒子居中*/ 
  margin: 0 auto;
  /*em 相对单位 相对于当前盒子的字体大小*/
  margin: 0 .5em;

overflow 处理溢出问题

/*继承*/
overflow: inherit;
/*超出部分可见*/
overflow: visible;
/*超出部分隐藏*/
overflow: hidden;
/*超出部分有滚动条*/
overflow: scroll;
overflow: auto;

浮动 float

• 浮动的现象
  • 字围效果
  • 脱标(脱离标准文档流)
  • 贴边现象(第一个盒子会贴父盒子的边,第二个盒子浮动会贴第一个盒子的边)
  • 收缩效果(块级元素 隐式的转换成行内)
  • 压盖现象,但是我们不用浮动做压盖.要浮动一起浮动,有浮动清除浮动
  • 如果想做压盖想象 用定位
• 浮动带来的好处
  • 对于布局来说,是非常有用
  • 实现元素并排
• 浮动带来的坏处
  • 前提 是父盒子没有高度,对子盒子设置浮动,那么子盒子的高度不会撑起父盒子高度.因为子盒子设置了浮动,脱标了,不在文档上占位.

/*如果标签一旦浮动,就不区分行内标签还是块级标签,可以任意设置宽高 简称“收缩效果”*/
/*浮动之后 就可以改变 行内标签的大小*/
/*display: inline-block;*/

/*浮动这个标签 向右*/
float: right;
/*浮动这个标签 向左*/
float: left;

• 处理浮动问题

  在浮动行的 标签中 添加一个div 标签 用于处理浮动  添加 下面的样式
  /*处理浮动问题*/
  clear: both;

• 伪元素清除法

  /*伪元素去除  直接复制 此 样式 放上去 修改 clearfix 要 处理的 问题*/
  .clearfix:after{
      /*在行内添加一个点撑开 箱子*/
      content: '.';
      /*水平显示 转成块*/
      display: block;
      /*隐藏  元素不占位置*/
      /*display: none;*/
      /*隐藏 元素  位置还占着呢  */
      visibility: hidden;
      /*设置高度*/
      height: 0;
      /*处理浮动问题*/
      clear: both;
  }

• overflow 清除

  /*但是不要忘了它本来的一层的意思*/
  overflow: hidden;

文本和字体

background-color: rgb(69, 146, 236);

/*RGB的三个数分别是红色R，绿色G，蓝色B，相当于三维坐标。
数值越高颜色越重*/
/*规定每个分量的最大值为255，最小为0。
红色只有红色分量，没有绿色分量和蓝色分量，因此为255，0，0。
绿色与蓝色类似。
黄色=红+绿，相加的结果就是255，255，0。
白色为0，0，0。
黑色为255，255，255。*/

/*实色 rgb*/
background-color: rgb(0,0,255);
/*透明色*/
background-color: rgba(69,146,236,.5);

/*文本对其 默认左对齐  居中  右对齐*/
text-align: left;
text-align: center;
text-align: right;
/*两端对齐*/
text-align: justify;

/*高度居中对齐*/
line-height: 300px;


/*文字之间的距离*/
letter-spacing: 10px;

/*文字开头空两个文字 2em */
text-indent: 2em;

text-decoration: #00b481;

/*下划线*/
text-decoration: underline;
/*中线*/
text-decoration: line-through;
/*上线*/
text-decoration: overline;

/*修改字体*/
font-family: "宋体";
/*字体大小 按比例  字体*/
font: 14px/1.5 "楷体";
/*字体的粗细*/
font-weight: 400~900; 

/* 添加文本 */
div:before{content:"给行内元素左侧添加"}
div:affer{content:"给行内元素右侧添加"}

/* 在 p 标签 中使文本变成快 并在当前大小的盒子中 上下左右居中 */
display:flex;
align-items:center;  # 上下居中
justify-content: space-around; # 左右居中

background属性

• 背景颜色 background-color
  • 颜色表示法: 单词 rgb 十六进制
• 背景图片 background-image:url('')
• 背景图定位 background-position: x方向 y方向
  • 如果x和y方向 是正值,表示调整背景图的位置
  • 如果是负值 表示"精灵图技术"(在一张大图有多张小图片)
• banner图设置 大图来说

background-color: black;
border: 1px solid yellow;
/*设置背景图  默认 横向纵向铺满整个屏幕 */
background-image: url(./images/狗狗.jpg);

/*只显示一张  repeat 重复*/
background-repeat: no-repeat;

/*指定背景   不重复   调整位置   第一项左右 */
background: url("./images/美女桌面.jpg") no-repeat -89px 0;

/*不重复   居中  靠上*/
background: url("./images/美女桌面.jpg") no-repeat center top;

/* 将图片调整到中间 左宽度    高度  精灵图技术 */
/*  如果 x,y 为正值 表示调整背景图
    如果 x,y 为负值 表示切图   */
background-position: 448px -135px;

/*left center right*/
background: url("./banner.jpg") no-repeat center top;

/* 参数: repeat : 平铺  repeat-x : x方向平铺 repeat-y : y方向平铺  */,

背景图:

• background-image:url('链接的图片资源') 默认是横向平铺,纵向平铺

• background-repeat:repeat|no-repeat|repeat-x|repeat-y

• 雪碧图(精灵图技术) background-position: x y

  • 如果x和y是正值,表示的是调整背景图的位置
  • 如果x和y是负值,表示的是切图(精灵图技术)

  使用雪碧图的好处：

  1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
  2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
  3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
  4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便

  不足：

  1）CSS雪碧的最大问题是内存使用
  2）拼图维护比较麻烦
  3）使CSS的编写变得困难
  4）CSS 雪碧调用的图片不能被打印

定位

• 布局的一种方法

• 相对定位

  • position:relative;

  如果对一个盒子仅仅设置相对定位,这个盒子没有任何变化

  参考点

  ​ 以原来的位置

  相对定位有压盖想象,小心相对定位留的坑

  相对定位的作用

  • 微调元素
  • '子绝父相'

• 绝对定位

  position:absolute

  参考点

  ​ 单独设置绝对定位,以top描述,是以页面的左上角(区分浏览器左上角)

  ​ 以bottom描述,是以浏览器左下角

  绝对定位的现象

  • 脱标
  • 压盖(层级提高 用绝对定位)

  父相子绝的参考点

  ​ 父辈元素设置相对定位,子盒子设置绝对定位,是以父辈盒子的左上角为参考点

• 固定定位

  固定定位的现象

  • 脱标
  • 提升层级
  • 页面内容一多,盒子固定住

  参考点

  ​ 以浏览器的左上角

/*相对定位   根据自己原有的位置计算 */
position: relative;
top: 20px;
left: 200px;
/* 绝对定位  脱标  压盖*/
position: absolute;
top: 30px;
left: 50px;
/* 固定定位  脱标  压盖*/
position: fixed;
top: 30px;
left: 50px;
z-index: 1233;  层级显示

z-index

与定位有关系 数值默认0 数值越大 表示层级越高.

• z-index 值表示谁压着谁，数值大的压盖住数值小的，
• 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
• z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
• 从父现象：父亲怂了，儿子再牛逼也没用

重置样式表

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

iconfont 的使用

地址

<i class="iconfont">&#xe643;</i>

unicode引用

---

unicode是字体在网页端最原始的应用方式，特点是：

• 兼容性最好，支持ie6+，及所有现代浏览器。
• 支持按字体的方式去动态调整图标大小，颜色等等。
• 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式

unicode使用步骤如下：

• 第一步：拷贝项目下面生成的font-face

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
  url('iconfont.woff') format('woff'),
  url('iconfont.ttf') format('truetype'),
  url('iconfont.svg#iconfont') format('svg');
}

• 第二步：定义使用iconfont的样式

.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

• 第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#x33;</i>

"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

转载于:https://www.cnblogs.com/zhang-zi-yi/p/10800437.html