css样式设置

设置样式
1.颜色单位:
1.关键字 red blue
2.rgb(r,g,b); 0-255之间 三原色红绿蓝
3.rgba(r,g,b,a) a在0-1之间选择 a是透明度
4.16进制的颜色 #ffff 白色 #ccc灰色
2.尺寸单位:
1.px 像素值
2.em 相对单位(根据字体的改变而改变) 1em=16px,1em相当于一个大写M的宽度
3.百分比 相对单位 子元素占父元素的百多比
3.继承关系
1.inherit 继承父元素的样式 height:inherit;
2.initial 不继承
4.字体设置
1.本地字体
font-style 设置斜体文本 normal italic : 斜体
font-weight 设置粗细程度 normal bold 加粗
font-size 设置字体大小 默认14px
text-align 设置字体排列方式 left center right
text-transform 设置字体大小写 uppercase转换为大写 lowercase小写 capitalize将所有单词的第一个字母大写 full-width类似于等宽字体 none
text-decoration 设置上下划线 none underline下划线 overline line-throgh
text-shadows 设置文本阴影 w (x轴) h (y轴) blur(模糊距离) color(阴影颜色)
text-indent 设置缩进 2em两个字符
font-family 设置文字指定特殊的字体 (仿宋,楷体…) 字体栈:多个字体用逗号隔开
2.加载网络字体
1.下载字体
2.声明字体
@font-face{
font-family: ‘myfont’;
src:url(’…/fonts/字体/冬天的汤圆.ttf’);
}
3.引用字体
p{font-family: myfont;}
3.字体图标设置
1. fontawesome
div<class="fa fa-xxxx ">
fa-3x 放大倍数 fa-spin 旋转
2.iconfont
div<class=<“icofont xxx”>

1.单词之间的间距
word-spacing
2.字符之间的间距
letter-spacing
3.设置超出父元素部分是否换行显示(水平超出)
word break : (break-all) word-wrap:break word

overflow:hidden scroll 垂直超出父元素隐藏还是显示
4.overflow:
hidden 超出父级元素部分隐藏
scroll 超出元素部分以滚动条形式显示
5.设置宽,高,最大宽,最大高
width height min-width min-height max-width max-height
6.元素的隐藏与显示
display :
1.display=none 元素的隐藏 (还隐藏了元素所占据空间的位置)
2.display=block 元素的显示
visibility:
1.hidden 隐藏 只隐藏了元素 (元素占据的空间保留,相当于修改了元素的透明度)

表格
1.表格形式
table
tr
td
2.设置表格标题: caption
3.设置表格标题位置:caption-side (top bottom right left)
4.设置表格边框合并: 给table添加
1.border-collapse: collapse; (共用一条线作为重合部分)
2.cellspacing=“0” (两条线压在一起重合)
5.设置表格中列的样式
colgroup 写在所有tr之上(控制列,设置一列的样式)(span控制的列数)

列表:
1.有序列表 (私有属性 :reversed 设置倒序 reverser start="5"从5开始倒序)
ol
li

reversed start="2"  (放在ol标签里面)

2.无序列表
ul
li

3.标题列表
dl
dt 标题项
dd 列表项

*4.列表样式:
1.list-style-type 列表项标志 disc (实心圆) circle(空心圆)
1.list-style-position 列表项位置 outside inside
3.list-style-image 自定义列表项标志 url(地址)
4.line-height 行内元素垂直居中 (每行占据的宽度) 值应为总高的一半

速记写法
list-style: outside square;

5.默认样式
ul,ol 元素的margin-top,margin-bottom均为16px(1em) , padding-left为 40px(2.5em)
li 元素没有设置默认的空白(行间距)
dl 元素的margin-top,margin-bottom均为16px(1em),但是没有内边距
dd 元素的margin-left为40px(2.5em) ü
p 元素的margin-top,margin-bottom为16px(1em)

超链接样式
cursor : 鼠标悬停时光标的形状
outline : 调整环绕链接的框
text-decoration : 自定义设置列表项标志
text-align : 文本对齐方式 center right left

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页