## CSS基础-常见属性

## CSS基础-常见属性

# HTML被废弃的标签

# 字符实体

# CSS

# 文字属性

# 文本装饰属性

# 颜色属性

## HTML中被废弃的标签

1.为什么HTML中有一部分标签会被废弃?

-因为当前HTML中的标签只有一个作用,就是用来添加语义

而早期的HTML标签中有一部分标签是没有语义的,有一部分标签是用来修改样式的

---

b:

bold 加粗文本,没有语义

u:

underlined 下划线,没有语义

i:

italic 倾斜,没有语义

s:

strikethourgh 给文本添加删除线,没有语义

注意点:

以后再企业开发中,不到万不得已一定不要使用这些被废弃掉的标签

如果一定要使用,一般情况下都是用来作为CSS的钩子来使用

strong == b

ins == u

em == i

del == s

strong语义:定义重要性强调的文字

ins语义(inseted):定义插入的文字

em语义(emphasized):定义强调的文字

del语义(deleted):定义被删除的文字

字符实体

1.在HTML中对空格/回车/tab不敏感,会把多个空格/回车/tab当成一个空格来处理

2.什么是字符实体?

在HTML中有的字符是被HTML保留的,有的HTML字符在HTML中是有特殊含义的,是不能在浏览器中直接显示的

那么这些东西想要显示出来就需要用到字符实体

- 空格,一个 就是一个空格

<

- <小于符号

>

- >大于符号

©

版权符号

通过标签来修改样式的缺点:

1.需要记忆哪些标签有哪些属性,如果该标签没有这个属性,则修改了也没有改变

2.当需求变更时我们需要修改大量的代码才能满足现有的需求

3.HTML只有一个作用就是来添加语义

通过CSS修改样式的好处:

1.不用记忆哪些属性属于哪个标签

2.当需求变更时我们不需要修改大量的代码就可以满足需求

3.在前端开发中CSS只有一个作用,就是用来修改样式

CSS重点就是学选择器和属性

写在head里面的title标签下面

CSS

格式:

标签名称{

属性名称:属性对应的值;

…

}

注意点:

1.style标签必须写在head标签的开始标签和结束标签之间

2.style标签中的type其实可以不用写

默认就是 type=“text/css”

3.设置样式时必须按照固定的格式来写,key:value;

文字属性

1.规定文字样式的属性

-格式:font-style: normal/italic;(普通/倾斜)

-快捷键:

fs font-style: italic;

fsn font-style: normal;

2.规定文字粗细的属性

font-weight: bold;

2.1 单词取值:

bold 加粗

bolder 加粗加粗(但加粗到极限不会继续加粗)

lighter 细线

-快捷键:

fw font-weight:;

fwb font-weight: bold;

fwbr font-weight: bolder

2.2 数字取值:

100-900之间整百的数字

3.规定文字大小的属性

-格式: font-size: 30px;

-单位: px(像素 pixel)

-注意点: 通过font-size设置大小一定要带单位

-快捷键:

fz font-size: ;

fz30 font-size: 30px;

4.规定文字字体的属性

-格式: font-family: ”宋体”;

-注意点:

1.如果取值是中文,需要用双引号或者单引号括起来

2.使用的字体必须是用户电脑里已经安装的字体

-快捷键:

ff font-family: ;

字体属性扩充

1.如果设置的字体不存在,那么系统会使用默认的字体(宋体)来显示

2.如果设置的字体不存在,而我们又不想用默认的字体怎么办?

-可以设置备选方案

-格式:font-famliy:”字体1”,”备选方案1”,”备选方案2”;

3.如果想给中文和英文分别单独设置字体怎么办?

-把英文设置在前面,把中文字体设置为备选方案

-原理:英文字体不能处理中文字体,于是渲染中文字体时使用备选方案”微软雅黑”

-格式:font-family:”Times New Roman”,”微软雅黑”;

补充在企业开发中最常用的字体有以下一些:

-中文:

宋体/黑体/微软雅黑

-英文:

“Times New Roman”/Arial

注意点:因为中文字体其实都有自己的英文名称,所以是不是中文字体具体要看能不能处理中文

宋体: SimSun

黑体: SimHei

微软雅黑: Microsoft YaHei

CSS中的注释

/*

注释掉的内容

*/

文字属性的缩写

格式:

font: style weight size family;

例:

font:italic bold 10px “楷体”;

注意点:

1.在这种缩写格式中有的属性值可以省略

style可以省略

weight可以省略

2.style,weight的位置可以互换

3.有些属性可以省略

4.有些属性不可以省略

5.size不能省略

6.family不能省略

7.size和family的位置是不能随便乱放的,size一定要写在family前面,family必须写在所有属性的最后

# 文本属性

1.文本装饰的属性

格式:text-decoration: underline;

取值:

underline 下划线

line-through 删除线

overthrough 上划线

none 什么都没有,最常用的用途就是去除超链接的下划线

快捷键:

td underline

tdu line-through

tdl overthrough

tdn none

2.文本水平对齐的属性

格式: text-align: left;

取值:

left 左

right 右

center 中间

快捷键:

ta

tar

tac

3.文本缩进的属性

格式: text-indent: 2em;

取值:

2em,其中em是单位,一个em代表缩进一个文字的宽度

快捷键:

ti

ti2e

颜色控制

1.在CSS中如何通过color属性来修改文字颜色

格式: color:值;

取值:

1.1 英文单词

一般情况下常见的颜色都有对应的英文单词,但是英文单词能够表达的颜色是有限制的,也就是说不是所有的颜色都能够通过英文单词来表达

1.2 rgb

rgb其实就是三原色,其中r(red) g(green) b(blue)

格式: rgb(0,0,0)

r/g/b,取值范围是0-255,值越大越亮

1.3 rgba

格式:rgba(0,0,0,0)

a,取值0-1,控制透明度,值越小越透明

1.4 十六进制

在前端开发中通过十六进制来表示颜色,其本质就是rgb每两位来表示

例如:#FFEE00 FF表示R EE表示G 00表示B

#FF0000

1.5 十六进制的缩写

在CSS中,只要十六进制的颜色每两位的值都是一样的,那么就可以简写为一位

例如:

#FFEE00 -> #FE0

注意点:

1.如果当前颜色对应的两位数字不一样,那么就不能简写

2.如果两位相同数字不是属于同一颜色也不能简写

#122334 这个不能简写

# 十六进制和十进制转换的公式

(仅限颜色转换)

-用十六进制的第一位*16 + 十六进制的第二位 = 十进制

15 == 1 *16 + 5 = 21

文字缩进属性:

text-indent: 2em;