寒假学习CSS的小记录
这篇博客用来记录本人寒假学习CSS过程中所了解到的小知识、困难以及解决方法。
还会涉及到小程序开发过程中的思考与做法。
目录
- css学习
- 程序开发
- 页面样式美学知识
css学习
1月3日
1.sans-serif对应汉字中的黑体,定义font-family时,最好在最后加一个sans-serif,这样如果所列出的字体都不能用,则默认的sans-serif字体能保证调用,在不同操作系统下,网页字体都能被显示。
2.加上sans-serif就能保证调用的原因
sans-serif无衬线字体,是一类字体,它在操作系统或者浏览器里是可以设置的,你可以把它设置成宋体,也可以设置成微软雅黑,而设置的这种字体肯定是当前系统里存在的字体,所以使用这个字体就一肯能显示出来,所以加上sans-serif就能保证调用。
3.Sans-serif简介:Sans-serif是专指西文中没有衬线的字体,与汉字字体中的黑体相对应。该类字体通常是机械的和统一线条的,它们往往拥有相同的曲率,笔直的线条,锐利的转角。
常见的无衬线字体有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圆、隶书等等。
4.id选择器使用方法
#red {color:red;}
#green {color:green;}
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
id 属性只能在每个 HTML 文档中出现一次。
Q:使用id可以让减少代码的繁琐吗?定义好相同既定的颜色与字体后,在wxml相应部分代码插入id即可。还是用一组更方便呢
5.id 选择器和派生选择器
即使被标注为 sidebar 的元素只能在文档中出现一次,这个 id 选择器作为派生选择器也可以被使用很多次:
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}
p元素和h2元素均被得到了特殊的处理
6.类选择器
.center {text-align: center}
类名的第一个字符不能使用数字
1月4日
1.背景
属性 | 描述 |
---|---|
background | 简写属性,作用是将背景属性设置在一个声明中。 |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
background-color | 设置元素的背景颜色。 |
background-image | 把图像设置为背景。 |
background-position | 设置背景图像的起始位置。 |
background-repeat | 设置背景图像是否及如何重复。 |
①background-color:
可以设置颜色,内边距(padding)
默认值是 transparent(透明)
②background-image:
使用url引用图片
③background-repeat:
在页面上对背景图像进行平铺,属性值 repeat 导致图像在水平垂直方向上都平铺,repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。默认地,背景图像将从一个元素的左上角开始。
④background-position
可以利用 background-position 属性改变图像在背景中的位置。
定位关键词:
a.关键字
例如,top right 使图像放置在元素内边距区的右上角。
根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字 - 一个对应水平方向,另一个对应垂直方向。
如果只出现一个关键字,则认为另一个关键字是 center。
单一关键字 | 等价关键字 |
---|---|
center | center center |
top top | center 或 center top |
bottom | bottom center 或 center bottom |
right | right center 或 center right |
left | left center 或 center left |
b.百分数值
百分数值同时应用于元素和图像。也就是说,图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。
如果图像位于 0% 0%,其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。
如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处,可以这样声明:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:66% 33%;
}
如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%。
background-position 的默认值是 0% 0%,在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非设置了不同的位置值。
c.长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上:
注意,这一点与百分数值不同,因为偏移只是从一个左上角到另一个左上角。也就是说,图像的左上角与 background-position 声明中的指定的点对齐。
⑤background-attachment:
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。
通过 background-attachment 属性可以防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不受到滚动的影响
background-attachment 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动。
2.文本
属性 | 描述 |
---|---|
font | 简写属性。作用是把所有针对字体的属性设置在一个声明中。 |
font-family | 设置字体系列。 |
font-size | 设置字体的尺寸。 |
font-style | 设置字体风格。 |
font-variant | 以小型大写字体或者正常字体显示文本。 |
font-weight | 设置字体的粗细。 |
①CSS字体
5 种通用字体系列:
Serif 字体
Sans-serif 字体
Monospace 字体
Cursive 字体
Fantasy 字体
②font-family:
使用其可以进行设置通用字体或指定具体
当字体名中有一个或多个空格(比如 New York),或者如果字体名包括 # 或 $ 之类的符号,则需要在 font-family 声明中加单/双引号。
③font-style:
该属性有三个值:
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
④font-variant:
小型大写字母不是一般的大写字母,也不是小写字母,这种字母采用不同大小的大写字母。
p {font-variant:small-caps;}
⑤font-weight :
设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。
如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。
⑥font-size
设置文本的大小。
font-size 值可以是绝对或相对值。
普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。
1月6日
⑦text-indent:
实现文本的缩进。
所有元素的第一行都可以缩进一个给定的长度,该长度可以是负值。
p {text-indent: 5em;}
一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。
如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。
⑧text-align:
值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。 justify在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。
所有 text-align 的默认值是 left。
提示:将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现。
1月5日
3.边框
格式:border: 边框粗细 线条格式 边框颜色;
线条格式:
solid(实线)/dotted(点线)/dashed(虚线)
wxss学习
1月5日
1.wxss选择器
①标签选择器
格式:标签名{…}
页面中所有的该标签都为该形式。
如:
view
{
background:black;
}
该页面中所有view的背景均为黑色。
②类选择器
格式:.类名{…}
在页面中元素的标签内添加class=“类名”,在wxss界面上对该类的操作仅反映在该类上。
③后代选择器
格式:.类名 标签名{}/.类名 .类名(第一个为父代,第二个为子代)
在标签内进行嵌套标签,则称嵌套标签为该标签的后代。
要对该后代进行操作,可以单独定义类名,也可以采用后代选择器的形式进行操作。
1月6日
2.wxss常用属性
①line-height:行高
②border-radius:圆角
当设定元素的长与宽时,用百分比设置其圆角
.button{
width:100px;
height:100px;
border-radius:50%;
}
则button元素将变为一个正圆。
③white-space:nowrap(不折行)
④overflow:hidden(文字超出部分隐藏)
⑤text-overflow:ellipsis(文字超出部分用…代替)
③④⑤用于文字超出部分使用…省略
⑥display:
inline-block:允许多个元素占据同一行
flex:设置之后不管屏幕比例如何变化,同一行中两个元素的相对位置永远保持不变。
程序开发
1月12日-1月17日
1.为input加上小图标可以采用view组件包裹input组件和image组件的方法
2.hidden元素只对块状布局生效,dispaly:flex将导致hidden失效
3.利用hidden、bingtap、setdata可以达到点击态的效果
参考链接:
https://www.cnblogs.com/herizai/p/8463916.html
https://www.bilibili.com/video/BV1Mt411c7aD?t=1404
https://blog.csdn.net/weixin_34268843/article/details/89753054
https://www.cnblogs.com/dekevin/p/10248489.html