前端——css属性方法

目录

• 标签快捷写法
• 宽和高
• 字体
  • 1.文字字体
  • 2.字体大小
  • 3.字体粗细
  • 4.字体颜色
  • 5.字体对齐
  • 6.文字下划线控制
  • 7.文字首行缩进
  • 8.字体英文换大写
  • 9.导航条居中
• 背景属性
  • 1.背景颜色
  • 2.背景图片
  • 3.背景不平铺
  • 4.背景位置
  • 5.固定背景图像
  • 6.简写方法
• 边框
  • 1.边框属性(宽度，样式，颜色)
  • 2.边框样式
  • 3.边框上下左右设置
  • 4.边框设置为圆形
  • 5.圆形头像示例
  • 6.display控制显示效果 块标签行标签转换
• 盒子模型
  • margin外边框
  • padding内填充
• float浮动
  • 1.浮动方法
  • 2.clear
  • 3.清除浮动
• overflow 溢出属性
• 定位
• z-index控制z轴的距离
• 透明度

标签快捷写法

总结：‘.’点代表class类，‘#’代表id，‘$’代表数字从1开始，‘>’代表儿子

div.c1#d1				按下tab键
效果：
<div class="c1" id="d1"></div>

div.c$#d$*2				按下tab键
效果：
<div class="c1" id="d1"></div>
<div class="c2" id="d2"></div>

div.c$#d${文本}*2
效果：
<div class="c1" id="d1">文本</div>
<div class="c2" id="d2">文本</div>

div>(p>a)*10
效果：
<div>
    <p><a href=""></a></p>
    <p><a href=""></a></p>
    <p><a href=""></a></p>
    <p><a href=""></a></p>
    <p><a href=""></a></p>
    <p><a href=""></a></p>
    <p><a href=""></a></p>
    <p><a href=""></a></p>
    <p><a href=""></a></p>
    <p><a href=""></a></p>
</div>

宽和高

height: 200px;  # 高度200px
width: 200px;	# 宽度200px

字体

1.文字字体

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

2.字体大小

p {
  font-size: 14px;
}

3.字体粗细

font-weight用来设置字体的字重（粗细）。

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

4.字体颜色

- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: rgb(255,0,0)
- 一个RGB值 - 如: rgba(255,0,0,0.3)  # 第四个值为alpha，控制透明度
- 颜色的名称 - 如:  red

5.字体对齐

text-align 属性规定元素中的文本的水平对齐方式。

值	描述
left	左边对齐 默认值
right	右对齐
center	居中对齐
justify	两端对齐

6.文字下划线控制

text-decoration 属性用来给文字添加特殊效果。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

常用的为去掉a标签默认的自划线：

a {
  text-decoration: none;
}

7.文字首行缩进

将段落的第一行缩进 32像素：

p {
  text-indent: 32px;
}

8.字体英文换大写

text-transform

值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
text-transform：capitalize	文本中的每个单词以大写字母开头。
text-transform：uppercase	定义仅有大写字母。
text-transform：lowercase	定义无大写字母，仅有小写字母。
text-transform：inherit	规定应该从父元素继承 text-transform 属性的值。

9.导航条居中

display: inline-block;  同时具有行和块的属性

text-align-last:justify;  # 居中显示

背景属性

1.背景颜色

/*背景颜色*/
background-color: red;

2.背景图片

/*背景图片*/
background-image: url('1.jpg');

3.背景不平铺

 background-repeat:repeat(默认):背景图片平铺排满整个网页
 background-repeat:repeat-x：背景图片只在水平方向上平铺
 background-repeat:repeat-y：背景图片只在垂直方向上平铺
 background-repeat:no-repeat：背景图片不平铺

4.背景位置

background-position: 100px 10px; !*第一个调节左右  第二个调节上下

5.固定背景图像

定义背景图片随滚动轴的移动方式

background-attachment: fixed;

background: url("111.png")  center center;
background-attachment: fixed;

案例：

[](javascript:void(0)