day44前端开发2之css基础

时间 2019-11-09

标签 day44 day 前端开发 css 基础栏目 CSS 繁體版

原文原文链接

web前端开发1
一.前端三剑客之css
1.选择器:由标签/类/id单独或组合出现
2.做用域:{}内部区域
3.样式块:知足css连接语法的各类样式
eg:引入的基本样式
<head>
  <style>                   
   div {
    color: red
    background-color: cyan;
    font-size: 100px   
   }
  </style>
</head>
二.再html引入css的三种方式 : 行间式 | 内联式 | 外联式
1.行间式
  
  
  
  
  <div style="width: 100px; height: 100px; </div>
2.内联式
  
  
  
  
  
  <head>
   <style>
    div {width: 100px;
    height: 100px;
    background-color: red;
    }
   </style>
  </head>
  <body>
   <div></div>
  </body>
3.外联式
  
  
  
  
  
  
  file: zero.css
  div {
   width: 100px;
   height: 100px;
   background-color: red; }
  file: zero.html
  <head>
   <link rel="stylesheet" type="text/css" href="css/zero.css" />
  </head>
4.三种引入方式的优先级
  注:三种方式间没有优先级 -->

三.css中长度级颜色单位 1.长度单位 px：像素(pixel)，屏幕上显示的最小单位，用于网页设计，直观方便 mm：毫米 cm：厘米 in：英寸 pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，很是简单易用； em：至关长度，一般1em=16px，应用于流式布局 div { width: 100px; <--长--> width: 720pt; 10in width: 100mm; 10cm width: 10em; 一般160px 10rem width: 50vw; 50% view width <--view width表示页面长度--> height: 100px; <--宽--> 2.颜色单位*/ rgb()：三个值可为[0-255]数值或百分比，以,相隔（r:Red g:Green b:Blue） rgba()：前三个值可为像素或是百分比，最后一个为[0, 1]数值，以,相隔（r:Red g:Green b:Blue a:Alpha） hsl()：第一个值为[0,360]数值，后二个值可为百分比，以,相隔（h:Hue s:Saturation l:Lightness） hsla()：第一个值为[0,360]数值，中间二个值可为百分比，最后一个为[0, 1]数值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha） #AABBCC：六个十六进制位，每两位一总体，分别表明Red、Green、Blue，能够简写#abc div { background-color: cyan; background-color: rgb(255, 0, 0); background-color: rgba(255, 0, 0, 0); background-color: #a0c <-- 知足AABBCC形式能够简写为abc --> } 四.经常使用样式 1.字体样式 span { 1.大小:符合长度单位 font-size: 30mm; 2.字重: bold(粗字体) normal(更粗字体) lighter(细字体 ) 100~900(100最细,900最粗) font-weight: 900; 3.行高: 行高设置大于等于字体大小,字体在行高中垂直居中显示 line-height: 50mm; 4.样式: 通常不关心 font-style: normal; 5.字族:能够自定义字族, font-family: "Segoe UI Emoji", "微软雅黑"; <--当Segoe UI Emoji不存在,或不起做用,再选取微软雅黑 --> 6.字体样式总体设置 css语法: 空格隔开为多个值赋值, ,隔开为一个值多值赋值 font: lighter 50mm/80mm "Segoe UI Emoji", "微软雅黑"; } 2.文本样式 span { 1.颜色:符合颜色单位 color: red; 2.水平居中方式:left(左) center(居中) right(右) text-align: center; 3.字划线: underline line-through overline none text-decoration: overline; 4.字间距 letter-spacing: 3px; 5.词间距 word-spacing: 10px; } a { 6.应用场景 text-decoration: none; } div { width: 300px; 7.显示方式 display: inline-block; } div { font-size: 12px; 8.垂直排列方式: top baseline bottom vertical-align: baseline; 9.缩进 text-indent: 2em; } <--遇到连体的英文,html将其解析为一个单词(做为一个总体)--> .div { 10.按标签的设定宽度强行换行,能够在单词(总体)内部换行 word-break: break-all; } 3.背景样式 div { 1.背景图片 background-image: url("data/bg_repeat.gif"); url(背景图片地址) 2.平铺: no-repeat repeat-x repeat background-repeat: no-repeat; 3.定位 10px == 10px center 设置一个值,第二个值默认为center 10px 10px 第一个值控制水平位置,第二个值控制垂直位置 background-position: right center; 4.定位相关的涉及到滚动时的效果: scroll fixed background-attachment: fixed; } div { 5.总体设置(顺序不可变) background: url("data/bg_repeat.gif") 10px 10px no-repeat red; } 五.选择器 1.基础选择器*/ 1.通配选择器(*): 匹配全部(html,body,body中的全部子标签)(具备显示效果的全部标签) * { border: solid; } 2.标签选择器(标签名):匹配指定标签名的对应全部标签 div { width: 100px; height: 100px; background-color: red; } 3.类选择器(.):匹配指定类名对应的全部标签 .dd { font-size: 50px; } 4.id选择器(#):匹配指定id名对应的惟一标签* #ele { color: blue; } 5.总结: 1.通配选择器通常用于总体reset操做(reset操做:清除系统自定义样式) 2.标签与id选择器运用场景并很少,通常不提倡采用id选择器进行布局 html,css都是标记语言,全部对id能够进行多匹配,但js是编程语言.只能匹配到一个 3.类选择器为布局首选(建议基本全用class选择器进行布局) 6.基本选择器优先级:id > class > 标签 > 通配