CSS基本语法（二）

目录

CSS基本语法（二）

八、CSS复合选择器

在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的

  • 复合选择器可以更准确、更高效的选择目标元素（标签）
  • 符合选择器是由多个基础选择器，通过不同的组合方式组合而成的
  • 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

1、后代选择器**

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内存标签写在后面，中间用空格分离。但标签发生嵌套时，内层标签就成为外层标签的后代。

元素一 元素二{样式声明}

ol li {color: red;}  /* 选择li标签 */

元素一和元素二中间用空格隔开

元素一是父级，元素二是子集，最终选择的是元素二

元素二可以是子级，也可以是孙子级等，只要是元素一的后代即可

ol li p {color: pink}  /* 选择p标签 */

元素一和元素二可以是任意的标签选择器

2、子选择器

子元素选择器（子选择器）只能作为某元素的最近一级子元素。简单理解就是选亲儿子元素

元素一 > 元素二{样式声明}

表示选择元素一里面的所有直接后代（子元素）元素二

div > p {text-decoration: none;}  /* 选择p标签 */

元素一和元素二中间用大于号隔开

元素一是父级，元素二是子级，最终选择的是元素二

元素二必须是亲儿子，其孙子、重孙之类都不归它管

3、并集选择器**

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常被用于集体声明

并集选择器是各选择器通过逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分

元素一, 元素二 { 样式声明 }

表示选择元素一和元素二

ul, div {font-size: 20px;} /* 选择ul和div标签 */

元素一和元素二中间用逗号隔开

逗号可以理解为和的意思

并集选择器同常用于集体声明

4、伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第N个元素

伪类选择器书写最大的特点是用冒号（:）表示，比如：:hover, :first

链接伪类选择器

a:link  /* 选择所有未被访问的链接*/
a:visited  /* 选择所有已被访问的链接 */
a:hover  /* 选择鼠标指针位于其上的链接 */
a:active  /* 选择活动的链接（鼠标按下未弹起的链接） */

为了确保生效，要按照上面顺序书写

因为a链接在浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式

/* a是标签选择器 */
a {
    color: gray;
}
/* :hover是链接伪类选择器，鼠标经过是变色 */
a: hover {
    color: red;
}

:focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对与表单元素来说

input:focus {
    background-color: yellow;
}

总结

选择器 作用 特征 使用情况 隔开符号及用法
后代选择器 用来选择后代元素 可以是子孙后代 较多 符号是空格 .nav a
子代选择器 选择最近一级元素 只选子代 较少 符号是大于号 .nav>p
并集选择器 选择某些相同样式的元素 可以用于集体声明 较多 符号是逗号 .nav, .header
链接伪类选择器 选择不同状态的链接 跟链接相关 较多 重点记住a {}和a:hover {}实际开发的写法
:focus选择器 选择获得光标的表单 跟表单有关 较少 input:focus 记住这个用法

九、CSS的元素显示样式

1、概念

作用：网页得标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的页面

元素的显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，一行可以有多个<span>

HTML元素一般分为块元素和行内元素两种类型

2、块元素

常见的块元素有<h1>-<h6>/<p>/<div>/<ul>/<ol>/<li>等，其中<div>标签是最典型的块元素

块级元素的特点

  1. 比较霸道，自己独占一行
  2. 高度、宽度、外边距以及内边距都可以控制
  3. 宽度默认是容器（父级宽度）的100%
  4. 是一个容器及盒子，里面可以放行内或者块元素

文字类的元素不能使用块级元素

<p>标签主要用于存放文字，因此<p>标签里面不能放块级元素，特别是不能放<div>

同理<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

3、行内元素

常见的行内元素有<a>/<strong>/<b>/<em>/<i>/<del>等，其中<span>标签是最典型的行内元素，有的地方也将行内元素称为内联元素

行内元素的特点

  1. 相邻行内元素在一行上，一行可以显示多个
  2. 高、宽直接设置是无效的
  3. 默认宽度就是它本身的宽度
  4. 行内元素只能容纳文本或其他行内元素

链接里面不能再放链接

特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块极模式最安全

4、行内块元素

在行内元素中有几个特殊标签——<img>/<input>/<td>，它们可以具有块元素和行内元素的特点

行内块元素的特点

  1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
  2. 默认宽度就是它本身内容的宽度
  3. 高度、行高、外边距以及内边距都可以控制（块级元素特点）

5、元素显示模式的转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性比如想要增加链接<a>的触发范围

  • 转换为块元素

    display: block;

    a {
    width: 30px;
    height: 30px;
    /* 把行内元素a转换为块级元素 */
    display: block;
}

  • 转换为行内元素

    display: inline;

    div {
    /* 把div块级元素转换为行内元素 */
    display: inline;
    width: 30px;
}

  • 转换为行内块

    display: inline-block;

    span {
    /* 把span转换为行内块 */
    display: inline-block;
}

6、垂直居中

盒子的高度等于行高

十、CSS背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片的位置、背景图像固定等

1、背景颜色

background-color属性定义了元素的背景颜色

div {
background-color: 颜色值;
}

一般情况下元素的背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明色

2、背景图片

background-image属性定义了元素的背景图片

div {
    /* 不要拉下url() */
    background-image: url(图片url);
}

3、背景平铺

如果需要在HTML页面对背景图片进行平铺，可以使用background-repeat属性

background-repeat: repeat|no-repeat|repeat-x|repeat-y;

repeat：平铺（默认），repeat-x：沿着X轴平铺，no-reapeat：不平铺

4、背景图片位置

利用background-position属性可以改变图片在背景中的位置

background-position: x y;
/* 如果是方位名词，right center和center right 效果是等价的 */

参数代表的位置：x坐标和y坐标。可以使用方位名词或者精确位置

精确值 说明
length 百分数|由浮点数字和单位标识符组成的长度值
position top|center|left|right 方位名词

参数是方位名词

  • 如果指定两个字都是范围名词，则两个值的位置是无关的
  • 如果只指定了一个方位名词，另一个是省略，则第二个值默认居中对齐

参数是精确单位

  • 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
  • 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中参数

参数是混合单位

  • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

5、背景图像固定

background-attachment属性设置背景图像是否固定或者随着页面的其余部分移动

用来做视觉滚动效果

background-attachment: scroll | fixed
参数 作用
scroll 背景图像随对象内容滚动
fixed 背景图像固定

6、复合型写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图像位置;

7、背景色半透明

background: rgba(255, 255, 255, 0.3);
opacity: 0.5;  /* 也可以设置背景透明度 */

最后一个参数是alpha透明度，范围是在0~1之间

我们习惯把0.3的0省略掉，写为background: rgba(0, 0, 0, .3);

背景半透明是指盒子背景半透明，盒子里面的内容不受影响

8、总结

属性 作用 值
background-color 背景颜色 预定义的颜色值/十六进制/RGB代码
background-image 背景图片 url(图片路径)
background-repeat 是否平铺 repeat/no-repeat/repeat-x/repeat-y
background-position 背景位置 length/position 分别是x和y坐标
background-attachment 背景附着 scroll（背景滚动）/fixed（背景固定）
背景简写 书写更简单 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
背景色半透明 背景色半透明 background: ragb(0, 0, 0, .3);后面必须是4个值

十一、CSS三大特性

CSS有三个非常重要的三个特性：层叠性、继承性、优先级

1、层叠性

相同选择器个设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题

层叠性原则

  • 样式冲突：遵循的原则是就近原则，哪个样式离结构近就执行哪个样式

    div {color: red}
div {color: pink}  # 就近原则

  • 样式不冲突：不会层叠

2、继承性

现实中的继承，我们继承了父亲的姓

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单理解是：子承父业

  • 恰当地使用继承可以简化代码，降低CSS样式的复杂性
  • 子元素可以继承父元素的某些样式（text-, font-, line-这些元素开头的可以继承，以及color属性）

行高的继承

div {
    font: 12px/1.5 "Microsoft YaHei";    /* 那个1.5代表字体大小的1.5倍 */
}
  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高，则会继承父元素的行高
  • 此时子元素的行高是：当前子元素的文字大小的1.5倍
  • 这样的写法的最大优势就是里面子元素可以根据自己文字大小自动调整行高

3、优先级

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

  • 选择器相同，则执行层属性

  • 选择器不同，则根据选择器的权重执行

    • 继承 / * < 元素选择器 < 类选择器 / 伪类选择器 < ID选择器 < 行内样式 < !important 重要的
    • |0, 0, 0, 0 | 0, 0, 0, 1 | 0, 0, 1, 0 | 0, 1, 0, 0 | 1, 0, 0, 0 | = 无穷大 | --> 选择器权重
    • 优先级注意点：
      • 权重是由4位数字组成，但是不会有进位
      • 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
      • 等级判断从左到右，如果是某一位数值相同，则判断下一位
      • 继承的权重是0，如果该元素没有直接被选中，不管父元素权重有多高，子元素得到的权重都是0
      • 所以我们看这个标签到底执行哪个样式，就先看这个标签有没有直接被选出来

  • 指代的范围越小，权重越大

div {
    color: red!important;  /* !important，其权重最高 */  
}

权重叠加

如果过复合选择器，则会有权重的叠加，需要计算权重

权重虽热会叠加，但是不会有进位的问题

div ul li |----->| 0, 0, 0, 3 |
.nav ul li |---->| 0, 0, 1, 2 |
a:hover |------->| 0, 0, 1, 1 |
.nav a |-------->| 0, 0, 1, 1 |

注意：a标签浏览器默认制定了一个样式 蓝色的 有下划线 a {color: blue;}

十二、页面布局

页面布局的步骤

  1. 先准备好相关的网页元素，网页元素基本都是盒子
  2. 利用CSS设置好的盒子样式，然后摆放到相应的位置
  3. 往盒子里面装内容

网页布局的核心本质：就是利用CSS摆盒子

1、盒子模型

页面布局：盒子模型、浮动 和 定位，学好盒子模型能非常好的帮助我们布局页面

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器

CSS盒子模型的本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容

组成

border边框

  • border可以设置元素的宽度。边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色

    属性 作用
    border-width 边框的粗细，一般情况下都用px
    border-style 边框的样式,/ solid实线边框 / dashed虚线边框 / dotted点线边框
    border-color 边框颜色
    复合写法 border:1px solid red; 注意没有先后顺序

    边框分开写法

    border-top: 1px solid red;  /* 只设定上边框，其余同理*/
/* 还有buttom left right */

表格的细线边框

  • border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框

    border-collapse: collapse;  /* 合并的意思 */

注意

  • 边框会增加盒子的实际大小

    1. 测量盒子大小的时候不要量边框

    2. 如果测量的时候包括了边框，则需要width/height 减去边框的宽度

content内容

content内容就是盒子的内容部分

padding内边距

padding属性用于设置内边距，即边框与内容之间的距离

属性 作用
padding-left 左边距
padding-right 右边距
padding-top 上边距
padding-bottom 下边距

复合写法

值的个数 表达意思
padding: 5px; 1个值，代表上下左右都有 5px 内边距
padding: 5px 10px; 2个值，代表上下边距是 5px ，左右边距是 10px
padding: 5px 10px 20px; 3个值，代表上内边距 5px， 左右内边距 10px， 下内边距 20px
padding: 5px 10px 20px 30px; 4个值，代表 上 右 下 左 各为 5px 10px 20px 30px，顺时针设置

注意

  • padding会影响盒子实际大小
  • 内容和边框有了距离，添加了内边距
    1. 如果要保持盒子的大小和原来的一致，则让 width/height 减去多出来的内边距大小即可
  • 如果没有给盒子指定宽度padding不会影响，则不会撑开盒子的大小
margin外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离

属性 作用
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-buttom 下外边距

margin简写方式代表的意义和padding的简写方式大概相同

外边距的典型应用

  • 外边距可以让块级盒子水平居中

    1. 盒子必须指定了宽度
    2. 盒子的左右外边距都设置为auto

    以上方法是让块级元素水平居中，行内块元素或者行内元素水平居中给父元素添加 text-align： center即可

  • 问题

    • 相邻块元素垂直外边距的合并

      • 当上下相邻的两个块元素相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则他们之间的垂直间距不是margin-bottom 与 margin-top 之和。取两个值中的较大者，这种现象被称为相邻块元素垂直外边距的合并
        • 解决方案：尽量只给一个盒子添加margin值

    • 嵌套块元素的塌陷

      • 对于两个嵌套关系的块元素，父元素有上边距，同时子元素也有上边距，此时父元素会塌陷较大的外边距
        • 解决方案
          • 可以为父元素定义一个上边框
          • 可以为父元素第一一个内边距
          • 可以为父元素添加overflow: hidden

清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距

* {
    padding: 0;
    margin: 0;   /* 使用通配符清除 
    					这也是我们CSS的第一行代码*/
}

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级元素和行内块元素就可以了

2、PS基本操作

因为网页美工大部分效果图都是利用PS来做的，所以以后我们大部分切图工作都是在PS里面完成

  • 文件 -》打开：可以打开我们要测量的图片
  • Ctrl + R：可以打开标尺，或者 视图-》标尺
  • 右击标尺，把里面的单位改为像素
  • Ctrl + 加号，可以放大视图
  • 按住空格键，鼠标可以变成小手，拖动PS视图
  • 用选区拖动，可以测量大小
  • Ctrl + D可以取消选区，或者在旁边空白处点击一下也可以取消选区

3、圆角边框**

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变成圆角了

border-radius属性用于设置元素的外边框的圆角

border-radius: 10px;  /* 添加圆角 */

radius 半径（圆的半径）原理：椭圆和边框的交集形成圆角效果

  • 参数可以是数值或百分比形式
  • 如果是正方形，想要设置为一个圆，把数值改为高度或宽度的一半即可，或者直接写为50%
  • 如果是一个矩形，设置为高度的一半可以做圆角矩形
  • 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

4、阴影

盒子阴影

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影

box-shadow: h-shadow v-shadow blur spread color inset;
值 描述
h-shadow 必需，水平阴影的位置，允许负值
v-shadow 必需，垂直阴影的位置，允许负值
blur 可选，模糊距离
spread 可选，阴影距离
color 可选，阴影颜色
inset 可选，将外部阴影（outset）改为内部阴影

注意

  • 默认的是外阴影（outset），但是不可以写这个单词，否则阴影无效
  • 盒子阴影不占用空间，不会影响其他盒子的排序

文字阴影

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本

text-shadow: h-shadow v-shadow blur color;
值 描述
h-shadow 必需，水平阴影的位置，允许负值
v-shadow 必需，垂直阴影的位置，允许负值
blur 可选，模糊距离
color 可选，阴影颜色

十三、浮动

传统网页布局的三种方式

  • 普通流（标准流）
    • 所谓标准流，就是标签按照规定好的默认方式排列
      1. 块级元素会独占一行，从上向下排序排列
      2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
  • 浮动
  • 定位

1、为什么需要

有很多的网页效果，标准流是没办法完成，此时就可以利用浮动完成页面布局，因为浮动可以改变元素标签的默认的排序方式

浮动最典型的应用：可以让多个块级元素一行内显示

网页布局第一准则：多个块级元素纵向排列找标准线，多个块级元素横向排列找浮动

2、什么是浮动

浮动属性用于创建浮动框，将其移动到一边，知道左边或右边缘触及包含块或另一个浮动框的边缘

选择器 { float: 属性值; }
属性值 描述
none 元素不浮动（默认）
left 元素向左浮动
right 元素向右浮动

3、浮动特性

  1. 浮动的元素会脱离标准流（脱标）
    • 脱离标准流的控制（浮）移动到指定位置（动）
    • 浮动的盒子不再保留原先的位置
  2. 浮动元素会一行内显示并且元素顶部对齐排列
    • 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子多出的盒子会另起一行对齐
    • 浮动元素中间是没有空隙的
  3. 浮动元素会具有行内块元素的特性
    • 任何元素都可以浮动，不管原先是什么模式的元素，添加浮动后具有行内块元素相似的特性
    • 如果行内元素有了浮动，则不需要转换成行内块元素就可以直接给高度和宽度

4、应用

浮动元素经常和标准流父级元素搭配使用

为了约束浮动元素位置，我们网页布局一般采用的策略是：

  • 先采用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则

5、注意

浮动元素和标准流的父盒子搭配

  • 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

一个元素浮动了，理论上其余的兄弟元素也要浮动

  • 一个盒子里面有多个盒子，如果其中一个盒子浮动，那么其他兄弟也应该浮动，以防止引起问题
  • 浮动的盒子只影响浮动盒子后面的标准流，不会影响前面的标准流

6、清除浮动

由于父级盒子在很多情况下，不方便设置高度，但是盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子

  • 由于浮动元素不再占有原文档流的位置，所以它会对后面的元素排版产生影响
  • 父级没有高度
  • 子盒子浮动了
  • 影响下面的布局

清除浮动的本质是清除浮动元素造成的影响

选择器 { clear: 属性值; }
属性值 描述
left 不允许左侧有浮动元素，清除左侧浮动元素的影响
right 不允许右侧有浮动元素，清除右侧浮动的影响
both 同时清除左右两侧浮动的影响（主要使用）

清除浮动方法

  1. 额外标签法，也称隔离法，是W3C推荐的做法

    额外标签法会在浮动元素末尾添加一个空标签。例如：<div style="clear: both"></div>，或者其他标签

    • 优点：通俗易懂，书写方便
    • 缺点：添加许多无意义的标签，结构比较差

  2. 父级添加overflow属性

    • 可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll
    • 注意是给父级元素添加代码
    • 优点：代码简洁
    • 缺点：无法显示溢出部分

  3. 父级添加after伪元素

    • .clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visiblity: hidden
}
.clearfix {
    *zoom: 1;  /* IE6 IE7 专有 */
}

    • 优点：没有增加标签，结构简单

    • 缺点：照顾低版本浏览器

  4. 父级添加双伪元素

    • .clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

    • 优点：代码更简洁

    • 缺点：照顾低版本浏览器

十四、PS切图

1、常见的图片格式

  1. jpg图像格式：JPEG（JPG）对色彩信息保留较好，高清、颜色较多，我们产品类的图片经常使用JPG格式
  2. gif图像格式：GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景的动画效果，实际效果经常用于一些图片小动画效果
  3. png图像格式：其是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景，如果想要切成透明背景，选择png格式
  4. psd图像格式：psd格式是PS专用格式，里面可以存放图层、通道、遮罩等多种设计稿。对我们前端人员来说，最大的优点是我们可以直接从上面复制文字，获得图片，还可以测量大小和距离

2、PS切图

图层切图

最简单的切图方式：右击图层 -> 快速导出为png

但是很多情况下，我们需要合并图层再导出

  1. 选中需要的图层：图层菜单 -> 合并图层（Ctrl + e）
  2. 右击 -> 快速导出为png

切片切图

  1. 利用切片选中图片
    • 利用切片工具手动划出
  2. 导出选中的图片
    • 文件菜单 -> 导出 -> 存储为web设备所用的格式 -> 选择我们要的格式 -> 存储

PS插件切图

Cutterman是一款运行在PS里面的插件，能够自动将需要的图层进行输出，以代替传统的手工“导出web所用格式”以及使用切片工具进行挨个切图的繁琐流程

3、页面布局整体思路

  1. 必须确定页面的版心（可视区），我们测量可知
  2. 分析页面中的行模块，以及每个行模块中的列模块，其为页面布局的第一准则
  3. 一行中的列模块经常浮动布局，先确定每个列的大小之后确定列的位置，页面布局第二准则
  4. 制作HTML结构，我们还是遵循，先有结构，后有样式的原则，结构永远最重要
  5. 所以，先理清楚页面结构，再写代码尤为重要，这需要我们多积累

头部制作

实际开发中，我们不会直接用链接a，而是用li包含链接（li + a的做法）

  • li + a 语义更加清晰，一看这就是有条理的列表型内容
  • 如果直接用a。搜索引擎容易辨别为有堆砌关键字的嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名

导航栏注意点

  • 让导航栏一行显示，给li加浮动，因为li是块元素，需要一行显示
  • 导航栏可以不给宽度，将来可以继续添加其余文字
  • 因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度

​

posted @ 2022-01-23 11:25  Kenny_LZK  阅读(36093)  评论(0)  编辑  收藏  举报