前端学习笔记-CSS

css就是搞样式的

1.css的语法规则：由选择器和声明块组成的

选择器：指定设置样式的HTML元素
声明：指定修改什么样式

2.注释

css采用 /* */为注释

3.背景

3.1 css背景属性：

• background-color ：背景颜色
• background-image： 背景图片
  写法：background-image：url(“图片路径”)
• background-repeat： 是否和如何重复背景图片
  值：
  • no-repeat:不重复背景图（当背景图小于浏览器页面的话会重复背景图）
  • repeat:重复
  • repeat-x：在水平方向重复
  • repeat-y：在垂直方向重复
  • inherit：继承父元素的值
• background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动
  scroll：会随着页面滚动背景图移动
  fixed：固定背景图位置
• background-position：背景图片的位置
  百分比：x%（水平方向位置），y%（垂直方向位置）

3.2 opacity属性：背景透明度，值由0.0-1.0，值越小透明度越低

3.3 简写背景属性
只要按照规定的顺序将值全部写在background属性中就可以
规定顺序：
background-color
background-image
background-repeat
background-attachment
background-position
例如：

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

4，边框

属性：boder
边框类型：boder-style
边框类型属性值：dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
insert-3d边框向内凹陷
outset=3d边框向外凸
。。。。
简写边框属性
规则顺序：
border-width
border-style（必需）
border-color

p {
  border: 5px solid red;
}

只有一边的边框：
border-left: 5px solid yellow

border-top: 5px solid yellow

border-right: 5px solid yellow
border-bottom: 5px solid yellow

5.边距

1.外边距：margin：边框之外的距离

margin-top
margin-right
margin-bottom
margin-left

简写：上 右 下 左

p {
  margin: 25px 50px 75px 100px;
}

2.内边距：padding：边框距离内部的距离

6.高度与宽度

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

7.轮廓

边框或者元素外面一圈的东西
语法：
outline-style:轮廓类型
outline-width：轮廓宽度
outline-color：轮廓颜色
轮廓简写：
规则：
outline-width
outline-style（必需）
outline-color

8.文本

1，对齐
1.1文本对齐：text-align:center/left/right
1.2垂直对齐：设置元素的垂直对齐方式。vertical-align:top/middle/bottom
2.文本装饰
text-decoration:
text-decoration:none;     通常用于删除链接的下划线
3.文本转换
text-transform: uppercase（转大写）/lowercase(转小写)/capitalize(首字母大写)
4.文字间距
字母间距，行高（line-height），字间距
5.文本阴影
text-shadow:   2px(水平阴影) 2px(垂直阴影) red(阴影颜色)；

9.字体

字体简写：
     简写规则:
        font-style：字体样式：italic（斜体）
        font-variant：
        font-weight：字体粗细
        font-size/line-height： 字体大小（必须）
        font-family：字体系列（必须）