CSS属性

1-1.CSS字体属性

CSS Fonts（字体）属性⽤于定义字体系列、⼤⼩、粗细和⽂字样式（如斜体）

①字体系列

使⽤font- family属性定义⽂本的字体系列

如：

1
2
3
4
5
6
p{
    font-family:"微软雅黑"；
}
div{
    font-family:Arial，"Microsoft Yahei","微软雅黑"
}

尽量使⽤默认字体 如：

1
2
3
4
body{
     font- family:'Microsof YaHei',tahoma,arial, 'Hiragino Sans GB';
}

写多个字体是为了防⽌⽤户第⼀个字体没有装的话可以使⽤下⼀个字体

②字体⼤⼩

font- size属性定义字体⼤⼩

如：

1
2
3
p{
    font-size:20px;
}

▪ ⾕歌浏览器默认的⽂字⼤⼩为 16 px

▪ 可以给body指定整个⻚⾯⽂字的⼤⼩

▪ 标题标签⽐较特殊，需要单独指定⽂字⼤⼩

③字体粗细

font- weight属性设置⽂本字体的粗细

实际开发中提倡使⽤数字表示

normal= 400， bold = 700

image-20221108170334537

④⽂字样式

font- style属性设置⽂本⻛格

如：

1
2
3
p{
    font-style:normal;
}

normal默认值 italic斜体

△平时很少给⽂字加斜体，反⽽要给斜体标签（ em， i ）改为不倾斜字体

1-2.字体复合属性

字体属性可以把以上⽂字样式综合写，更节约代码

复合属性：

▪ 简写的⽅式，不能随意更改位置

▪ 不需要设置的属性可以省略，但必须保留font- size和 font- family属性

格式：

1
2
3
body{
    font：font-style font-weight font-size/line-height font-family;
}

如：

1
2
3
div{
    font：ltalic 700 16px/20px 'Microsoft yahei';
}

总结：

image-20221108171215255

2-1.⽂本属性

CSS Text（⽂本）属性可定义⽂本的外观，如⽂本颜⾊、对⻬⽂本、装饰⽂本等

①⽂本颜⾊

color属性⽤于定义⽂本颜⾊

1
2
3
div{
    color:red;
}

image-20221108171431551

②对⻬⽂本

text- align属性⽤于设置元素内⽂本内容的⽔平对⻬⽅式

如：

1
2
3
div{
    text-align:center（居中对齐）/right（右对齐）/left（左对齐）
}

③装饰⽂本

text- decoration属性规定添加到⽂本的修饰，可以给⽂本加下划线、删除线、上划线等

如：

1
2
3
4
5
6
7
div{
    text- decoration:none（默认，没有装饰线）（最常⽤）
                   /underline（下划线，链接a⾃带下划线）（常⽤）
                   /overline（上划线）
                  /line-through（删除线）
 
}

④⽂本缩进

text- indent属性⽤来指定⽂本的第⼀⾏的缩进，通常是将段落⾸⾏缩进

1
2
3
4
5
6
如：div{
    text-indent:20px;
}
或：p{
    text-indent:2em;
}

em是⼀个相对单位，是当前元素（font- size） 1个⽂字的⼤⼩

如果当前元素没有设置⼤⼩，则会按照⽗元素的1个⽂字⼤⼩

⑤⾏间距

line- height属性⽤于设置⾏间的距离（⾏⾼），可以控制⽂字⾏与⾏之间的距离

1
2
3
p{
line-height:26px;
}

image-20221108172322545

⽂本默认16px

CSS中没有提供文字垂直居中的代码，让文字的行高等于盒子的高度就可以让文字在盒子内垂直居中，如果行高小于盒子高度，文字会偏上；如果行高大于盒子高度，则文字偏下

image-20221114005625684

总结：

image-20221108172404504

3-1.背景属性

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

①背景颜色

background-color属性定义了元素的背景颜色

1
background-color:颜色值;

一般情况下元素背景颜色是transparent（透明的）,我们也可以手动指定背景颜色为透明色。

CSS3为我们提供了背景颜色半透明的效果

1
2
背景黑色半透明效果：
background:rgba(0,0,0,0.3);
  • 前面为rgb参数，最后一个参数a是alpha透明度，取值范围在0~1之间
  • 可以将0.3的0省略掉，写为background：rgba（0，0，0，.3）；
  • 注意：背景半透明是指盒子背景半透明，盒子里内容不受影响

②背景图片

background-image属性描述了元素的背景图片，实际开发常见于logo或者装饰性的小图片，或超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用常景）

1
2
3
background-image：none/url（指定绝对或相对路径指定背景图片）
如：
{ background-image：url（image/logo.png) }

③背景平铺

在HTML中实现背景平铺可以用background-repeat属性

1
2
3
4
background-repeat：repeat（默认平铺）
                  /no-repeat
                  /repeat-x（横向平铺）
                  /repeat-y（纵向平铺）

背景颜色和背景图片同时存在时，背景图片会压住背景颜色

④背景图片位置

background-position属性可以改变图片在背景中的位置

1
backgorund-position：x坐标 y坐标；

可以使用方位名词或精确单位

参数值 说明
length 百分数 / 由浮点数字和单位标识组成的长度值
position 方位名词 ：top / center / bottom / left / right
1.参数是方位名词
  • 如果指定的两个值都是方位名词，则两个值前后循序无关，如 left top 和 top left效果一致
1
2
/水平居中靠上排列/
background-position：center top；
  • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

例： image-20221123182250149

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
    h3{
        width:118px;
        height:40px;
        line-height:40px;
        fontsize:14px;
        font-weight:400;
        background-image:ulr(image/icon.png);
        background-repeat:no repeat;
        background-position:left center;
        text-indent：1.5em；
    }
</style>
<body>
    <h3>
        成长守护平台
    </h3>
</body>
1
2
3
4
5
6
7
8
超大背景图片：
<style>
    body{
         backgroung-image:ulr(image/bg.jpg);
         backgroung-repeat:no repeat;
         backgroung-positino:center top;
    }
</style>
2.参数是精确单位
  • 如果参数是精确单位，那么第一个一定是x坐标，第二个一定是y坐标
1
2
假使背景图片距离左侧20px 距离上侧50px：
background-position：20px 50px；
  • 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。
3.混合单位
  • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
1
2
水平居中对齐，垂直为20px
background-position：center 20px；

⑤背景图像固定（背景附着）

background-attachment属性设置背景图像是否固定或随着页面的其余部分滚动（后期可制作视差滚动效果）

1
2
background-attachment: scroll（背景图像随对象内容滚动）（默认滚动） 
                     / fixed（背景图像固定）

3-2.背景属性复合写法

为了简化背景属性代码，可以将这些属性合并简写在同一个属性background中

当使用简写属性时，没有特定书写顺序，一般约定顺序为：

background：背景颜色、背景图片地址、背景平铺、背景图像滚动、背景图片位置

1
background:transparent（透明的） url(image/bg.jpg) no repeat fixed center top;

总结：

image-20221123224452948

CSS
#CSS
CSS属性
http://example.com/2023/04/17/CSS属性/
作者
花怜
发布于
2023年4月17日
许可协议