我们今天学习了:
3.6 简写属性
3.7 背景透明(CSS3)
CSS3支持背景半透明的写法语法格式是:
background: rgba(0,0,0,0.3);
最后一个参数是alpha 透明度 取值范围 0~1之间
注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不收影响。
3.8 背景缩放(CSS3)
通过background-size设置背景图片的尺寸,就像我们设置img的尺寸一样,在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下:
a) 可以设置长度单位(px)(img大小一样)或百分比(设置百分比时,参照盒子的宽高)
b) 设置为cover时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。我们平时用的cover 最多
c) 设置为contain会自动调整缩放比例,保证图片始终完整显示在背景区域。
3.9 背景总结
4. 字体图标
-
可以做出跟图片一样可以做的事情,改变透明度、旋转度,等..
-
但是本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果等等...
-
本身体积更小,但携带的信息并没有削减。
-
几乎支持所有的浏览器
-
移动端设备必备良药...
4.1 字体图标的使用
阿里icon font字库
这个是阿里巴巴M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。
得到压缩包之后,最后一步,是最重要的一步了, 就是字体文件已经有了,我们需要引入到我们页面中。
5. list-style 属性
list-style 简写属性在一个声明中设置所有的列表属性。
可以按顺序设置如下属性:
-
list-style-type
-
list-style-position
-
list-style-image
5.1 list-style-type
5.2 list-style-position
5.3 list-style-image
6. CSS 三大特性
层叠,继承,优先级是我们学习CSS 必须掌握的三个特性。
6.1 CSS层叠性
-
所谓层叠性是指多种CSS样式的叠加,就是css处理冲突的能力。
一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准。
当同一个元素被两个选择器选中时,CSS会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖(层叠)。
可以这样理解权重:这个选择器对于这个元素的重要性。
6.2 CSS继承性
所谓继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。
注意:
1.所以对于字体、文本属性等网页中通用的样式可以使用继承。例如,字体、字号、颜色、行距等可以在body元素中统一设置,然后通过继承影响文档中所有文本。
2.并不是所有的CSS属性都可以继承,例如,下面的属性就不具有继承性:边框、外边距、内边距、背景、定位、元素高属性。
6.3 CSS优先级
定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题,即考虑权重的问题。
!important>行内样式表>ID选择器>类选择器>标签选择器>通配符>继承的样式>浏览器默认样式
在考虑权重时,初学者还需要注意一些特殊的情况,具体如下:
-
继承样式的权重为0。即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。
-
行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。
-
权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。
-
CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。
1.盒子模型(CSS重点)
其实,CSS就三个大模块: 盒子模型 、 浮动 、 定位,其余的都是细节。要求这三部分,无论如何也要学的非常精通。
1. 看透网页布局的本质
网页布局中,我们是如何把里面的文字,图片,按照美工给我们的效果图排列的整齐有序呢?
其实就是把网页元素比如文字图片等等,放入盒子里面,然后利用CSS摆放盒子的过程,就是网页布局。
2. 盒子模型(Box Model)
所谓盒子模型:
-
就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
-
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:
-
外边距(margin)、
-
边框(border)、
-
内边距(padding)、
-
实际内容(content)四个属性。
首先,我们来看一张图,来体会下什么是盒子模型。
3. 盒子边框(border)
边框就是柚子皮。
语法:
border : border-width | border-style | border-color
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式 |
border-color | 边框颜色 |
边框样式(border-style),常用属性值如下:
none:没有边框即忽略所有边框的宽度(默认值) solid:边框为单实线(最为常用的) dashed:边框为虚线 dotted:边框为点线 double:边框为双实线
我们在开发中,经常把表单原本的边框去掉,然后添加任意的样式。(border: 0)
3.1 边框综合设置
3.2 圆角边框(CSS3)
从此以后,我们的世界不只有矩形。radius 半径(距离)
允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
语法格式:
border-radius: 左上角 右上角 右下角 左下角;
-
其中每一个值可以为 数值或百分比的形式。
-
技巧: 让一个正方形 变成圆圈
border-radius: 50%;
-
以上效果图矩形的圆角, 就不要用 百分比了,因为百分比会是表示高度和宽度的一半。
-
而我们这里矩形就只用 用 高度的一半就好了。精确单位。
演示例子风车:
4. 内边距(padding)
padding属性用于设置内边距。 是指 边框与内容之间的距离。
padding-top:上内边距 padding-right:右内边距 padding-bottom:下内边距 padding-left:左内边距
4.1 属性值设置
温馨提示: 后面跟几个数值表示的意思是不一样的。
值的个数 | 表达意思 |
---|---|
1个值 | padding:上下左右边距 比如padding: 3px; 表示上下左右都是3像素 |
2个值 | padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素 |
3个值 | padding:上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素 |
4个值 | padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针 |
5. 外边距(margin)
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”, 这段空白通常不能放置其他内容。
margin-top:上外边距 margin-right:右外边距 margin-bottom:下外边距 margin-left:上外边距 margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
5.1 外边距实现盒子居中
可以让一个盒子实现水平居中,需要满足一下两个条件:
-
必须是块级元素。
-
盒子必须指定了宽度(width)
然后就给左右的外边距都设置为auto,就可使块级元素水平居中。
实际工作中常用这种方式进行网页布局,示例代码如下:
.header{ width:960px; margin:0 auto;}
5.2 文字(行内元素)居中
-
文字水平居中是 text-align: center
-
盒子水平居中:左右margin 改为 auto
text-align: center; /* 文字居中水平 */ margin: 10px auto; /* 盒子水平居中 左右margin 改为 auto 就阔以了 */
5.3 清除元素的默认内外边距
为了更方便地控制网页中元素,制作网页时,可使用如下代码清除元素的默认内外边距:
* { padding:0; /* 清除内边距 */ margin:0; /* 清除外边距 */ }
注意: 行内元素是只有左右外边距的,是没有上下外边距的。 内边距,在ie6等低版本浏览器也会有问题。
我们尽量不要给行内元素指定上下的内外边距就好了。
5.4 外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。
5.4.1 相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。
5.4.2 嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。