14个常见的CSS技巧及常见问题

城固电热水龙头

城固电热水龙头

2016-02-19 14:17

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的14个常见的CSS技巧及常见问题,过去的都会过去,迎接崭新的开始,释放更美好的自己。
1、善用css缩写可以减少页面文件大小,提高下载速度,同时使代码简洁可读。
如:

div{
    border-top:1px solid #cccccc;
    border-left:1px solid #cccccc;
    border-right:1px soli #cccccc;
    border-bottom:1px solid #cccccc;
}
可以写为

p{border:1px solid #cccccc}
再如:

div{
    margin-top:10px;
    margin-right:20px;
    margin-bottom:30px;
    margin-left:40px;
}
可以改写为:

/*注意上、右、下、左的书写顺序*/
div{margin:10px 20px 30px 40px}
/*注意,数值与单位不能有空格,每个值之间用空格隔开*/
(详细请参考:css2参考手册、常用css缩写总结)


通常我们写法为:p class=”a”/p
实际上我们可以为p元素指定多个规则,如:

CSS:
.a{…}
.b{….}
HTML:
p class="a b"该元素同时包括a和b中设定的样式/p
注意:多个规则之间用空格分开。


忘记定义尺寸是css初学者新手普遍存在的问题。在html我们可以写width=”100”,但在css中应该给出一个准确的单位。如:width:100px;height:50px;font-size:9pt ,0值除外,因为不论对于任何单位。0值的大小都是相等的。

注意:不要在数值和单位之间加空格。


在xhtml中,css定义的元素名称是区分大小写的,class和id的值在html和xhtml中也是区分大小写的,所以为了避免错误,推荐一律使用小写。
如#aaa,与#AAA是不同的,在xhtml中,p和P也是不同的.他们之间不会覆盖。
如果在css中定义了#aaa,在html元素中使用AAA来应用将不能得到#aaa中定义的样式。
示例代码:

CSS:
#aaa{border:1px solid #ccc}  
HTML:
div id="AAA"显示不出来1个像素的边线/div

如果对一个元素定义了多次样式,则以最近的一级优先,最近一级的样式将覆盖其他的样式定义。
如:

CSS:
p{color:red}
.blue{color:blue}
.yellow{color:yellow}
HTML:
p此处显示为红色/p
p class="blue"此处显示为蓝色/p
p class="blue" style="color:green"此处显示为绿色/p
p class="blue yellow"此处显示为黄色/p
注意:
(1)注意样式的几个优先顺序(优先级由上至下递减):
--元素style设定
--head区style/style中的设定
--外部引用css文件
(2)优先级不是按访问顺序来设定的,而是又css中的声明顺序来设定的。
如上例中p class="yellow blue"此处显示为黄色/p也显示为黄色,因为在css定义中.yellow在.blue的后面。


例如:

#contain{..}
#contain_ul{...}
.contail_li{...}
div id="contain"
    ul id="contain_ul"
        li class="contain_li"/li
        li class="contain_li"/li
    /ul
/div
可以更改为:

#contain{..}
#contain ul{...}
.contain ul li{...}
div id="contain"
ul
    li/li
    li/li
/ul
/div

将background:url("xxx.gif")改为background:url(xxx.gif)
因为对于部分浏览器加引号反而会引起错误。



例如:
有如下目录结构
|--images
   |--xxx.gif
|--css
   |--xx.css
|--index.html
代码内容
index.html引用xx.css文件。link rel="stylesheet" href="css/xx.css" /
xx.css要引用xxx.gif图片其写法为:background:url(../images/xxx.gif)


如h1,h2,h3,div{font-size:16px;font-weight:bold}
则h1,h2,h3,div元素的样式都为字体16像素,字体粗体


当用css定义链接的各种状态时,一定要注意其书写顺序,即::link :visited :hover :active。
如果不按照该顺序书写可能无法达到自己希望的效果。为了记忆该顺序我们抽取每个单词的首字母:L V H A,你可以通过记忆LoVe,Hate,两个单词来记住其顺序。


在表格或层中我们可能希望内容不换行或强制换行,我们可以通过一些css属性来达到这些要求。
禁止换行:white-space:nowrap
强制换行:word-wrap: break-word; word-break: normal;


Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。

Relative,CSS中的写法是:position:relative;  他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。


div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。
span是一个内联元素,没有实际意义,它的存在纯粹是为了应用样式,给一段内容加上span/span标记可以通过在span上定义样式来设定其内容的样式。


display:none和visibility:hidden都可以隐藏一个元素
但visibility:hidden只是隐藏了元素的内容,但其使用的位置空间仍然被保留。
而display:none则相当把元素从页面中去除,其占用位置也将被删除。
展开更多 50%)
分享

猜你喜欢

14个常见的CSS技巧及常见问题

Web开发
14个常见的CSS技巧及常见问题

孕期常见问题14个偏方

孕期 孕妇
孕期常见问题14个偏方

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

ADBlock使用技巧及常见问题

电脑网络
ADBlock使用技巧及常见问题

MySQL常见问题集锦解答及技巧

MySQL mysql数据库
MySQL常见问题集锦解答及技巧

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

PowerPoint常见问题及对策

电脑入门
PowerPoint常见问题及对策

面试常见问题及回答

面试 面试技巧
面试常见问题及回答

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

两个字符串分割函数引出的奇怪问题

两个字符串分割函数引出的奇怪问题

在脸上扯出一个笑容 - QQ非主流分组

在脸上扯出一个笑容 - QQ非主流分组
下拉加载更多内容 ↓