前端——css属性方法

目录

标签快捷写法

总结：‘.’点代表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)😉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滚动背景图示例</title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;
            height: 500px;
            background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg")  center center;
            background-attachment: fixed;
        }
        .d1 {
            height: 500px;
            background-color: tomato;
        }
        .d2 {
            height: 500px;
            background-color: steelblue;
        }
        .d3 {
            height: 500px;
            background-color: mediumorchid;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="box"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>
</html>

[复制代码](javascript:void(0)😉

6.简写方法

background:#336699 url('1.png') no-repeat left top;

边框

1.边框属性(宽度，样式，颜色)

border-width
border-style
border-color

通常使用简写方式：

#i1 {
  border: 2px solid red;
}

2.边框样式

值 描述
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。

3.边框上下左右设置

#d1 {
  border-top-style:dotted;  # 上边框类型
  border-top-color: red;	# 上边框颜色
  border-right-style:solid;		# 右边框类型
  border-bottom-style:dotted;	# 底部边框类型
  border-left-style:none; 		做边框类型
}

4.边框设置为圆形

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形

div {
            height: 200px;
            width: 200px;
            border-radius: 50%;   # 宽的50%，高的50%。出来就是圆
            background-color: red;
            background-repeat: no-repeat; 	# 禁止平铺
        }

5.圆形头像示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            background-color: antiquewhite;
        }
        .c1 {
            height: 100px;
            width: 100px;
            border-radius: 50%;
            border: 5px solid white;
            overflow: hidden;
        }
        img {
            max-width: 100%;
        }
    </style>
</head>
<body>
<div class="c1">
    <img src="111.png" alt="">
</div>
</body>
</html>

6.display控制显示效果 块标签行标签转换

用于控制HTML元素的显示效果。

值 意义
display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline block" 使元素同时具有行内元素和块级元素的特点。

盒子模型

margin:            用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding:           用于控制内容与边框之间的距离；   
Border(边框):     围绕在内边距和内容外的边框。
Content(内容):   盒子的内容，显示文本和图像。

margin外边框

.margin-test {
  margin-top:5px;  		# 上外边框距离
  margin-right:10px; 	# 右外边框距离
  margin-bottom:15px;	# 底部外边框距离
  margin-left:20px;		# 左边外边框距离
}

简写形式：

.margin-test {
  margin: 5px 10px 15px 20px;  # 上右下左，顺时针
}

常见居中：

.mycenter {
  margin: 0 auto;
}

padding内填充

.padding-test {
  padding-top: 5px;		# 上内边框距离
  padding-right: 10px;	# 右内边框距离
  padding-bottom: 15px;	# 底部内边框距离
  padding-left: 20px;	# 左边内边框距离
}

推荐使用简写：

.padding-test {
  padding: 5px 10px 15px 20px;
}

顺序：上右下左

补充padding的常用简写方式：

  • 提供一个，用于四边；
  • 提供两个，第一个用于上－下，第二个用于左－右；
  • 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
  • 提供四个参数值，将按上－右－下－左的顺序作用于四边；

float浮动

1.浮动方法

三种取值：

float: left：向左浮动

float: right：向右浮动

float: none：默认值，不浮动

clear属性规定元素的哪一侧不允许其他浮动元素。

值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

2.clear

clear属性规定元素的哪一侧不允许其他浮动元素。

值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

注意：clear属性只会对自身起作用，而不会影响其他元素。

3.清除浮动

清除浮动的副作用（父标签塌陷问题）

主要有三种方式：

  • 固定高度
  • 伪元素清除法
  • overflow:hidden

伪元素清除法（使用较多）：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

overflow 溢出属性

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。 
.c1 {
            height: 100px;
            width: 100px;
            border: 1px solid black;
            overflow: auto;
        }

定位

position: relative;  # 绝对定位
position: absolute;  # 相对定位
left: 100px;  # 距离左边100px
left: 50%;   # 距离左边50%距离
top: 100px;	 # 距离上面100px;
top:50%; 	# 距离上面50%的距离


static  静态的  
不能改变位置


相对定位  relative   不脱离文档流
	相当于标签原有的位置做偏移
		了解即可

绝对定位  absolute		脱离文档流
	相当于已经定位过的(static>>>relative)父标签做偏移
		eg:
			小米购物车

固定定位  fixed		脱离文档流
	相当于浏览器窗口固定在某个位置始终不变
		eg:
			回到顶部

固定定位：

		.cc{	
			position: fixed;
            bottom: 20px;
            right: 20px;
            height: 50px;
            width: 100px;
            }
         <div class="cc">回到顶部</div>

z-index控制z轴的距离

设置对象的层叠顺序。

  1. z-index 值表示谁压着谁，数值大的压盖住数值小的，
  2. 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
  3. z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
  4. 从父现象：父亲怂了，儿子再牛逼也没用
#d1 {
  z-index: 999;
}
#d2 {
  z-index: 1000;
}

结果：优先展示d2的

透明度

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

.c2 {
            background-color: rgb(128,128,128);
            opacity: 0.4;
        }
posted @ 2019-12-27 20:55  Jeff的技术栈  阅读(467)  评论(0)    收藏  举报
回顶部