day03

122 阅读3分钟

1、群组选择器:交集选择器(语法:选择器1选择器2选择器3{},例如div.box{},代表的是有一个div标签并且类名是box。交集选择器的权重是叠加的。#box.box或者是.box#box,类名为box并且id为box的元素)、并集选择器(语法:选择器1,选择器2,选择器3.例如.div1,.div2{},代表的是类名叫做div1的和类名是div2的元素。并集选择器的权重:以逗号区分,自己算自己的。)
2、通配符选择器(通通可以匹配的):*{},通常是用来清除元素的默认样式
3、字体样式:font-size(设置字体大小,一般是偶数)、color(字体颜色)、font-weight(字体加粗 100-900 没有单位,或者是bold,直接就是加粗)、font-family(字体的样式,比如是'楷体'、'宋体')、font-style(字体倾斜)
4、文本属性:text-align(文本水平对齐方式,center、right、justify(两端对齐))、text-indent(首行缩进)、text-decoration: none;(取消下划线)、垂直对齐方式(line-height(行高,行高可以调整元素垂直对齐方式。单行文本:当行高跟容器的高度一样时,垂直居中对齐)
5、图片在容器中的垂直水平居中:给图片上面添加 vertical-align: middle;(top、middle、bottom、默认是baseline(基线对齐)
6、边框属性:边框的形状、颜色、粗细。border: solid 1px black;复合属性。边框必须要有border-style,其他为选填,默认的边框的粗细是1px,默认的边框的颜色是黑色。solid(实线)、dashed(虚线)、dotted(点线)、double(双线)、groove(渐变)。border-left\border-right\border-top\border-bottom
边框弧度:border-radius。
7、边框绘制三角形:倒三角形

div {
    width: 0;
    border-top: 100px solid greenyellow;
    border-bottom: 100px solid transparent;  //设置成透明的
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
     }
//  简洁版
div{
   width:0px;
   border:100px solid transparent;
   border-left-color:yellow;
   }

8、列表属性(有序、无序、自定义的):list-style:none(清除列表的样式)。list-style也是一个复合属性。

li{
   list-style-type: circle;
   list-style-image: url(./img/1.png);  //设置图片的url地址
   list-style-position: inside;  // 只能调图片在li中里外的位置 
  }

9、背景属性:
div{
      width: 300px;
      height: 300px;
      background-color: greenyellow;
      /* 背景图片 */
      background-image: url(./images/yun.png);
      /* 背景平铺 */
      background-repeat: no-repeat;
      /* 背景位置:分别代表水平和垂直方向,这两个值没有顺序 */
      background-position: center center;
      /* 还可以使用数值,分别代表x轴移动位置和y轴移动位置。如果只有一个值,代表水平方向移动,垂直方向自动居中 */
      /* background-position: 50px 50px; */
      background-position-x: 50px;
      background-position-y: 50px;
      background-size:100%; // 一个值代表的是宽度是100%,高度是成原比例缩放的。
      background-attachment: fixed; //背景固定 图片不动 fixed、scroll
   }

background: url('') no-repeat right top/35px 35px #f00;
复合属性:background:路径 是否重复 位置1 位置2/宽度 高度 颜色
多张背景图:路径 是否重复 位置1 位置2/ 宽度 高度,路径 是否重复 位置1 位置2 /宽度 高度 颜色
10、浮动:让正常文档流中的元素脱离文档流。float:left/right/none.
清除浮动:clear:both(清除左右浮动)left、right