Posts in current category

That's what css styles have to be written (css reference style collection)


May 04, 2021 01:00 CSS


Table of contents


Today, our websites and pages need to pay more attention to detail, whether it is the font style, or the resolution clarity of the picture will affect the user's visit experience and PV, and whether users will return to our website/blog in the future. T o make our pages more beautiful and personalized, we need to learn more about CSS style properties. C SS not only decorates web pages statically, but also dynamically formats the elements of web pages in conjunction with various scripting languages, and CSS has the ability to edit web page objects and model styles. I n order to facilitate everyone to learn CSS style, the following we organize CSS style knowledge points and reference style collection.


That's what css styles have to be written (css reference style collection)

Some common unnecessary CSS styles

1, consistent with the default CSS style

Sometimes we write CSS styles that are consistent with the browser's default CSS styles, and sometimes you may not realize it yourself.

Common examples are:

div{width:auto; height:auto;}

For some friends who have just used CSS, sometimes, in order to express this div height is automatically adapted to the internal elements, can not help but height:auto; The style of the . O bviously, this style is unnecessary, and the height of any block element by default is almost auto.

Let's take a look at the CSS-style file on Renren's personal homepage (link here), and search for height:auto at ctrl-F under chrome height:auto showing nine (see figure below).

That's what css styles have to be written (css reference style collection)

That's what css styles have to be written (css reference style collection)

As a general rule, height:auto only when using CSS priority to height style, and the rest can basically be removed. Like the example above of Renren, there are nine height:auto and at least half of them are unnecessary.

body,p,h1,h2,h3,h4,h5,h6{margin:0; padding:0;}

v

上面有关 body,p 等标签的样式中有个样式是无效的,与默认值一致的,这个样式就是 padding:0 ;,对于 body , p , h1~6 这些标签,本身的 padding 值就是0,所以只需要 margin:0 就可以了。


在CSS reset中,为了方便,都是一堆标签直接套个 margin:0 ; padding:0 ; 了事。还拿人人网的 CSS 样式文件举例,人人网个人首页样式第一行就是一长串标签带个 margin:0 ; padding:0 ; 先不管其把 span , div , em 之类的标签也加进入,就算是没有这些标签,也是极不推荐这种写法,完全的浪费资源,浪费 CSS 的渲染。比较推荐的做法是把 ul , ol 独立出来,因为 ul , ol 还要独立设置 list-style 样式,而且常用的标签就 ul , ol 列表元素有默认的 padding 值,所以高效的写法应该是:

body,p,h1,h2,h3,h4,h5,h6{margin:0;}

ul,ol{list-stype:none; margin:0; padding:0;}

span{display:inline; float:left; margin-left:3px;}

这也是常出现的。出现这种情况的原因可能与 IE6 的浮动双边距 bug 有关,我们可以用设置 display:inline 的方法修复 IE6 的这个 bug,但是,如果对这个 bug 理解不够,对 CSS 的理解不足,就会出现滥用的情况。上面是滥用的情况之一,对于 span/a/em/cite/i/b/strong 等行内元素默认就是 display:inline 的,所以给其设置 display:inline 属性是多此一举。


类似的情况还有对本身就是 block 水平的元素设置 display:block 属性,例如:

li{display:block; padding:4px 0;}

上面的情况屡见不鲜,甚至在比较优秀的网站上也会有这类低级的样式问题。


其他一些情况

div{margin:auto;}

textarea{overflow:auto;}

img,input,button{vertical-align:baseline;}

div{background-position:0 0;}


css参考样式集合

一. 字体属性:(font)

1. 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD

2. 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)

3. 行高 {line-height: normal;}(正常) 单位:PX、PD、EM

4. 粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)

5. 变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)

6. 大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

7. 修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)


二. 常用字体: (font-family)

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


三. 背景属性: (background)

1. 色彩 {background-color: #FFFFFF;}

2. 图片 {background-image: none;}

3. 重复 {background-repeat: no-repeat;}repeat-x(水平);repeat-y(垂直)

4. 滚动 {background-attachment: fixed;}(固定) scroll;(滚动)

5. 位置 {background-position: left;}(水平) top(垂直);

简写方法 {background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现.


四. 区块属性: (Block)

1. 字间距 {letter-spacing: normal;} 数值

2. 对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)

3. 缩进 {text-indent: 数值px;}

4. 垂直对齐 {vertical-align: baseline;}(基线) sub;(下标) sup;(上标) top; text-top; middle; bottom; text-bottom;

5. 词间距word-spacing: normal; 数值

6. 空格white-space: pre;(保留) nowrap;(不换行)

7. 显示 {display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /*display 属性的了解很模糊*/


That's what css styles have to be written (css reference style collection)


五. 方框属性: (Box)

1. width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左


六. 边框属性: (Border)

1. border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset; border-width:; 边框宽度

border-color:#;

简写方法border:width style color; /*简写*/


七. 列表属性: (List-style)

1. 类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;

2. 位置list-style-position: outside;(外) inside;

3. 图像list-style-image: url(..);


八. 定位属性: (Position)

1.Position: absolute; relative; static;

visibility: inherit; visible; hidden;

overflow: visible; hidden; scroll; auto;

clip: rect(12px,auto,12px,auto) (裁切)


九. CSS文字属性:

1. 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边框空白

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

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

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

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


CSS 样式表中的样式覆盖顺序

有时候在写 CSS 的过程中,某些限制总是不起作用,这就涉及了 CSS 样式覆盖的问题,如下所示:

#navigator {

height: 100%;

width: 200;

position: absolute;

left: 0;

border: solid 2 #EEE;  }

.current_block {

border: solid 2 #AE0;  }

在一些教材中,只说 CSS 的顺序是“元素上的 style” > “文件头上的 style 元素” >“外部样式文件”,但对于样式文件中的多个相同样式的优先级怎样排列,没有详细说明。经过测试和继续搜索,得知优先级如下排列:

1. 样式表的元素选择器选择越精确,则其中的样式优先级越高:

id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
所以上例中, #navigator 的样式优先级大于 .current_block 的优先级,及时 .current_block 是最新添加的,也不起作用。

2. 对于相同类型选择器制定的样式,在样式表文件中,越靠后的优先级越高:

注意,这里是样式表文件中越靠后的优先级越高,而不是在元素 class 出现的顺序。比如 .class2 在样式表中出现在 .class1 之后:

.class1 {

color: black;  }

.class2 {

color: red;  }

而某个元素指定 class 时采用 class="class2 class1" 这种方式指定,此时虽然class1在元素中指定时排在class2的后面,但因为在样式表文件中class1处于class2前面,此时仍然是class2的优先级更高,color的属性为red,而非black。

3. 如果要让某个样式的优先级变高,可以使用 !important 来指定:

.class1 {

color: black !important;  }

.class2 {

color: red;  }

这时 class 将使用 black,而非 red。

对于一开始遇到的问题,有两种解决方案:

1. 将 border 从 #navigator 中拿出来,放到一个class .block中,而 .block 放到 .current_block 之前:

#navigator {

height: 100%;

width: 200;

position: absolute;

left: 0;  }

.block {

border: solid 2 #EEE;  }

.current_block {

border: solid 2 #AE0;  }

需要默认为 #navigator 元素指定 class="block"

2. 使用!important:

#navigator {

height: 100%;

width: 200;

position: absolute;

left: 0;

border: solid 2 #EEE;  }

.current_block {

border: solid 2 #AE0 !important;  }

此时无需作任何其他改动即可生效。可见第二种方案更简单一些。

大家都知道CSS的全称叫做“层叠样式表”,但估计很多人都不知道“层叠”二字的含义。其实,“层叠”指的就是样式的覆盖,当一个元素被运用上多种样式,并且出现重名的样式属性时,浏览器必须从中选择一个属性值,这个过程就叫“层叠”。样式覆盖(这种叫法更大众化些)遵循一定的规则。


首先需要明确的是,很多情况都会导致一个元素被运用上多种样式,样式覆盖的规则也需要根据不同的情况来定,具体规则如下。


规则一:由于继承而发生样式冲突时,最近祖先获胜。

CSS的继承机制使得元素可以从包含它的祖先元素中继承样式,考虑下面这种情况:

<style>

body

{color:black;}

p

{color:blue;}

</style>

<p>welcome to <strong>w3cschool</strong></p>

strong 分别从 body p 中继承了 color 属性,但是由于 p 在继承树上离 strong 更近,因此 strong 中的文字最终继承 p 的蓝色。

规则二:继承的样式和直接指定的样式冲突时,直接指定的样式获胜。

在上面的例子中,假如还指定了 strong 元素的样式,如:

strong

{color:red;}

那么根据规则二, strong 中的文字最终显示为红色。

规则三:直接指定的样式发生冲突时,样式权值高者获胜。

样式的权值取决于样式的选择器,权值定义如下表。


That's what css styles have to be written (css reference style collection)

As you can see, the weight of the inline style, the class selector, and the label selector, in addition to which the weight of the descendant selector is the total value of each weight, such as #nav .current a weight of 100 , 10 , 1 , 111.

Rule 4: When the style weights are the same, the latter wins.

Consider the following

<p class="byline">Written by <a class="email" href="mailto:[email protected]">Jean Graine de Pomme</a></p>

.byline a {color:red;}

p .email {color:blue;}

.byline a and p .email the a element above directly, and both have weights of 11, which, according to rule four, end up in blue. a

Since style sheets can be external or internal, Rule FOUR reminds us of the order in which external style sheets are introduced (and the order in which elements <link> where external style sheets appear with internal style sheets. In general, internal style sheets appear after the introduction of all external style sheets, typically before the introduction of the </head>


Rule five: !important of !important are not overwritten.

!important can be seen as a last-of-last-last time to break the above four rules of the "golden finger". I f you have to take a style property and not let it be overwritten, you can add !important after the property value, for example, .byline a {color:red !important;} force the link to appear red. In most cases, there are other ways to control style overlays and not !important

The method of operating CSS styles in JQuery

//1、获取和设置样式

$("#tow").attr("class")获取ID为tow的class属性

$("#two").attr("class","divClass")设置Id为two的class属性。

//2、追加样式

$("#two").addClass("divClass2")为ID为two的对象追加样式divClass2

//3、移除样式

$("#two").removeClass("divClass")移除 ID为two的对象的class名为divClass的样式。

$(#two).removeClass("divClass divClass2")移除多个样式。

//4、切换类名

$("#two").toggleClass("anotherClass") //重复切换anotherClass样式

//5、判断是否含有某项样式

$("#two").hasClass("another")==$("#two").is(".another");

//6、获取css样式中的样式

$("div").css("color") 设置color属性值. $(element).css(style)

//设置单个样式

$("div").css("color","red")

//设置多个样式

$("div").css({fontSize:"30px",color:"red"})

$("div").css("height","30px")==$("div").height("30px")

$("div").css("width","30px")==$("div").width("30px")

//7.offset()方法

//它的作用是获取元素在当前视窗的相对偏移,其中返回对象包含两个属性,即top和left 。

//注意:只对可见元素有效。

var offset=$("div").offset();

var left=offset.left;         //获取左偏移

var top=offset.top;        //获取右偏移

//8、position()方法

//它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,与offset()一样,它返回的对象也包括两个属性即top和left。

//9、scrollTop()v方法和scrollLeft()方法

$("div").scrollTop();        //获取元素的滚动条距顶端的距离。

$("div").scrollLeft();         //获取元素的滚动条距左侧的距离。

//10、jQuery中的 toggle和slideToggle 方法,都可以实现对一个元素的显示和隐藏。区别是:

//toggle:动态效果为从右至左。横向动作。

//slideToggle:动态效果从下至上。竖向动作。

//比如想实现一个树由下至上收缩的动态效果,就使用slideToggle就ok了。

$('input').attr("readonly",true)//将input元素设置为readonly

$('input').attr("readonly",false)//去除input元素的readonly属性

$('input').attr("disabled",true)//将input元素设置为disabled

$('input').attr("disabled",false)//去除input元素的disabled属性