1 级联样式与CSS选择器 1.1 CSS基本使用
/* 不建议@import 性能问题 */<link href="CSS文件路径" type="text/css" rel="stylesheet">
/* 仅对P标签有作用 */p{...}/* 仅对具有attr属性的E元素起作用 */E[attr]{...}/* 仅对attr=value的E元素起作用 */E[attr=value]{...}/* attr的值以空格为分隔符分开,其中一个值等于value即可的E元素 */E[attr~=value]{...}/* attr的值以连字符'_'为分隔符分开,其中一个值等于value即可的E元素 */E[attr |=value]{...}/* attr属性包含value值的E元素 */E[attr*="value"]{...}/* attr属性以value为开头的E元素 */E[attr^="value"]{...}/* attr属性以value为结尾的E元素 */E[attr$="value"]{...}/* id为xx的元素起作用 */#xx{...}/* id为xx的E元素起作用 */E#xx{...}/* E为可选是否填写指定元素,my_class为指定lcass */[E].my_class{...} /* class同时包含class1.class2 */.class1.class2{...}/* div内所有class为a的元素起作用,无论元素是否为子元素 */div .a{...} /*注意 包含关系有空格,同时满足关系无空格 */.class1 .class2/* 仅对div的子元素且class为a的元素起作用 */div>.a{...} /* id为android的标签 之后出现的且class为long的同级元素 */#android ~ .long{...} /*逗号分隔或关系,仅符合一种选择器即起作用 */#a,.b,div>.a{...} :first-letter和:first-line可实现首字大写与首行大写之类的问题
注意,这两个伪属性只对块元素div,p,section等元素起作用,对内嵌span等必须设定heihht与width、或postition:absolute、或display:block.
span{ disply:block;}//首字变蓝.span:first-letter{ color:#00f;}:before与:after用于在指定元素前/后插入内容,参考下面的内容相关属性.
counter-rest: 重置计数器.
eg: <!-- 子div前添加文字和设置样式 --> div>div:before{ content: '文字'; colol: blue; } <!-- 含有class为on的子div之后的添加图片 --> div>div.no:after{ content:url("K.gif"); } <!-- 配合quetos 对的...其实这属性貌似并没神马卵用.. --> <!-- 是的,你没猜错..其实close-quote写在before里也是可以的.. --> div>div{ quotes: "<<" ">>"; } div>div:before{ content: open-quote; } div>divafter{ content:close-quote; } <!-- counter-increment添加编号1. 2. 3. --> div>div{ counter-increment: fucking_K; } div>div:before{ content: counter{fucking_K} '.'; font-size: 20pt; } <!-- 拓展样式 更多参数<https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-type> --> div>after{ content: counter{fucking_K,lower-roman} '.'; font-size: 20pt; } <!-- 多级编号 --> div>h2{ counter-increment: fucking_K; } div>div{ counter-increment: funcking_K2; } div>h2:before{ counter-increment: funcking_K; counter-reset: fucking_K2; } div>div:before{ content: counter: funcking_K2; }Selecttor可省略.不作为匹配条件
结构性伪类选择器
1.1 Selector:root: HTML元素中,永远指向
1.2 Selector:first-child: 匹配其父元素的第一个节点.
1.3 Selector:last-child: 匹配选择器,而且是其父元素的最后一个节点.
1.4 Selector:nth-child(n): 匹配选择器,而且是其父元素的第n个节点.
1.5 Selector:nth-last-child(n): 匹配选择器,而且是其父元素倒数第n个节点.
1.6 Selector:only-child: 匹配选择器,而且是其父元素唯一的节点.
1.7 Selector:first-of-type: 匹配选择器,而且是其同类型的兄弟元素中的第一个元素.
1.8 Selector:last-of-type: 匹配选择器,而且是其同类型的兄弟元素中的最后一个元素.
1.9 Selecttor:nth-of-type(n): 匹配选择器,而且是其同类型的兄弟元素中的第n个元素.
1.10 Selector:nth-last-of-type(n): 匹配选择器,而且是其同类型的兄弟元素中的倒数第n个元素.
1.11 Selector:only-of-type: 匹配选择器,而且是其同类型的兄弟元素的唯一一个元素.
1.12 Selector:only:empty: 匹配选择器,而且其内部没有任何子元素(包括文本)的元素.
拿first-child和first-of-type举例
<ul> <img .../ alt="疯狂Html+CSS+JS 中CSS总结_html/css_WEB-ITnose" > <li>...</li> </ul> //匹配不到任何元素,li必须是父元素的第一个元素. li:first-child{...} //匹配到li,是在父元素中匹配到的类型中的第一个即可. li:first-of-type{...} -child匹配是会把其他不同类型的兄弟节点算进去,而-of-type只计算同类型的兄弟元素
其中nth-child(n)、nth-last-child(n)、nth-of-type(n)、nth-last-of-type(n)支持参数
UI元素状态伪类选择器
2.1 Selector:link: 匹配未访问的元素
2.2 Selector:visited: 匹配访问过的元素
2.3 Selector:active: 匹配处于用户被激活(鼠标点击与释放的过程中)的元素
2.4 Selector:hover: 匹配鼠标悬停状态的元素
2.5 Selector:focus: 匹配已得到焦点的元素
2.6 Selector:enabled: 匹配当前处于可用状态的元素
2.7 Selector:disabled: 匹配当前不可用状态的元素
2.8 Selector:checked: 匹配当前选中状态的元素
2.9 Selector:ready-only: 匹配当前只读状态的元素
2.10 Selector:read-write: 匹配当前处于读写状态的元素
2.11 Selector::selection: 匹配当前被选中的内容.
特殊的伪类选择
3.1 Selector1:not(Selector2): 匹配符合Selector1选择器,但不符合Selector2选择器的元素
3.2 Selector:target: 匹配符合Selector选择器且必须是命名描点的且正在被访问的目标选择器.
:target{ background-color: #fff; } <a href="#K" /> //当正在浏览此div,:target生效 <div id="K"> ... </div>//修改属性//注意属性名中采用驼峰命名,例如改变background-color,属性名要写backgroundColordocument.getElementById("id").style.属性名=属性值;//修改classdocument.getElementById("id").className=class名称;text-shadow,多组阴影用,分割
redius: 指定阴影的模糊半径,半径越大越模糊 .
<!-- 向右下角和左上角加阴影加阴影--> <span style="max-width:90%">帅哥麦</span>
font-size-adjust用调节同样字号不同字体的效果.
font-size-adjust通过设定aspect值从而控制不同字体的大小.
aspect等于字体小写x的高度除以该字体的大小.
#div { font-size: 16pt; font-family: "狂草"; font-size-adjust:0.52; } #div2 { font-size: 16pt; font-family: "楷书"; font-size-adjust: 1.22; }此类属性用于控制整段或整个div的
text-overflow:
2.1 clip: 要指定overflow:hidden,隐藏溢出的文字
2.2 ellipsi: 要指定了overflow:hidden,溢出时候用…标记
vertical-align:指定内容垂直方式
3.1 auto: 自动对齐
3.2 baseline: 默认值,将支持valign属性的元素的文本内容与基线对齐
3.3 sub: 文本下标对齐
3.4 super: 文本上标对齐
3.5 top: 默认值,将支持valign属性的元素的文本内容与元素的顶端对齐
3.6 middle: 默认值,将支持valign属性的元素的文本内容对齐到元素的中间.
3.7 bottom: 默认值,将支持valign属性的元素的文本内容与元素的底端对齐.
text-align: left,right,center,justify(两端对齐)
direction: 用于设置文本流入的方式,ltr(左到右),rtl(右到左),不会影响数字和拉丁文字母(除拉丁文标点符号).
word-break: 用于设置目标组件中文本的换行方式
6.1 normal: 按浏览器默认,西方文字:只会在半角空格、连字符地方换行.中文,任意文字后换行.
6.2 keep-all: 只能在半角空格或连字符换行
6.3 break-all: 允许在连续单词中间换行
white-space:处理目标组件中文本对空格的处理
7.1 normal: 自动换行
7.2 nowrap: 强制文本一行显示,除非遇到
word-wrap: 用于设定目标组中文本内容的换行方式
8.2 normal: 浏览器默认
8.3 break-word: 允许单词中间换行.
word-break兼容性不好,单词中换行最好使用word-wrap:breakword;
word-break和word-wrap区别:
word-break: break-all:会让每一行文本最后一个单词换行.(不浪费一点空间)
word-wrap: break-word:会让太长单词之前自动换行.
情况很多,不好理解.具体参考
定义服务器字体
<!-- src ...;后可跟字体样式属性 --> @font-face { font-family: 404_K; src: url(url) format("字体格式"); font-weight: blod; } @font-face { font-family: 404_K; src: location("微软雅黑"),url(url) format("字体格式"); font-weight: blod; }background-attachment: 背景图片是否随对象内容滚动还是固定.
2.1: scorll:背景随内容滚动
2.2 fixed:背景图片固定.
margin-right: 0px; margin-bottom: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px;">background-image: 背景图片,背景图片会覆盖背景色(假如同时设置了).
background-repeat:是否平铺
6.1 repeat:平铺
6.2 repeat-x:横向平铺
6.3 repeat-y:纵向平铺
6.4 no-repeat:不平铺
以下为CSS3新增
background-clip: 指定背景覆盖范围.
7.1 border-box: border-box(覆盖border,padding,content)
7.2 padding-box: 覆盖padding,content(默认)
7.2 content-box,只覆盖content.
background-origin: 设置背景覆盖的起点,有点和background-position类似.或指定从哪个区域的开始放置背景图片(content,padding,border).Chrome和Safari使用要开-webkit开头.
background-size: 设置图片大小.
9.1 数值: 12px,13px 占宽12px,高13px;
9.2 百分比: eg 80% 10%,宽占百分之80,高占百分之10%
9.3 auto:只有一个值能为auto,根据另外一个值自动缩放(这个对响应式非常有用,保证图片不走形 100% auto,完全显示图片).
CSS3提供了多背景控制,属性还是上面的,多个背景属性用,隔开.
border-style: 边框样式
3.1 none:无边框
3.2 hidden: 隐藏边框,于none类似,当在表中可解决边框冲突
3.3 dotted: 电线边框
3.4 dashed: 虚线边框
3.5 solid: 实现边框
3.6 double: 双线边框
3.7 grove: 3D凹槽边框
3.8 ridge: 3D凸槽边框
3.9 inset: 3D凹入边框
3.10 outset: 3D凸出边框(个人感觉3.7,3.8和3.9,3.10类似,不过立体感弱一点)
border-width: 边框线框.任何有效长度值.若只设width,是没法占位置的.
以下top bottom right left皆有.
圆角边框,CSS3新增
图片边框
border-iamge-repeat: 指定图片覆盖方式.可设0~2个值,分别代表横竖.
5.1 stretch: 拉伸覆盖
5.2 repeat: 平铺覆盖
5.3 round: 取整平铺,和repeat类似,
当最后一张图片不能显示超过一半,则不显示最后一张图片,通过拉伸前面的图片实现填充. 当最后一张图片可以显示超过一半,则显示最后一张图片,压缩前面的图片.
border存在则border-image相关属性不起作用.
3 大小、定位、轮毂相关属性CSS3新增属性
box-sizing: 用于设定width和height控制content padding border等哪些区域.
1.1 content-box: 只控制content
1.2 padding-box: 控制content+padding
1.3 border-box: 控制contetn+padding+border
resize: 设置用户能否拖动组件来改变组件的大小
2.1 none: 不能改变大小
2.2 both: 能改变大小,但只能按比例缩放
2.3 horizontal: 不允许改变高度,能改变宽度
2.4 vertical: 不允许改变宽度,能改变高度
定位作用为在于布局,漂浮~.除了position以外的其他属性不对static起作用.
position 定位方式
1.1 absolute: 组件会漂浮在页面上,不考虑周围内容
1.2 relative: 参考前一个组件的位置来定位
1.3 static: 默认值,没有定位,元素出现在正常的页面流中.
1.4 fixed: 绝对定位,以浏览器为定位参考
z-index: 数值觉得漂浮重叠优先级.数值越高优先级越高.
漂浮居中定位设置很常用的一招.
margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
原理及其它居中方式.
轮廓不占页面实际物理布局面积,可实现”光晕效果”.
clear: 设置该组件能否出现浮动组件.
2.1 none: 默认,你随便飘~
2.2 left: 不允许出现左飘~
2.3 right: 不允许出现右飘~
2.4 both: 你丫的别给我飘~.
clip: 对组件裁剪设置,(只有在position为absolute且overflow:hidden,效果才会较好.)
3.1 rect(Num_A,Num_B,Num_C,Num_D),定义一个矩形,只有在矩形内才显示出来.这4个数有点奇葩,和别的不一样,定义的矩形为,横向显示(Num_D~Num_B)的内容,纵向显示(Num_A~Num_C)的内容. 当Num为auto,表示该边不做裁剪.
overflow: 设置等组件不能容纳内容显示时,采取的措施
4.1 visble: 默认,不剪切也不加滚动条.
4.2 auto: 添加滚动条显示全部内容.
4.3 hidden: 裁剪不能显示的部分.
4.4 scroll: 不够内容有没有超,总显示滚动条.
overflow-x: 仅对横向方向起作用,属性同overflow.
display: 设置盒模型.
8.1 block类型: 默认占据一行,可CSS设置宽高度,默认此属性的元素有
、