CSS 总结

最新推荐文章于 2022-08-13 10:55:35 发布

LEIQINGQI

最新推荐文章于 2022-08-13 10:55:35 发布

阅读量938

点赞数

本文链接：https://blog.csdn.net/LEIQINGQI/article/details/81511601

版权

选择器

简介

选择器严格来说，分为三种：标签名选择器、类选择器、ID选择器。所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用，在标签内写入style=”” 的方式是CSS 的一种引入方式，不是选择器，没有用到选择器

最基本的选择器是元素选择器(div)，ID选择器（#header）还有类选择器（.tweet），一些不常见的选择器包括伪类选择器（:hover），很多复杂的CSS3 和正则选择器，first-child, class ^=”grid-“.。

效率从高到低

ID 选择器（#myid）
类选择器（.myclassname）
标签选择器（div，h1，p）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（*）
属性选择器（a[ rel=”external”]）
伪类选择器（a:hover, li:nth-child）

但是选择器在速度上的差异很小很小，

优先级

选择器越特殊，优先级越高。就是因为选择器指向的越准确，它的优先级就越高。通常我们用1(div, 直接写名字)表示标签名选择器的优先级，用10（. class）表示类选择器的优先级，100 （#，id）表示ID 选择器的优先级

div.test1 .span var 1+10 +10 +1

span #xxx .song li 1+ 100 + 10 + 1

#xxx li 100+ 1

样式表的元素选择器选择越精确，则其中的样式优先级越高：id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高：
如果要让某个样式的优先级变高，可以使用!important来指定：

类选择器最常用
当li td dd 等经常大量出现时，并且样式相同或者相类似的标签，我们采用类选择器和标签名选择器结合的后代选择器 .xxx li/td/dd { }的方式选择
极少数情况下使用ID 选择器，有时也会用header,footer,banner, content,设置成ID 选择器，因为相同的样式在一个页面中不可能出现两次

在标签内引入CSS 的方式优先级是1000，不推荐，完全违背了内容和显示分离的思想，DIV+CSS 的优点也不能再有任何体现

覆盖

由于继承而发生样式冲突时，最近祖先获胜
继承的样式和直接指定的样式冲突时，直接指定的样式获胜
直接指定的样式发生冲突时，样式权值高者获胜
样式权值相同时，后者获胜
！important的样式属性不被覆盖

提升CSS 选择器性能

避免使用通用选择器，直接使用class 选择器，浏览器在所有元素从上到下逐级匹配，开销大
避免使用标签或class 选择器限制id 选择器
避免使用标签限制class 选择器
避免使用多层标签选择器，使用class选择器替换
避免使用子选择器
使用继承

常用选择器：

* 选择所有元素，也可以算则某元素的所有子元素
#X id选择器
.X class 选择器
X Y descendant 选择器
X 类型选择器
X:visited and X:link 链接
X+Y 相邻选择器，选中X后面第一个Y
X>Y 只对X的子元素中的Y起作用
X~Y 作用于X后面的Y
X[title] ，属性选择器
X[href=”foo”] 找到特定链接
X[href=”strongme”] 这是一个很宽泛的表达式，能匹配strongme.com strongme.cn
X[href^=”href”] 表示开头，这个小时以href开头
X[href$=”.jpg”] 表示结尾，所有以.jsp 结尾的
X[data-=”foo”] 表示任何字符
X[foo~=”bar”] ~可以定位那些某属性值是空格分隔多值的标签
input[type=”redio”]:checked 定位那些被选中的单选框和多选框
X:after after 和before 会在被选中的标签周围生成一些内容

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
  }
.clearfix { 
   display: inline-block; 
   _height: 1%;
}

这段代码会在目标标签后面补上一段空白，然后将它清楚，当overflow:hidden 方法不顶用时候，这个管用

X:hover 这个是 user action pseudo class
X:not(selector) 取反，如果要把除id 为container之外的所有div标签都选中，这个可以做到
X::pseudoElement 使用:: 选中某标签的部分内容，first-line first-letter before after
X:nth-child(n) 它是从1开始的，
X:nth-last-child(n) 可以获取最后的
X:nth-of-type(n) 如果由5个ul 标签，想对其中第三个修饰，可以使用 nth-of-type(n) 伪类来实现
X:nth-last-of-type(n) 也可以使用类似的使用nth-last-of-type 来倒序获取标签
X:first-child 可以选择到第一个子标签
X:last-child 于first-child 相反，这个是选择夫标签最后一个标签
X:only-child 获取只有一个子元素的父标签
X:only-of-type 定位某标签只有一个子标签的目标，如果向获取到只有一个子标签的ul标签，使用ul li会选中所有li标签，设置后就要使用only-of-type 了
X:first-of-type 选择指定标签的第一个兄弟标签

居中布局方法

水平居中

margin:0 auto;

文字的水平居中

text-align:center;

padding 填充

利用padding 和background-clip 配合实现div 的水平垂直居中

.parent{
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 width: 100px;
 height: 100px;
 padding: 50px;
 background-color: black;
 background-clip:content-box;/*居中的关键*/

通过backgroun-clip设置为content-box,将背景裁剪到内容区外沿，再利用padding设为外div减去内div的差的一半，

块嵌套

父容器 position: relative

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

高度必须定义，建议加 overflow: auto，防止内容溢出。

margin 填充

还是定义父子div

<div class="parent">
  <div class="children"></div>
</div>

利用将子div 的margin-top 设置为父div高度减去子div高度的一半，然后通过overflow设置为hidden来处罚父div的BFC

<style>
@parentWidth:200px;
@childrenWidth:50px;
.parent {
 margin:0 auto;
 height:@parentWidth;
 width:@parentWidth;
 background: red;
 overflow:hidden;/*触发BFC*/
}
.children {
 height:@childrenWidth;
 width:@childrenWidth;
 margin-left:auto;
 margin-right:auto;
 margin-top: (@parentWidth - @childrenWidth) / 2;
 background:black;
}
</style>

absolute

position: absolute 搭配top，left 50%，再将margin 设置为负值

图片居中

和text-align 一样，将图片包装在一个div 中，将该div 的text-align 设置为center

还有一种方法，利用一个图片进行占位，让父容器获得高宽，从而进行-50%偏移的图片能有一个参照容器作百分比计算，可以不知道图片的大小，随便放张尺寸不超过父容器的图片就可以居中。

.parent {
 position:relative;
 width:100%;
 height:200px;
 background:red;
}
p {
 position:absolute;
 top:50%;
 left:50%;
}
.hidden-img {
 visibility:hidden;
}
.show-img {
 position:absolute;
 right:50%;
 bottom:50%;
}

transform 居中

响应式

<style>
.parent {
 float: left;
 width: 100%;
 height: 200px;
 background-color: red;
}
.children {
 float:left;
 position:relative;
 top:50%;
 left:50%;
}
.children-inline {
 position: relative;
 left: -50%;
 -webkit-transform : translate3d(0, -50%, 0);
 transform : translate3d(0, -50%, 0);
 background-color: black;
 color:white;
}
</style>

<div class="parent">
  <div class="children">
    <div class="children-inline">我是水平垂直居中噢！</div>
  </div>
</div>

水平：首先利用float，将需要居中的div的父div 也就是children 宽度收缩，然后left:50%, 将children的左边与水平中线对齐，再将children-inner左移动-50%，就水平居中了

垂直：先将children 的top设置为50%，然后它的上边和垂直中线对其了，将children-inner 上移动-50%，但是这个50%计算不出来，所以我们使用transform:translate3d(0,-50%,0);

flex 居中

使用display:flex 实现水平居中

<style>
html,body{
 width: 100%;
 height: 200px;
}
.parent {
 display:flex;
 align-items: center;/*垂直居中*/
 justify-content: center;/*水平居中*/
 width:100%;
 height:100%;
 background-color:red;
}
.children {
 background-color:blue;
}
</style>
<div class="parent">
  <div class="children">我是通过flex的水平垂直居中噢！</div>
</div>

CSS 参考样式

一. 字体属性（font）

font-size: x-large; xx-small; px pd
font-style:oblique; italic; normal;
line-height:normal; px pd em
font-weight: bold; lighter; normal;
font-variant: small-caps; normal;
text-transform: capitalize; uppercase; lowercase; none;
text-decoration: underline; overline; line-through; blink

二. 常用字体(font-family)

Courier New, Courier, monospace, Times New Roman, Times, serif, Arial, Helvetica, sans-serif, Verdana

三. 背景属性(background)

background-color: #fff;
background-image:none;
background-repeat:no-repeat;
background-attachment:fixed; scroll;
background-position:left ;top;
background: #000 url(..) repeat fixed left top;

四. 区块属性（block）

letter-spacing: normal;
text-align:justify; left; right; center;
text-indent:px;
vertical-align:baseline; sub; sup; top; text-top; middle; bottom; text-bottom;
word-spacing:normal; 数值
white-space:pre; nowrap;
display:block; inline; list-item; run-in; compact; marker; table; inline-table; table-raw-group; table-header-group; table-footer-group; table-column-group; table-column; table-cell; table-caption;

五.方框属性（box）

width: height: float: clear: margin: padding:

六. 边框属性（border）

border-style: dotted; dashed; solid; double; groove; ridge; inset; outset; border-width;

七. 列表属性（list-style）

list-style-type: disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha

list-style-position: outside inside

list-style-image:url

八.定位属性（position）

position: absolute; relative; static;
visibility: inherit; visible; hidden;
overflow: visible; hidden; scroll; auto;
clip: rect(12px, auto, 12px, auto)

九. CSS 文字属性

color : #999999; /文字颜色/

\2. font-family : 宋体,sans-serif; /文字字体/

\3. font-size : 9pt; /文字大小/

\4. font-style:itelic; /文字斜体/

\5. font-variant:small-caps; /小字体/

\6. letter-spacing : 1pt; /字间距离/

\7. line-height : 200%; /设置行高/

\8. font-weight:bold; /文字粗体/

\9. vertical-align:sub; /下标字/

\10. vertical-align:super; /上标字/

\11. text-decoration:line-through; /加删除线/

\12. text-decoration: overline; /加顶线/

\13. text-decoration:underline; /加下划线/

\14. text-decoration:none; /删除链接下划线/

\15. text-transform : capitalize; /首字大写/

\16. text-transform : uppercase; /英文大写/

\17. text-transform : lowercase; /英文小写/

\18. text-align:right; /文字右对齐/

\19. text-align:left; /文字左对齐/

\20. text-align:center; /文字居中对齐/

\21. text-align:justify; /文字分散对齐/

vertical-align属性

\22. vertical-align:top; /垂直向上对齐/

\23. vertical-align:bottom; /垂直向下对齐/

\24. vertical-align:middle; /垂直居中对齐/

\25. vertical-align:text-top; /文字垂直向上对齐/

\26. vertical-align:text-bottom; /文字垂直向下对齐/

十. CSS 边框空白

padding-top:10px; /上边框留空白/

\2. padding-right:10px; /右边框留空白/

\3. padding-bottom:10px; /下边框留空白/

\4. padding-left:10px; /*左边框留空白

透明度

opacity:0.3; 是关键代码，为1 时，完全不透明， 0完全透明

使用JavaScript改变透明度

</style>
<script>
    window.onload =function(){
         var myDiv = document.getElementById("transparent_div");
        myDiv.onclick =function(){
             myDiv.style.opacity =".4";//针对所有通用浏览器
             myDiv.style.filter ="alpha(opacity=40)";//针对IE浏览器
        }
    }
    </script>
</style>

$("#transparent_div").css({ opacity:.4});

使用jQuery 实现动画效果

$("#transparent_div").click(function(){
$("#transparent_div").animate({ 
 opacity:.4 
 },1000,function(){
  alert("动画完成");
}); 
 });

浏览器兼容hack

浏览器兼容问题就是 css Hack，

CSS 布局技巧

七大属性：

margin-left, border-left, padding-left, width, padding-right, border-right, margin-right

浮动

一个元素浮动时，其他内容会环绕该元素，浮动元素要设置一个width，浮动元素不能相互覆盖，

浮动元素不能超过包含它的块的左右边界
如果浮动元素之前由浮动元素，必须在该浮动元素之后（不能覆盖）
浮动元素加一起太宽，就会自动向下（宽度受限）
浮动元素的顶端，不能比之前所有浮动元素或块级别元素的顶端更高
浮动元素之间的左右边界不能覆盖
浮动元素会尽可能高，尽可能向左

多元素水平居中

设置父元素text-align:center; 设置子元素display:inline-block

分割线样式

实心线条

<hr align=left width=490 color=#990099 SIZE=3 noShade>

垂直线

<HR align=center width=1 color=red size=100>

虚线

<hr size=1 style="color: blue;border-style:dotted;width:490">

双线

<hr size=1 style="COLOR:#ff9999;border-style:double;width:490">

滚动条美化

overflow-y ：设置当对象的内容超过其指定高度时如果管理内容；overflow-x : 设置当对象的内容超过其指定宽度时如何管理内容

参数：

visible 扩大面积显示所有内容
auto 当内容超过限定值时添加滚动条
hidden 总是隐藏滚动条
scroll 总是显示滚动条
1. height 设置滚动条的高度
2. 滚动条颜色参数设置
  - scrollbar-3d-light-color 设置或检索滚动条亮边框颜色
  - scrollbar-highlight-color 设置或检索滚动条3D界面的亮边（ThreedHighlight）颜色
  - scrollbar-face-color 设置或检索滚动条3D表面（ThreedFace）的颜色
  - scrollbar-arrow-color 设置或检索滚动条方向箭头的颜色
  - scrollbar-shadow-color 设置或检索滚动条3D界面的暗边（ThreedShadow）颜色
  - scrollbar-dark-shadow-color 设置或检索滚动条暗边框（ThreedDarkShadow）颜色
  - scrollbar-base-color 设置或检索滚动条基准颜色

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 总结

选择器简介效率从高到低优先级xxx li 100+ 1覆盖提升CSS 选择器性能常用选择器：居中布局方法水平居中文字的水平居中padding 填充块嵌套margin 填充absolute图片居中transform 居中响应式flex 居中CSS 参考样式一. 字体属性（font）二. 常用字体(font-family)三. ...
复制链接

扫一扫