day043 前端css样式

标签嵌套规则

块级标签能够嵌套某些块级标签和内敛标签(行内标签)

内敛标签不能块级标签,只能嵌套内联标签

块级标签能够设置高度和宽度

内敛标签不能设置,设置没有效果

Css样式

高度宽度:

Width:100px

Height:100px

字体:

Font-family:’宋体’

Font-size:10px; 默认大小是16px

Font-weight:bold;  自重 粗细 bold加粗

Color:red;rgb(255,255,255) rgba(255,255,255,0.3)  0.3是色彩透明度  两位重复的可简写#fff  #ffffff

文字对齐方式:

Text-align:center,right,left

文字装饰,

Text-decoration:none;去除横线 多用于a标签

首行缩进

Text-indent:32px;缩进两个字符

背景属性

Background-color:red;背景颜色

Background:url(‘路径’) no-repeat right top(200px,200px)

Display:

Display:none;隐藏标签

Visibility:hidden;隐藏标签,但是保留标签所占位置

Display:block;将内敛标签改为块级标签

Display:inline;将块级标签改为内敛标签

Display:inline-block;将块级标签或者内敛标签,改成块级标签和内敛标签的属性,也就是不独占一行,可以设置高度和宽度

Box:

Content 里面的内容  高度宽度就是我们设置width和height

Padding:内边距(内填充)

Padding-left

Padding-right

Padding-top

Padding-bottom

Border: 边框

Margin  外边距,距离其他标签的距离,两个标签如果都设置了margin,那么两个标签之间的距离取最大的那个margin

标签占的宽度:content宽度+左右padding + 左右边框的距离

分组和嵌套

当多个元素的样式相同的时候,我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一使用

div,p {
    color: ... ;
    }

　嵌套(c1下的P标签)

.c1 p{
color:red;
    }

css属性相关

宽高(只有块级标签才能设置宽高,内联标签的宽高由内容决定)

width 宽

height 高

字体属性

文字字体:font-family:  '微软雅黑'......

文字大小:font-size :14px;

字重(字体的粗细): font-weight

文本颜色: color :

1.十六进制值 - 如: ＃FF0000 #前两位是表示红，中间两位表示绿，后面两位表示蓝，F是最高级别，0表示最低级别（无色）

2.一个RGB值 - 如: RGB(255,0,0) #红绿蓝就是RGB的意思，第一个参数是红，最高255，最低0

3.颜色的名称 - 如:  red,还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

文字属性

对齐方式:

text-align:left(左对齐),right(右对齐),center(居中对齐),justify(两端对齐)

文字装饰: 给文字添加特殊效果

text-decoration: none(默认),underline(文本下一条线),overline(文本上一条线),line-through(穿过文本下的一条线),inherit(继承父元素的属性的值)

首行缩进:

text-indent:32px;  首航缩进32px

背景属性

背景颜色: background-color

背景图片:background-image:url('路径');

背景重复:

 repeat(默认):背景图片沿着x轴和y轴重复平铺，铺满整个包裹它的标签
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺

背景位置: background-position: 九宫格的9个位置,分别用left,right,top,bottom,center表示,例如调到中间一行的最右边为 :center right

边框

边框属性: border-width: 边框宽度

border-style:边框样式

border-color: 边框颜色

通用的简写方式  border:2px solid red;

边框样式: none(无样式),dotted(点状虚线边框),dashed(矩形虚线边框),solid(实线边框)

border-radius:50% ;  用这个属性能实现圆角边框的效果

display属性 (用于控制HTML元素的显示效果)

display: none; HTML文档中元素存在,但是在浏览器中不显示,一般配合JS代码使用

display:block; 默认沾满整个页面的宽度,如果设置了指定的宽度,则会用margin填充剩下的部分.

display:inline;按行内元素显示.此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。

display:inline-block 使元素同时具有行内元素和块级元素的特点.

display:"none"与visibility:hidden的区别：

　　　　visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

　　　　display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

css盒子模型

margin:外边距  基本用途: 控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的

简写

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

padding: 内边距: 用于控制内容与边框之间的距离

.padding-test {
  padding: 5px 10px 15px 20px;
}　 顺序: 上右下左 顺时针

border: 边框: 围绕在内边距和内容外的边框

content: 内容: 盒子的内容 显示文本和图像