CSS入门教程4

简介: CSS入门教程4

二、CSS的背景

2.1. 背景颜色

💡💡

{background-color: 定义元素的背景颜色}

background-color: 颜色值;
#  默认为透明色
background-color:transparent;
2.2. 背景图片

💡💡

background-image:none|url
2.3. 背景平铺

💡💡

background-repeat:repeat|no-repeat|repeat-x|repeat-y
#   平铺|不平铺|横向平铺|纵向平铺
2.4. 背景图片位置

💡💡

background-position:x y;
# position:  top|bottom|left|right|center  方位名词
2.5. 背景图片固定

💡💡

background-attachment:scroll|fixed
# scroll  随对象内容而滚动
# fixed  背景图形固定
2.6. 背景复合写法

💡💡

background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background:pink url repeat fixed  top;
2.7. 背景色半透明

💡💡

background:rgba(0,0,0,0.3);
# z最后一个参数是alpha透明度  取值范围在0~1

三、CSS三大特性

3.1.层叠性
相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题

💡💡样式冲突 就近原则 样式不冲突,不会层叠

3.2.继承性
CSS中的继承: 子标签会继承父标签的某些样式,如文本颜色和字号。恰当地使用继承可以简化代码,降低 CSS 样式的复杂性。

💡💡字标签会继承父标签的某些样式

3.3.优先级
当同一个元素指定多个选择器,就会有优先级的产生

💡💡 优先级很重要很重要 要记牢

  • 考虑选择器权重
  • 越细分权重越大
  • 继承的权重为0

    通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.
    💡💡

  • 权重表格:
选择器 选择器权重
继承 0,0,0,0
元素选择器 0,0,0,1
类选择器,伪类选择器 0,0,1,0
id选择器 0,1,0,0
行内样式,style=‘’ 1,0,0,0
!important 无穷大 =指定

四、CSS盒子模型

网页布局的核心本质: 就是利用 CSS 摆盒子
4.1.边框

💡💡

border:border-width||border-style||border-color

/*简写 无顺序*/
border:1px solid red;
/*分开写 这是上边框 其余同理*/
border-top:1px solid red;

💡💡边框样式:

  • none 默认无
  • solid 单实现 最常用
  • dashed 虚线
  • dotted 点线
4.2.表格的细线边框

💡💡

border-collapse:collapse;
/*collapse合并*/
4.3.边框会影响盒子实际大小

💡💡 解决方法:

  1. 测量盒子大小的时候,不量边框
  2. 如果测量时包含边框,则需要用width/height减去边框宽度
4.4.内边距
padding 属性用于设置内边距,即边框与内容之间的距离。
  • padding-top 上内边距
  • padding-bottom 下
  • padding-left 左
  • padding-right 右

💡💡

值的个数 表达意思
padding:5px; 1个值,上下左右都有5像素内边距
padding:5px 10px; 2个值,上下边距为5像素,左右为10像素
padding:5px 10px 20px; 3个值,上内边距为5像素,左右为10像素,下为20像素
padding:5px 10px 20px 30px; 4个值,上右下左,顺时针
4.5.外边距
margin 属性用于设置外边距,即控制盒子和盒子之间的距离
  • margin-top 上外边距
  • margin-bottom 下
  • margin-left 右
  • margin-right 左

💡💡
**margin间写表达方式和padding一样
外边距可以让盒子水平居中**


.header {width:200px;
  margin:0 auto;}
/*块级元素水平居中*/

行内元素或者行内块元素水平居中给其父元素添加text-align:center

4.6.外边距合并
  1. 相邻块元素垂直外边距的合并

💡💡解决方案:

  • 尽量只给一个盒子添加 margin 值。
  1. 嵌套块元素垂直外边距的塌陷

💡💡解决方案:

  • 可以为父元素定义上边框。
  • 可以为父元素定义上内边距。
  • 可以为父元素添加 overflow:hidden。
4.7.清除内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距。

💡💡

* {
    padding:0;   /* 清除内边距 */
    margin:0;    /* 清除外边距 */
  }
相关文章
|
前端开发 容器
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局(上)
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局
17600 11
|
前端开发
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第7章定位
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第7章定位
152 0
|
前端开发
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网
179 0
|
前端开发 容器
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局(下)
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局(下)
176 0
|
前端开发
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型(下)
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型(下)
181 0
|
Web App开发 前端开发 开发者
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型(上)
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型
250 0
|
前端开发 数据安全/隐私保护
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单
193 0
|
前端开发 容器
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第4章CSS文本样式
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第4章CSS文本样式
162 0
|
前端开发
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第3章初识CSS
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第3章初识CSS
156 0
|
前端开发 开发工具
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第2章HTML基础知识
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第2章HTML基础知识
179 0