锐客网

  1. 首页 > it技术 > >

2018.8.1

css细化
一、布局
1.浮动→清除浮动
【2018.8.1】2.定位
css 样式表
内联样式：在html中每个属性都具备style属性 如：
css语法 允许出现多个属性：值 对； 每对之间用；隔开如：只作用在所定义的标签内，其它标签不受影响
外部样式表：将样式定义到一个外部的css文件中(.css)，在HTML页面中，引用.css文件
真正意义的体现 样式重用的效果
使用方式：1.创建外部样式表


css样式表特征：1.继承性2.层叠性 一个选择器可以被重复定义 在多个不同的定义中，不重复的属性可以层叠到一起，如果属性重复的话，以 后定义的为准
3.优先级 样式定义冲突时，按照不同样式的优先级来使用样式 ：
1.浏览器缺省设置 2.外部样式表或内部样式表-就近原则 3.内联样式(最高)?☆4.!important：手动调整样式属性的优先级(尽量不要使用)☆?
css基础选择器：


伪类选择器：
1.链接伪类适用于a标签:link(未访问状态下的样式)如： a:link{}
:active(鼠标点中激活的状态)如：a:active{}
:visitetd(点击进入过链接页面的状态)如：a:visited{}
2.动态伪类:hover (鼠标悬停状态下的样式):active (元素被激活时):focus(元素获取焦点时，多数用于文本框密码框表单等表单元素)
css属性-尺寸
溢出：overflow: 当内容溢出元素框时 隐藏超出部分hidden(溢出隐藏) visible(溢出可见)scroll:设置滚动条auto:自动，没溢出不显示滚动条，有溢出自动出现滚动条overflow-x:横向溢出处理方式overflow-y:纵向溢出处理方式
设置滚动条的样式：
设置滚动条宽度ul::-webkit-scollbar{ width=...px; }
设置滚动条轨道的颜色 ul::-webkit-scollbar-track{ background-color：...; }
设置滚动条滚动的颜色ul::-webkit-scollbar-thumb{ background-color：...; }
overflow:hidden; 与display:none; 的区别:
overflow:hidden(超出部分隐藏)display:none; (把整个元素隐藏,隐藏之后,不再占据位置)
边框 border-属性widthstylecolor边框圆角:border-radius
边框阴影(新特性) box-shadow:
h-shadow:水平阴影距离v-shadow:垂直阴影距离blur:可选，模糊距离spread:可选，阴影的尺寸color:可选，颜色inset:可选值，将当前阴影修改为内阴影
图片边框:border-imageborder-image-source图片路径border-image-width 图片宽度
背景:background
精灵图,雪碧图 一张大图里边有很多小图(用background-position选取图片位置,省流量)
渐变---------都是通过background-image来设置的
1.线性渐变:linear-gradient重复线repeating性：repeating-linear-gradient
取值：
2018.8.1
文章图片
2.径向渐变:radial-gradient重复径向：repeating-radial-gradient


2018.8.1
文章图片
取值 课外知识浏览器兼容性：
2018.8.1
文章图片
对于不支持的版本，可以添加前缀 表格：常见的样式属性有padding,width,height,文本、字体格式化属性。背景属性：颜色，图片，边框
文本垂直对齐: vertical-alian:top/bottom/middle
表格特有样式属性：1.边框合并属性:border-collapse(合并) 取值：separate(分离边框)
边框边距注意：border-collapse 必须为separate的时候才允许使用该属性
属性：border-spacing 取值：一个值:表示垂直和水平间间距相等
两个值：第一个值表示 水平间距，第二个值表示垂直间距两个值分开
列表
1.列表样式：属性:list-style-type
无序列表取值：none(无标记),disc(实心圆，默认),circle(空心圆),square(实心矩形)
有序列表：none(无标记),decimal(1,2,3),lower-roman:upper-roman:
列表项图像：属性：list-style-image取值:url(); list-style-image:url();
列表项位置:li前边标识的位置属性：list-style-position 取值：1.outside:默认值，标识在外2.inside:标识在内list-style:none; 取消列表标识。
Display: 可以转换 元素的显示方式
1.显示方式： 框的默认显示类型是可以通过display的属性进行修改
属性display取值：1.none：让生成的元素不显示，隐藏。一旦设置none，该元素中的所有内容都不在显示，并且不会在占据文档空间
2.block：块 ，让任何一个元素像块级元素一样的去显示
特点：1.行内元素，像块级元素一样去显示2.让块级元素从隐藏(display:none; )变为 显示 (display:block; )
3.inline:让任何一个元素像行内元素一样去显示特点：多个元素在一行内显示
场合：1.块级元素变行内元素2.行内元素you隐藏变为显示
4.inline-block 行内块级元素元素本身是行内元素 ，但是具备块的特点(能修改宽高)
场合：想改变行内元素的宽和高的时候
显示效果： visibility:实现元素的可见性(显示/隐藏)
取值：1.visible：默认值，元素可见2.hidden：元素不可见，隐藏，但空间依然占据3.collapse：用在表格上，可以删一行或一列，不影响表格的布局。
opacity：设置不透明度级别
属性opacity 取值0-1之间的数字(包括0和1) 0完全透明，1完全不透明，值越大越不透明
vertical-align:设置图片和文字垂直对齐方式 取值：top,middle,bottombaseline:基线对齐（默认对齐方式）
光标：默认情况，网页上的光标会根据不同的元素显示不同的样子。
在css中，可以通过cursor属性改变 光标显示效果，给客户一种可视化的暗示。
值： pointer（手状）crosshair（+）wait（等待）help（?）

    推荐阅读


    上一篇：一份来自外星球的建议

    下一篇：GGDA致力于实体场景，实现价值的转换流通