css样式基础

字体和段落样式: 大小、粗细、下划线、行高、首字母大小写                                   

color: red;                                          字体颜色red为红色
font-style: italic;                                  字体倾斜和下面的一样
font-style: obligue;                                 偏斜体和上面的一样
font-style: normal;                                  正常字体(没任何效果)
font-weight: bold;                                   字体加粗,为700像素
font-weight: bolder;                                 字体加粗:为900像素加粗
font-weight: normal;                                 字体加粗:为400像素就是不加粗
font-size: 20px;                                     字体粗细:为20像素,单位px
font-size: bold;                                     字体粗细:为700像素加粗
font-size: lighter;                                  字体粗细:为400像素
font-size: x-large;                                  字体大小为:特别大x和xx都可以
font-size: xx-small;                                 字体大小为:极小x和xx都可以
font-familg: 华为文云,楷提;                         字体样式
text-decoration: underline;                          文本装饰:下划线
text-decoration: overline;                           文本装饰:上划线
text-decoration:none;                                文本装饰:取消下划线
text-decoration:line-through;                        文本装饰:删除线
text-transform: capitalize;                          首字母大写(只对字母有效)
text-transform: lowercase;                           全部小写 (只对字母有效)
text-transform: uppercase;                           全部大写 (只对字母有效)
text-indent: 2em;                                    首行缩进:2字符单位em,也可以写xp
word-spacing: 10px;                                  词间距英文单词之间,单位px
letter-spacing: 10px;                                字间距所有字符之间,单位px
line-height: 10px;                                   行高10像素,单位px
line-height: normal;                                 行高正常(没任何效果)

对齐方式:

legt左/center中/right右/top顶端/middle居中/bottom底部/baseline基线对齐

text-align: justifg;                         两端对齐
text-align: legt;                            左对齐 
text-align: center;                          中对齐
text-align: right;                           右对齐
vertical-align: top;                         顶部对齐、(针对行内元素、行内块元素有效)
vertical-align: middle;                      居中对齐、(针对行内元素、行内块元素有效)
vertical-align: bottom;                      底部对齐、(针对行内元素、行内块元素有效)
vertical-align: baseline;                    基线对齐、(针对行内元素、行内块元素有效)


图片+背景+背景图片的属性+图片重复(精灵图):

background-repeat: no-repeat;                   图片不重复
background-repeat: repeat-x;                    图片垂直(上下)方向重复
background-repeat: repeat-y;                    图片水平(左右)方向重复
background-attachment: fixed;                   固定    
background-attachment: scrou;                   滚动
background-image: url(图片路径);                背景图片
background-size: 100px 100px;                   背景图片宽、高(大、小),单位px    
background-position: center center;             水平方向( legt左/center中/right右),垂直方向(top上/cerlter中/bottom下)
background: #000 url() no-repeat fixed top;     简称:颜色,路径,不重出,固定,上;
background-position: x y;                       背景图片(精灵图)x是方向左右也y是方向上下
background-color: red;                          背景颜色为红色,默认transparent(透明色)
background: rgba(0,0,0,0.3);                    背景透明(只有0.3这个可以改);
background: linear-gradient(颜色,颜色);         背景颜色渐变(可以设置多种颜色)
background: radial-imageg- radient(角度deg 颜色, 颜色 10%, 颜色 20%);    重复线性渐变
background: radial-radient-imageg (颜色, 颜色 10%, 颜色 15%);            重复的径向渐变
background-repeat: repeat;     

                                 


项目符号:ui标签里面的li


list-style-type: disc;                          实心圆项目符号(默认)
list-style-type: circle;                        空心圆项目符号
list-style-type: spuare;                        实心放块项目符号
list-style-type: none;                          取消项目符号
list-style-image: url(图片地址);                便用图片作为项目符号
list-style-position: inside;                    项目符号位置,在里面

边框:

border:10px red solid;                        边框:粗细 颜色 实现solid
border:10px red dashed;                       边框:粗细 颜色 虚线dashed
border:10px red dotted;                       边框:粗细 颜色 点线dotted


盒子属性:边框、圆角 、内填充、外填充 、浮动、溢出、行内块                        

盒子标签: <div>内容</div>

border:10px red solid;                      边框:粗细 颜色 实现solid
border:10px red dashed;                     边框:粗细 颜色 虚线dashed
border:10px red dotted;                     边框:粗细 颜色 点线dotted
border-radius: 20px 20px 20px 20px;         圆角矩形:左上角、右上角、右下、左下
border-radius: 20px 20px 20px;              圆角矩形:左上、右上右下、左下
border-radius: 20px 20px;                   圆角矩形:左上右上、右下左下
border-radius: 20px ;                       圆角矩形:四角
padding: 20px 20px 20px 20px ;              内填充属性(边框大小):上 右 下 左
padding: 20px 20px 20px ;                   内填充属性(边框大小):上、右 左、下
padding: 20px 20px ;                        内填充属性(边框大小):上 下、右 左
padding: 20px;                              内填充属性(边框大小):四角
padding-top: 100px;                         内填充-上,内容到边框之间距离
padding-right: 100px;                       内填充-右,内容到边框之间距离
padding-bottom: 100px;                      内填充-下,内容到边框之间距离
padding-left: 100px;                        内填充-左,内容到边框之间距离
margin-top: 100px;                          外边距-上,边框与边框之间的距离
margin-right: 100px;                        外边距-右,边框与边框之间的距离
margin-bottom: 100px;                       外边距-下,边框与边框之间的距离
margin-left: 100px;                         外边距-左,边框与边框之间的距离
float: left;                                左浮动
float: right;                               右浮动
float: none;                                取消浮动
clear: both;                                清除所有浮动
clear: left;                                清除左浮动
clear: right;                               清除右浮动
clear: none;                                不清除浮动
overflow: hidden;                           溢出的内容会被隐藏
overflow: visible;                          溢出的内容任然显示(默认)
overflow: auto;                             溢出的内容多的话盒子会默认显示滚动滑轮,不多不显示滑轮
overflow: scroll;                           溢出的内容盒子默认显示滚动滑轮
white-space: nowrap;                        强制在一行内显示,不换行
text-overflow: ellipsis;                    当前内容超出,出现省略号
display: inline;                            行内元素,(不读占一行,不可设置宽高)
display: block;                             块级元素,(不读占一行,可设置宽高)
display: inline-block;                      行内块元素,(不读占一行,不可设置宽高)
display: flex;                              自适应布局
display: none;                              不显示
margin: 0 auto;                             块级元素水平居中
box-sizing: border-box;                     固定盒子大小
position:fixed;                             固定定位
position:relative;                          可以和页面一起动的定位

定位:绝对定位、相对定位

## 省略号 ##
	white-space:nowrap;强制一行
	overflow:hidden;溢出隐藏
	text-overflow:ellipsis;省略号
## overflow溢出 ##
	* overflow: hidden;溢出隐藏
	* overflow: visible;溢出可见(默认)
	* overflow: auto;自动:如果有溢出的内容,盒子会显示滚动条
	* overflow: scroll;内容被修剪,超出的内容可以通过滚动条查看
	* overflow-x: auto;内容超过指定宽度的时候显示滚动条(要加上强制一行才会有效果white-space: nowrap;)
	* overflow-y: auto;内容超过指定高度的时候显示滚动条
## visibility设置可见 ##
	* visibility: hidden;隐藏内容,但是占用空间
	* display: none;隐藏内容,但是不占用空间 
## 相对定位 ##
	position:relative;相对于它自己原来的位置来说
	注意:要与top、bottom、left、right联合使用
## 绝对定位 ##
	position:absolute;相对于浏览器来说

	注意:要与top、bottom、left、right联合使用
## 静态定位 ##
	position:static;默认
## 固定定位 ##
	position:fixed;生成固定定位的元素,相对于浏览器窗口进行定位
	注意:可与top、bottom、left、right联合使用

html:盒子、浮动、定位
父相子绝:父元素用相对定位,子元素用绝对定位

## 层叠顺序 ##
	z-index: 数值(不要加单位);
	* 数值为整数(负整数、0、正整数)
	* 数值越大,层叠级别越高

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小 汐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值