CSS属性

CSS属性

字体属性

设置字体
font-family:黑体

设置字体的大小
font-size:绝对尺寸/关键字/相对尺寸/百分比

设置字体的样式
font-style:
	normal正常显示字体 
	italic斜体字
    oblique(倾斜角度大)

设置字体的加粗
font-weight:
	normal正常显示
	bold粗体
	lighter细体
	number数字取值越大越粗

设置字体的阴影
text-shadow:
规定水平阴影 垂直阴影 模糊距离 阴影的颜色
text-shadow: 5px 5px 5px #FF0000;

文字排版属性

调整字符间距
letter-spacing: normal;
	normal表示正常显示(默认)
	单位px(像素)

文字下划线等
text-decoration:
    underline下划线
    overline上划线
    line-through添加删除线
    blink添加闪烁效果(只能在Netscape的浏览器中正常显示)
    none没有任何的修饰

文本对齐
text-align: center;
	left左对齐
    right右对齐
    center居中对齐
    justify两端对齐

文本上下居中(后面的值与按钮的高度值一致)
line-height: 30px;

背景属性(及页面)

设置背景颜色
background-color: red;

设置背景图片
background-image: url(图片位置);
  	   
背景图片的尺寸 左右 上下
background-size: 100% 100%;

背景图片的重复
background-repeat:
设置背景图片总是在水平和垂直方向重复显示铺平整个网页
    repeat
    背景图片在水平和垂直方向平铺
    repeat-x
    背景图片在水平方向平铺
    repeat-y
    背景图片在垂直方向平铺
    no-repeat
    背景图片不平铺

背景图片的位置设置
background-position: top left;
    关键字          百分比       位置说明
    top left       0% 0%       左上位置
    top center     50% 0%      靠上居中
    top right      100% 0%     右上位置
    left center    0% 50%      靠左居中
    center center  50% 50%     正中位置
    right center   100% 50%    靠右居中
    bottom left    0% 100%     左下位置
    bottom center  50% 100%    靠下居中
    bottom right   100% 100%   右下位置

背景附件的设置
background-attachment:
	是指设置背景图片是否随着滚动条的移动而移动
    scroll
    表示背景图片随着滚动条的移动而移动
    fixed
    表示背景图片固定在页面上不动 不随滚动条移动而移动

设置页面整体的上间距和左右间距
margin-top: 0;
margin-left: 5%;
margin-right: 5%;

边框属性

边框的样式
边框粗细 颜色 样式
border: 1px black solid;
	none没有边框
    dotted点线
    dashed虚线
    solid实线
    double双实线

边框样式(属性同上)
border-style:
border-top-style:
border-bottom-style:
border-left-style:
border-right-style:	

边框的颜色
border-color: red;

边框圆角
border-radius: 5px;

边框的阴影
X方向的偏移像素 Y方向的偏移像素 模糊的像素值 阴影颜色
box-shadow: 4px 4px 5px grey;

内间距
用来设置边框和其内部的元素之间的空白距离
padding-top: 上边距  
padding-bottom: 下边距  
padding-left: 左边距  
padding-right: 右边距  
padding: 复合设置 
(取值:数字长度 百分比 auto自动取值)

外间距
设置网页中某个元素的四边和网页中其他元素之间的空白距离
margin-top: 上边距  
margin-bottom: 下边距  
margin-left: 左边距  
margin-right: 右边距 
margin: 复合设置
(取值:数字长度 百分比 auto自动取值)

鼠标指针样式

<style>
    button:hover {
    	cursor: pointer;
    }
</style>

<button>一个按钮</button>

鼠标样式属性图解

列表属性

列表的标记样式
list-style-type:
    none 无标记
    disc 默认 标记是实心圆
    circle 标记是空心圆 
    square 标记是实心方块 
    decimal 标记是数字

列表的标记图片
list-style-image: url(a.jpg);    

过渡动画

彩色图片变白(过滤器)
filter: grayscale(100%); 黑百等级 
filter: gray; 变为黑白

旋转动画30度
transform: rotate(30deg); 

位移动画
把元素从左侧移动50像素 从顶端移动100像素
transform: translate(50px,100px);	

缩放动画
把宽度转换为原始尺寸的2倍 把高度转换为原始高度的4倍
transform: scale(2,4);

扭曲动画	
围绕X轴把元素翻转30度 围绕Y轴翻转20度
transform: skew(30deg,20deg);

过渡动画
复合属性
transition: width 5s linear 2s;
    过渡属性 指定属性的name、transition效果(默认值为all)
    transition-property: width;
    过渡效果需要多久时间完成，指定完成过渡的时间(单位:s/ms)
    transition-duration: 5s;
    指定完成过渡的曲线(是匀速还是非匀速)
    transition-timing-function: linear;
    	linear 匀速
		ease   慢-快-慢
		ease-in	慢速
		ease-out 快速
    指定延迟时间(延迟多久后开始执行)
    transition-delay: 2s;

浏览器兼容问题

-moz-  火狐浏览器 
-webkit-  Safari,谷歌浏览器等使用Webkit引擎的浏览器 
-o-  Opera浏览器(早期) 
-ms-  IE

比如彩色图片变白
-webkit-filter: grayscale(100%);

元素的定位方式

(position)元素的定位方式 

绝对定位 元素只参考浏览器原点位置
position: absolute;
    top: 10px; 上
    left: 10px: 左

相对定位 下一个元素会参照上一个元素 应该用margin
position: relative;
    margin-top: 10px; 上
    margin-bottom: 10px; 下 
    margin-left: 10px; 左
    margin-right: 10px; 右
    相对定位设置上下左右的间距使用

层溢出

(overflow)层溢出:超出内容是否包裹 

overflow: visible; 显示
overflow: hidden; 隐藏
overflow: auto; 自动判断是否加滚动条
overflow: scroll; 强制加上滚动条

元素的转换

(display)元素的转换

display: inline;
把块元素转换为行元素
display: block;
把行元素转换为块元素
display: inline-block;
转换成行内块元素
display: none;
隐藏元素(相当于删除了元素 元素占的位置是不存在了)

元素的隐藏

元素的隐藏

display: none;
隐藏元素(相当于删除了元素 元素占的位置是不存在了)
opacity: 0;
调整透明度0~1(相当于调整元素的透明度)
visibility:hidden;
隐藏元素(元素占的位置是在的 就相当于透明了)
visibility:visible;
显示元素

元素的叠放顺序

(z-index)元素的叠放顺序

z-index: 1;
调整叠放顺序 值越大 越在上面

层的浮动

(float)层的浮动	

float: right;
浮动到哪个位置设置left或right层为左右排列
默认是上下排列

<div style="clear: both;"></div>
添加一个空层 为了清除浮动
clear: both/left/right/none;
一般用于使用float后无法换行
给两个控件中间夹一个空层设置style="clear:both;"

弹性盒子布局

提供最大的灵活性

父层角度
弹性盒子使用不了
float clear vertical-align
设置外层为弹性盒子 
display:flex;
盒子中的子元素就会默认横着排(从左往右)
flex-direction:
	row;从左往右
	row-reverse;从右往左
	column;从上往下
	column-reverse;从下往上
子层左右居中方式	
justify-contet:center;
	flex-start;左对齐
	flex-end;右对齐
	center;居中对齐	
	space-between;两边抵住,中间均分
	space-around;均分空白部分
子层垂直方向的对齐方式
align-items: center;
	center;居中
	flex-start;抵住顶部
	flex-end;抵住底部
	strecth;顶天立地(不要设置子层高度)
	baseline;基线对齐(块中的内容)
子层的间距
gap: 10px;
子层换行(默认不换行)
flex-wrap:
	nowrap;不换行
	wrap;换行

子层的角度 
子层的间距(子层上下左右自动适配)
margin: 上下 左右;
	10px auto;
	auto auto;(auto 自动分配)
更改位置(排列顺序)	
order: div中的内容;	
子层按比例分配父层(子层不设置宽度)
    放大比例(默认为0)
    子层的宽度按照比例分配
    flex-grow: <number>;
    	1;均分 (1/子层总数)*父层宽度
    缩小比例
	flex-shrink:
		属性都为1 (等比例缩小)
		属性为0 其他为1 (0不挤压)
某一个子层的垂直方向位置(自身角度)
align-self:	
	center;居中
	flex-start;抵住顶部
	flex-end;抵住底部