css属性

CSS属性

3.1 font-size

设置字体大小,浏览器字体大小一般是12px,自己写的话也可以用14px和16px

3.2 font-weight

设置字体宽度,属性值是根据字体包来选的,一般的属性值有lighter(颜色较轻),light(颜色轻),normal(正常颜色),bold(粗一点),

bold(很粗)

3.3 font-style

设置字体样式,一般设置的是italic(斜体)

3.4 font-family

设置子体,网页上看到的比较舒服的一般都是arial,这个字体是乔布斯刚开始带领团队的时候做的一个字体

3.5 color

设置字体颜色,有三种方式

第一种:土鳖式

color: red / black / blue /green,这种方式是在调试代码时用

第二种:颜色代码

首先补充一下,人们能看到的3中视觉颜色分别是red,green,blue,话说皮皮虾(很皮的虾)能有30种视觉颜色(这句话课外扩展...)

人看到的这三种视觉颜色每个分别都是00到ff(这是一个范围,由浅至深),要表示一个颜色的话,需要将这三个颜色函数范围组合在一起,前面再加一个"#"字符

比如:正红(#ff0000),正绿(#00ff00),正蓝(#0000ff),

备注:如果颜色代码每两位重复可以简写成一个字符(必须保证每两位相同),

如上面的正红可以写成(#f00),正绿(#0f0)

第三种:颜色函数

基本格式:color:rgba(0-255,0-255,0-255,0.5),前三个0-255分别代表人的三种视觉颜色范围,最后一个参数是代表表示Alpha通道,表示透明度

example:

html代码:

<div class="div1">rgba透明度0.4</div>

<div class="div2">rgba透明度0.6</div>

css代码:

div{

margin:10px auto;

width:200px;

height:100px;

text-align: center;

line-height: 90px;

}

.div1{background: rgba(83,172,150,0.4);}

.div2{background: rgba(83,172,150,0.8);}

执行结果:

3.6 text-align

设置单行文本对齐方式,有三个属性值,left(左对齐),center(文本居中),right(右对齐)

3.7 line-height

设置单行文本所占高度,当line-height=height时,文本相对于父元素上下居中,

font-size = line-height时,上下文字之间没有间隙

3.8 text-indent

首行缩进,属性值为xxem(em/像素,是一个相对单位,1em = 1 *font-size(该标签的)

3.9 text-decoration 

设置下划线,中划线,上划线(上划线一般不用),属性值为underline,line-through,overline 和 none

4.0 border 

设置容器的外边框,border是一个复合属性,

基本格式: border : 1px solid black;

第一个属性值是外边框的宽度,这个代表是四周的宽度,

第二个属性值是外边框的样式,有solid(实线),dotted(点虚线/点线),dashed(虚线),

第三个属性值是外边框的颜色,这个颜色跟字体颜色有一样,有三种格式,土鳖式,颜色代码 以及 颜色函数

注:如果写border:1px solid 默认颜色为black;如果写border:1px black或者写border:1px相当于没写border这个属性;如果写border:solid则相当于写border:3px solid black;

4.1 定位(position)

链接:

https://blog.csdn.net/qq_40860137/article/details/84135402

4.2 浮动(float)

链接:

https://mp.csdn.net/postedit

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值