学习小笔记-前端-CSS(1)

目录

1.CSS简介

2.基础选择器

3.文字属性

4.文本属性


1.CSS简介

CSS:选择器{ 样式 }

属性和属性值之间用:分开;多个键值对之间用;区分。

写在<head>中的<style></style>中写。


2.基础选择器

选择器分为:基础选择器(由单个选择器组成,包括:标签选择器,类选择器,id选择器,通配符选择器),复合选择器。

1)标签选择器:HTML标签名作为选择器,按标签名称分类,对一类标签修改样式。

标签名 {
    属性1: 属性值1;
    ...
}

2)类选择器:

.类名 {
    属性1: 属性值1;
    ...
}

<标签名 class='类名'> 啊吧啊吧 </标签名>

多类名:用空格隔开

<div class="red font35"> </div>

3)id选择器:

#id名 {
    属性1: 属性值1;
    ...
}
<标签名 id='id名'> 啊吧啊吧 </标签名>

4)通配符选择器:(表示对选取页面中所有元素,不需要调用,对所有元素使用)

* {
    属性1: 属性值1;
    ...
}

3.文字属性

1)字体font-family

各个字体之间用,隔开

由空格隔开的多个单词组成的字体加引号

常见字体:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'(字体顺序为检测显示优先级)

2)大小font-size: 20px;

px为像素值

谷歌默认为16px

对body设置字体大小属性不影响标题标签。标题标签需单独设置

3)粗细font-weight

normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
bold : 粗体。相当于number为700。也相当于b对象的作用
bolder : IE5+ 特粗体
lighter : IE5+ 细体
number : IE5+ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

4)样式font-style

normal : 正常的字体
italic : 斜体。对于没有斜体变量的特殊字体,将应用oblique
// oblique : 倾斜的字体

5)复合属性font

font: font-style font-weight font-size/line-height font-family;
font: italic 700 16px 'Microsoft yahei';

font-size 与 font-family 属性必须有。


4.文本属性

1)颜色color:

预定义颜色值,十六进制值#ff0000,RGB代码:rgb(255,0,0)或rgb(100%,0%,0%)。

2)对其文本text-align:设置水平对齐方式

left :  左对齐
right :  右对齐
center :  居中
justify :  两端对齐

 3)装饰文本text-decoration:加线

none :  无装饰
// blink :  闪烁
underline :  下划线
line-through :  贯穿线
overline :  上划线

4)文本缩进text-indent

text-indent : length(px:像素;em:相对单位)
参数:
length : 百分比数字|由浮点数字和单位标识符组成的长度值,允许为负值。请参阅长度单位

5)行间距line-height:行间距=上间距+文本高度+下间距,调整行间距是改变上间距和下间距。 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值