WEB前端开发

之CSS

分享人:棉花冰杯

个人网站:http://webmianhua.com

  • 󰂲WEB前端开发工具
  • 󰂲CSS的作用及写法
  • 󰂲CSS常用属性
  • 󰂲CSS伪元素 & 伪类
  • 󰂲CSS优先级
  • 󰂲CSS Sprites和图标字体
  • 󰂲浏览器兼容
  • 󰂲移动端网页适配
  • 󰂲CSS3效果
WEB前端开发工具
  • 编辑器:Dreamware,sublime text,editplus,记事本等;
  • 图片处理工具:PhotoShop(最新CC破解版是神器)
  • 取色工具:FSCapture
  • 测量工具:MarkMan
  • 代码调试,模拟手机屏幕:chrome开发人员工具,firebug,IE7+开发人员工具等
  • 共享地址:\\10.18.101.212\public\NBA\前端相关工具
CSS的作用及写法

󰆩CSS的作用

网页基本有三个主要的部分,HTML,CSS,JS,主要用于结构,样式与行为,CSS主要的作用就是美化网页的一个语言,它的特点:
1.结构与样式分离的方式,便于后期维护与改版;
2.样式定义精确到像素的级别;
3.可以用多套样式,使网页有任意样式切换的效果

󰆩CSS的写法

<style type="text/css">
body{ font-size:12px; margin:0;}
.red{ color:red;}
#wrapper{ max-width:768px; margin:0 auto;}
#test .left_nav span{ border:1px solid #00f;}
</style>

CSS类型:
标签; class属性; id属性;
以及以上三种类型的各种组合...
CSS常用属性

󰆩字体

属性 描述
font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。

󰆩背景

属性 描述
background 简写属性,作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。
CSS常用属性

󰆩文本

属性 描述
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。
CSS常用属性

󰆩盒模型

CSS常用属性

󰆩尺寸

属性 描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

󰆩定位

属性 描述
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。
CSS常用属性

󰆩表格

属性 描述
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。

󰆩其它

属性 描述
display 设置是否及如何显示元素。
cursor 规定当指向某元素之上时显示的指针类型。
float 定义元素在哪个方向浮动。
visibility 设置元素是否可见或不可见。
clear 设置一个元素的侧面是否允许其他的浮动元素。
opacity 设置元素透明度。
CSS伪元素 & 伪类

󰆩伪元素

属性 描述
:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。

󰆩伪类

属性 描述
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时,向元素添加样式。
:link 向未被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:last-child 向元素的最后一个子元素添加样式。
:nth-child 向选择器匹配属于其父元素的第N个子元素添加样式。
CSS优先级

󰆩常用的添加样式的方法有4种

  • 1行内样式

    例:<div style="color:red;">我是测试内容</div>
  • 2嵌入页面样式

    例:<style type="text/css">
    body{ font-size:12px/18px;}
    </style>
  • 3链接样式

    例:<link type="text/css" href="style.css" rel="stylesheet" />
  • 4导入样式

    例:<style type="text/css">
    @import url(style.css);
    </style>
注:ID的权重比class高,class比标签高。如果权重相同,出现在后的总是比出现在前的具有更高的优先级,因此出现在最后的那条语句将被作为该属性的值。
CSS Sprites和图标字体

󰆩CSS Sprites

CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。
加速的关键,不是降低质量,而是减少个数。传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以,图片越多请求次数越多,造成延迟的可能性也就越大。

󰆩图标字体

像bootstrap里面的图标也全用字体实现的,目前一淘也出了个iconfont,设计师也可以自定义图标。网址:http://iconfont.cn/
浏览器兼容

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中,做好浏览器兼容,才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计,浏览器对标准的更好兼容能够给用户更好的使用体验。
主要兼容的浏览器有IE6,7,8,9,10、chrome、firefox、safari、opara等

󰆩浏览器兼容常用办法

  • 重置标签默认样式(reset)
  • 默认在非IE浏览器下开发,针对IE浏览器写hack
  • 条件注释判断IE浏览器
    <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
    <!--[if IE]> 所有的IE可识别 <![endif]-->
    <!--[if IE 6]> 仅IE6可识别 <![endif]-->
    <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
    <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
    <!--[if IE 7]> 仅IE7可识别 <![endif]-->
    <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
    <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
    <!--[if IE 8]> 仅IE8可识别 <![endif]-->
    <!--[if IE 9]> 仅IE9可识别 <![endif]-->
  • 避开常见的CSS兼容问题
移动端网页适配

󰆩viewport

对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域,
这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;
实际上我们可以操作的属性有4 个:
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />// 离线应用的另一个技巧
<meta content="black" name="apple-mobile-web-app-status-bar-style" />//指定的iphone中safari顶端的状态条的样式
<meta content="telephone=no" name="format-detection" />//告诉设备忽略将页面中的数字识别为电话号码
<meta name="apple-itunes-app" content="app-id=830302503">//iphone,ipad上的safari显示appstore上的应用

width -// viewport 的宽度 (范围从200 到10,000,默认为980 像素)
height -// viewport 的高度 (范围从223 到10,000)
initial-scale -// 初始的缩放比例 (范围从>0 到10)
minimum-scale -// 允许用户缩放到的最小比例
maximum-scale -// 允许用户缩放到的最大比例
user-scalable -// 用户是否可以手动缩 (no,yes)
移动端网页适配

󰆩响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。

页面布局采用流式布局,方便不用手机屏幕宽度适配,然后给个最大宽度即可。
字体大小,宽,高的单位最好用em/rem,方便按比例缩放,如下:
@media screen and (max-width: 320px) {
    body{
        font-size:100%;
    }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
    body{
        font-size:150%;
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    body{
        font-size:100%;
    }
}
CSS3效果
  • css3 选择器
  • css3 圆角
  • css3 阴影
  • css3 倒影
  • css3 渐变
  • css3 变形
  • css3 缩放
  • css3 旋转
  • css3 translate
  • css3 transition
Thank You !