搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 新手学前端 > 第二章 CSS之属性

第二章 CSS之属性

新手学前端 2019-11-08
 学习CSS之前,首先要熟悉CSS属性。
先来一段HTML,先介绍背景颜色以及字体大小。
<p>写点文字</p><p>写点文字</p><div>写点文字</div><div>写点文字</div>
标签内加点文字,如果不知道写什么,给个小方法,写"lo"看到提示后,直接回车,会出现一些测试文字。
在样式中,属性和值之间,用冒号(:)来区分,一对属性值结束之后,用分号(;)表示结束,最后一对属性值可以不写分号,但是建议写上。
好了,按照上面这个标签来说吧,首先,来给p标签添加背景颜色(background-color),值有几种写法:
第一种: 颜色的英文名字,red/blue等等...
第二种:十六进制写法:#000000~#ffffff,一共6个字符。范围是0-9以及a-f的随意组合,字母不区分大小写。#000000是黑色,#ffffff是白色。
第三种: rgb(0~255,0~255,0~255 ),这个就是RGB颜色,取值0~255之间即可。
第四种:rgba(0~255,0~255,0~255,0~1),这个比rgb多了一个a(Alpha),这个指的是透明度。
好了,来加上样式,p标签加背景颜色:
<p style="background-color:red;">写点文字</p><p style="background-color:#ff0000;">写点文字</p><div>写点文字</div><div>写点文字</div>
运行一下,可以看下效果。然后再给div添加字体大小(font-size)。在HTML中,常用的单位有:
px:绝对大小,设置多少就是多少,精确度高。但是因为不能改变,所以无法用于响应式页面
em:相对大小,相对于自己本身的父级元素有固定尺寸(px)的的大小。如果父级元素的尺寸为20px,那么1em = 20px 。
rem:相对大小,相对于根元素(html)元素的尺寸来设置大小。其他的类似em。
<p style="background-color:red;">写点文字</p><p style="background-color:#ff0000;">写点文字</p><div style="font-size:20px;">写点文字</div><div style="font-size:1em;">写点文字</div>
background和font还有其他属性:
background:背景
    -color:背景颜色
    -image:背景图片
    -position:背景图像位置
    -size:背景图片尺寸
    -repeat:如何重复背景图像
    ...
简写:
background:color position size repeat origin clip attachment image;
background:image repeat position;(个人比较常用的简写)
font:字体
    -style:字体样式 italic(斜体)、normal(默认)
    -weight:字体粗细 100、200...900 bold(加粗) 等
    -size:字体尺寸
    -family:字体体系--宋体、楷体等等
    ...
简写:
font:style variant weight size/line-height(行高) family;
(个人很少使用简写)
这是常用的背景和字体的属性。今天先介绍这些。。。

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《第二章 CSS之属性》的版权归原作者「新手学前端」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注新手学前端微信公众号

新手学前端微信公众号:gh_a63f37a1f3d1

新手学前端

手机扫描上方二维码即可关注新手学前端微信公众号

新手学前端最新文章

精品公众号随机推荐