学习笔记(三)"/>
CSS学习笔记(三)
一.CSS的三大特性
1.层叠性(主要解决样式冲突的问题)
层叠性原则:
样式冲突,遵循的原则是就近原则,哪个样式离结构近,就遵循哪个样式;
样式不冲突。不会层叠;
2.继承性
子标签会继承父亲的某些样式,并不是所有的都继承。如文本颜色和字号(text-,font-,line-
以这些元素开头的可以继承,以及color属性)
行高的继承性:body{ font:12px/1.5 Microsoft YaHei }
行高可以不跟单位,也可以跟单位;
如果子元素没有设置行高,则会继承父元素的行高为1.5;
此时子元素的行高是:当前子元素的文字大小*1.5;
3.优先级
当同一个元素指定多个选择器,就会有优先级的产生,选择器相同,则执行层叠性;选择器不同,则根据选择器权重执行;
选择器权重:!important > 行内样式 style="..." > id选择器 > 类选择器,伪类选择器 > 元素选择器 > 继承或通配符选择器
注意:
不管父元素权重多高,子元素得到的权重都是0(我们看标签到底执行哪个样式,就先看这个标签有没有直接被选出来);
浏览器给a链接默认指定了一个样式,蓝色的有下划线;
权重叠加(复合选择器会有权重叠加问题)
二.盒子模型
页面布局三大核心:盒子模型、浮动、定位
1.看透网页布局的本质(利用CSS摆盒子)
网页布局过程:先准备好相关的网页元素–>利用CSS设置好盒子样式–>往盒子里面装内容
2.盒子模型的组成
CSS模型本质上是一个盒子,封装周围的HTML元素有:border边框、margin外边距、padding内边距和content实际内容
3.边框
属性:border : border-width(粗细) | border-style(样式) | boder-color(颜色)
border-style:
实线边框:solid
;虚线边框:dashed
;点线边框:dotted
复合写法:border:1px solid red
没有顺序
边框分开写法:border-top | border-bottom | border-left | border-right
4.表格的细线边框
语法格式:border-collapse:collapse
(相邻的边框合并到一起)
5.边框会影响盒子的实际大小
边框会使实际盒子大小变大
6.内边距
设置盒子边框和内容之间的距离
语法格式:padding-left | padding-right | padding-top | padding-bottom
简写:
一个值,代表上下左右都有5像素内边距:padding:5px;
两个值,代表上下内边距是5像素,左右内边距是10像素:padding:5px 10px;
三个值,代表上内边距5像素,左右内边距10像素,下内边距20像素:padding:5px 10px 20px;
四个值,上是5像素,右是10像素,下是20像素,左是30像素:padding:5px 10px 20px 30px;
注意:
给盒子指定padding之后,内容和边框有了距离,添加了内边距,padding影响了盒子的大小(也就是说,如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子),如果保证盒子和效果图保持一致,则让width、height减去多出来的内边距大小即可;
如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小;
7.外边距
控制盒子和盒子之间的距离
语法格式:margin-top | margin-bottom | margin-left | margin-right
margin简写代表的意义与padding类似
典型应用:外边距可以让块级盒子水平居中,必须满足的条件:
①盒子必须指定了宽度
②盒子左右的外边距都设置为auto
常见的写法:margin:0 auto;
注意:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父亲添加text-align:center;
8.外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并,主要有两种情况:
(1)相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距,下面的元素有上外边距,则它们之间的垂直间距不是其之和,而是取两个值中的较大者;解决方案是尽量只给一个盒子添加margin值。
(2)嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距的同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
解决方案:
①为父元素定义上边框,边框可以设置透明
②可以为父元素定义上内边距
③可以为父元素添加overflow:hidden
④:其他方法:浮动、固定、绝对定位等等
9.清除内外边距
网页元素有很多都带有默认的内外边距,而且不同的浏览器默认的也不一致,因此在布局前,首先要清除下网页元素的内外边距
代码格式:*{margin : 0; padding : 0;}
注意:行内元素为了照顾兼容性,尽量只设置左右的内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了。
三.PS的基本操作
标尺:Ctrl+R
放大视图:Ctrl++
按住空格键,拖动PS视图
取消选区:Ctrl+D
吸管工具取色
四.CSS3新增样式
1.圆角边框
代码格式:border-radius:length;
(半径为length的⚪与矩形组成,参数值可以使用像素值和百分比)
圆形:如果正方形想要设置为一个圆,半径为边框宽度一半(50%就是宽度和高度的一半);
圆角矩形:半径为高度一半;
不同的圆角:简写属性,可以跟四个值,分别代表左上角,右上角,右下角,左下角(顺时针),分开写为border-top-left-radius.......
2.盒子阴影
语法格式:box-shadow:h-shadow v-shadow blur spread color inset;
水平阴影:必需,允许负值h-shadow
垂直阴影:必需,允许负值v-shadow
模糊距离:可选,blur
阴影尺寸:可选,spread
阴影颜色:可选,color
将外部(outset
)改为内部阴影:可选,inset
3.文字阴影
代码格式:text-shadow:h-shadow v-shadow blur color
总结
1.标签都是有语义的,合理的地方使用合理的标签,比如产品标题就用<h>
,大量段落文字就用<p>
;
2.给盒子起类名可以更好找到这个盒子,后期维护更方便;
3.margin和padding可以混用,两者各有优缺点,根据实际情况选取;
更多推荐
CSS学习笔记(三)
发布评论