微信小程序 wxss(css)样式的学习

CSS 背景

CSS 属性定义背景效果常用的方式:

background-color（最常用）
background-color 属性定义了元素的背景颜色.如：
.title {background-color:red;} 就是设置类选择器title的背景颜色为红色

我们上面的 background-color也可以简写为 background，如：
.title {background-color:red;} 也是设置背景为红色

css中颜色设置的三种方式

CSS中，颜色值通常以以下方式定义:
十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

我这里给大家提供一个颜色表，大家可以拿到自己喜欢颜色的十六进制值。
https://tool.oschina.net/commons?type=3
如果这个连接失效了，大家自己百度下“颜色对照表”也可以找到类似的。

部分截图如下。

文本常用样式

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐

text-align: center； 文本居中对齐
text-align: left； 文本居左对齐
text-align: right； 文本居右对齐

文本修饰

text-decoration 属性用来设置或删除文本的装饰

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

color设置文本颜色

如下所示，设置字体颜色为红色的三种方式

/* 英文颜色 /
.title {
color: red;
}
/ rgb设置颜色 /
.title {
color: rgb(255, 0, 0);
}
/ 十六进制设置颜色 */
.title {
color: #FF0000;
}

font-size 设置字体大小

font-size可以用来设置字体的大小

不写这个属性有默认大小
font-size: 30px;
font-size: 50px;

文本样式链接： https://www.runoob.com/css/css-text.html

css边框和边距

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

padding 内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。padding 属性定义元素边框与元素内容之间的空白区域。padding 属性接受像素值或百分比值，但不允许使用负值

padding: 10px;
如果只设置一个值，那么上下左右都是10px
padding: 10px 20px 30px 40px;
按照上、右、下、左的顺序分别设置各边的内边距。这样设置就是内边距的上间距10px，右间距20px，下边距30px，左边距40px
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top
padding-right
padding-bottom
padding-left

border边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。
如下面几种边框

每个边框有 3 个方面：样式，宽度、以及颜色

border-style可以来设置样式

我们通过设置border-style来定义上下左右四个边框样式，当让也可以定义单边样式，如果您希望为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：
border-top-style
border-right-style
border-bottom-style
border-left-style

border-width设置边框的宽度
您可以通过 border-width 属性为边框指定宽度。
同样border-width: 5px;只有一个值的时候是设置上下左右4个边框的宽度。
您也可以通过下列属性分别设置边框各边的宽度：
border-top-width
border-right-width
border-bottom-width
border-left-width

border-color设置边框的颜色
您可以通过border-color 属性为边框指定颜色。
同样border-color只有一个值的时候是设置上下左右4个边框的颜色。
您也可以通过下列属性分别设置边框各边的颜色：
border-top-color
border-right-color
border-bottom-color
border-left-color

当然我们我们的边框宽度，样式，颜色有一种简写方式

.title{
  border:5px solid red;
}

我们只需要一个border属性，就可以设置上下左右四个边框的宽度为5px，样式为solid，颜色为red。

margin外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。margin 没有背景颜色，是完全透明的
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值

Margin - 单边外边距属性
在CSS中，它可以指定不同的侧面不同的边距：
实例
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

margin属性可以有一到四个值。

margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px
margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px
margin:25px 50px;
上下边距为25px
左右边距为50px
margin:25px;
所有的4个边距都是25px

border-radius设置圆角边框

border-radius 主要是用来设置圆角用的
1，直接可以用像素设置圆角大小

.title {
  background: red;
  /* 可以用像素设置圆角 */
  border-radius: 10px;
}

2,如果有宽高值，可以设置border-radius为宽高的一半实现圆形

.title {
  background: red;
  width: 200px;
  height: 200px;
  border-radius: 100px;
}

当有宽高的时候，设置 border-radius为50%同样可以实现上面的圆形功能。

.title {
  background: red;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

学习实例1

<!--pages/css/css.wxml-->
<text class="name">我是彼岸花</text>
<view class="name">我是彼岸花2</view>
<text class="name">我是彼岸花3</text>
<view id="title">我是彼岸花1</view>
<view class="txt">我是背包客</view>
<!--id和class选择器的区别
    class选择器可以多次使用，可以重复
    id选择器只能使用一次，不能重复-->

<view class="txt2">我是背包客2</view>
<view class="txt3">我是背包客3</view>
<view class="root">
    <view class="redmi">红米</view>
</view>
<view class="bot"></view>

/* pages/css/css.wxss */
.name{
    background: red;
}
#title{
    background:rgb(21, 107, 60)  /*颜色通常有以下方式定义：1.十六进制-如："#ff0000",2.RGB-如："rgb(255,0,0)",3.颜色名称-如：red.*/
}
.txt{
    text-align: center;    /*文本对齐*/
    color: hotpink;
    text-decoration: line-through;  /*文本修饰*/
}
.txt2{
    font-size: 40px;
}
.txt3{
    font-size: 50px;  /*设置字体大小*/    
}
/*手机 content区域*/
.redmi{
    background: rgb(102, 61, 156);
}
/*手机盒*/
.root{
    background: pink;
    /*上，右，下，左*/
    padding: 10px 20px 30px 40px;  /*也可以使用padding-top(right,bottom,left)*/    /*padding 内边距*/
    /*设置边框*/
    border-style: solid;
    border-width: 4px;
    border-color: red;   /*也可以用border:red solid 4px*/
    /*设置外边框*/
    margin: 10px;    

}
page{
    background: rgb(169, 228, 9);
}
.bot{
    height:30px;
    background: hotpink;
}

学习实例2

<!--pages/css1/css1.wxml-->
<view class="root">
    <view class="redmi">红米</view>
</view>
<view class="root">
    <view class="redmi">红米</view>
</view>
<view class="root">
    <view class="redmi">红米</view>
</view>
<view class="root">
    <view class="redmi">红米</view>
</view>
<view class="bot">我是彼岸花</view>
<view class="root-f">
    <view class="root-s"></view>

</view>

/* pages/css1/css1.wxss */
/*手机 content区域*/
.redmi{
    background: rgb(102, 61, 156);
    text-align: center; 
}
/*手机盒*/
.root{
    background: pink;
    /*上，右，下，左*/
    padding: 10px 10px 10px 10px;  /*也可以使用padding-top(right,bottom,left)*/    /*padding 内边距*/
    /*设置边框*/
    border-style: solid;
    border-width: 6px;
    border-color: rgb(16, 199, 55);   /*也可以用border:red solid 4px*/
    /*设置外边框*/
    margin:10px 20px 30px 40px;  

}
page{
    background: rgb(197, 199, 192);
}
.bot{
    height:30px 50px;
    text-align: center; 
    background: hotpink;
    border-radius: 30px 50px 60px 70px;

}
.root-f{
    width: 200px;
    height: 200px;
    background: red;
    border-radius:100px;  
}
.root-s{
    width: 150px;
    height: 150px;
    background: rgb(197, 199, 192);
    border-radius:200px;   
}