2-CSS3基础、选择器、文本与字体属性、盒模型

最新推荐文章于 2023-10-26 09:25:38 发布

dongdongyayaya

最新推荐文章于 2023-10-26 09:25:38 发布

阅读量232

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/dongdongyasqs/article/details/116532306

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS3的基础知识，包括CSS的作用、前端三层结构、样式表的书写位置以及基本语法。重点讲解了CSS选择器，如标签选择器、ID选择器、类选择器、伪类和伪元素的用法。此外，还涵盖了文本属性、盒模型、display属性和继承性等内容。难点包括选择器权重计算和盒模型的计算。

摘要由CSDN通过智能技术生成

一、CSS3基础

1、CSS

CSS( cascading style sheet，层叠式样式表）是用来给HTML标签添加样式的语言。

2、前端三层

	语言	功能
结构层	HTML	搭建结构、放置部件、描述语义
样式层	CSS	美化页面、实现布局
行为层	JavaScript	实现交互效果、数据收发、表单验证等

3、CSS本质

CSS就是样式的“清单”，要书写合适的选择器，然后把指定元素的样式“一条一条罗列”出来。

4、书写位置

内嵌式：在学习CSS时，最常使用内嵌式，顾名思义，内嵌在.html文件中。

在<head> </head>标签对中，书写<style> </style>标签对,里面书写CSS语句。

外链式：可以将CSS单独存为.css文件，然后使用<link>标签引入它。
<link rel="stylesheet" href="css/css.css">
rel：关系。stylesheet：样式表。href：路径和文件名。
外链式的优点:多个html网页，可以共用一个css样式表文件

导入式：导入式是最不常见的样式表导入方法

<style>
@import url( css / css.css);
</ style>

使用导入式引入的样式表，不会等待css文件加载完毕，而是会立即渲染HTML结构，所以页面会有几秒中的“素面朝天”的时间。

行内式：样式可以直接通过style属性写在标签身上。

'<h2 style="color: red; ">我是一个二级标题</h2>'

行内式牺牲了样式表的批量设置样式的能力，只能给一个标签设置样式，所以不常用。

5、基本语法

h1 {
	color:green;
	font-weight:bold;
	font-style:italic;
}

h1:选择器；

6、课程重点

1、CSS中文全称是什么?最新版本是?功能是?

2、前端分为哪几层?功能分别是什么?

3、样式表的书写位置有哪些﹖我们常用哪些?

7、课程难点

1、CSS的语法要练熟，不要犯一些低级错误

2、背诵记忆CSS属性是重中之重

二、CSS3选择器

1、标签选择器

标签选择器也称元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有该种标签。

span{
      /* 选择所有的span */
      color: red;
    }

标签选择器“覆盖面”非常大，所以通常用于标签的初始化。

ul{

   /* 去掉小圆点 */

   list-style: none;

  }

2、id选择器

id属性：标签可以有id属性，是这个标签的唯一标识。同一个页面上不能有相同id的标签。

id的名称只能由字母、数字、下划线、短横构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母。

<p id="para1">我是段落</p>

CSS选择器可以使用井号#前缀，选择指定id的标签。

#para1{

   color: red;

  }

3、class选择器

class属性表示“类名”。类名的命名规范和id的命名规范相同。

'<p class="warning">我是段落</p>'

使用点.前缀选择指定class的标签。

多个标签可以为相同类名。

同一个标签可以同时属于多个类，类名用空格隔开。

.wraning{

   color: red;

  }
<p class="wraning">我是段落</p>
<p class="wraning spec">我是段落</p>

4、原子类

在做网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类。

.fs12{
      font-size: 12px;
    }
    .fs14{
      font-size: 14px;
    }
    .fs16{
      font-size: 16px;
    }

5、复合选择器

选择器名称	示例	示例的意义
后代选择器	.box .spec	选择类名为box的标签内部的类名为spec的标签
交集选择器	li.spec	选择既是li标签，也属于spec类的标签
并集选择器	ul,ol	选择所有ul和ol标签

后代选择器：CSS选择器中，使用空格表示“后代”。

“后代”并不一定是“儿子”。后代选择器可以有很多空格，隔开好几代。

.box .spec em{
      color: red;
    }
<div class="box">
        <p class="spec">我是段落<em>强调文字</em></p>

交集选择器：选择有.spec类的h3标签，此时应该使用交集选择器。

h3.spec{

   font-style: italic;

  }

并集选择器：并集选择器也叫作分组选择器，逗号表示分组。

ul,ol{

   list-style: none;

  }

6、伪类

伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊状态。

`伪类`	意义
`a:link`	没有被访问的超级链接
`a:visited`	已经被访问过的超级链接
`a:hover`	正被鼠标悬停的超级链接
`a:active`	正被激活的超级链接(按下按键但是还没有松开按键)

“爱恨准则”
a标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效。
LOVE HATE
: link --> :visited --> :hover --> : active

7、元素关系选择器

名称	举例	意义
子选择器	div>p	div的子标签p
相邻兄弟选择器	img+p	图片后面紧跟着的段落将被选中
通用兄弟选择器	p~span	p元素之后的所有同层级span元素

子选择器
当使用>符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系。从IE7开始兼容。

.box>p{

}

注：后代选择器不一定限制是子元素。

.box p{

}

相邻兄弟选择器

相邻兄弟选择器(+)介于两个选择器之间,当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。说白了, a+b就是选择“紧跟在a后面的一个b"。从IE7开始兼容。

img+span{
      color: green;
    }
<p>
    <img src="images/bj/0.jpg" alt="">
    <span>这是北京故宫</span><!-- 将被选择 -->
    <span>这是北京故宫</span>
  </p>
  <p>
    <img src="images/bj/1.jpg" alt="">
    <span>这是北京鸟巢</span><!-- 将被选择 -->
  </p>
  <span>你好</span>
  <span>你好</span>

通用兄弟选择器
通用兄弟选择器(~ ) , a~b选择a元素之后所有同层级b元素。从IE7开始兼容。

h3~span{
      font-style: italic;
    }
<span>我是后面的span</span>
  <h3>我是一个三级标题</h3>
  <span>我是后面的span</span><!-- 将被选择 -->
  <span>我是后面的span</span><!-- 将被选择 -->
  <span>我是后面的span</span><!-- 将被选择 -->
  <span>我是后面的span</span><!-- 将被选择 -->
  <p>我是一个段落</p>
  <span>我是后面的span</span><!-- 将被选择 -->
  <span>我是后面的span</span><!-- 将被选择 -->
  <div>
    <span>多了一个级别的span</span>
    <span>多了一个级别的span</span>
  </div>

8、序号选择器

举例	意义
:firts-child	第一个子元素
:last-child	最后一个子元素
:nth-child(3)	第3个子元素
:nth-of-type(3)	第3个某类型子元素
:nth-last-child(3)	倒数第3个子元素
:nth-last-of-type(3)	倒数第3个某类型子元素

:first-child表示“选择第一个子元素”，比如下面的例子就表示选择.box1盒子中第一个p。

.box1 p:first-child{ /*注意p*/
      color: red;
    }
<div class="box1">
    <p>1</p> <!--将被选择-->
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>

:last-child表示“选择最后一个子元素”，比如下面的例子就表示选择.box1盒子中最后一个p。

.box1 p:last-child{

   color: blue;

  }

:nth-child()可以选择任意序号的子元素。

.box2 p:nth-child(3){

   color: green;

  }
<div class="box2">
    <p>1</p>
    <p>2</p>
    <p>3</p><!-- 将被选择 -->
    <p>4</p>
</div>

:nth-child()可以写成an + b的形式，表示从b开始每a个选一个，注意不能写为b + an。

2n+1等价于odd，表示奇数。

.box3 p:nth-child(2n+1){

   color: orange;

  }
等价于
.box3 p:nth-child(odd){

   color: orange;

  }

2n等价于even，表示偶数。

.box3 p:nth-child(2n+1){

   color: orange;

  }
等价于
.box3 p:nth-child(even){

   color: orange;

  }

:nth-of-type()将选择同种标签指定序号的子元素。

.box4 p:nth-of-type(3){

   color: blue;

  }
  <div class="box4">
     <p>我是1号p</p>
     <p>我是2号p</p>
     <h3>我是1号h3</h3>
     <h3>我是2号h3</h3>
     <p>我是3号p</p><!-- 将被选择 -->
     <p>我是4号p</p>
     <h3>我是3号h3</h3>
     <h3>我是4号h3</h3>
  </div>

:nth-last-child()和:nth-last-of-type()都是倒数选择。

.box5 p:nth-last-child(2){

   color: red;

  }
<div class="box5">
     <p>我是1号p</p>
     <p>我是2号p</p>
     <p>我是3号p</p><!-- 将被选择 -->
     <p>我是4号p</p>
</div>

9、属性选择器（实际用很少，了解即可）

举例	意义
img[alt]	选择有alt属性的img标签
img[alt=“故宫”]	选择alt属性是故宫的img标签
img[alt^=“北京”]	选择alt属性以北京开头的img标签
img[alt$=“夜景”]	选择alt属性以夜景结尾的img标签
img[alt*=“美"]	选择有alt属性中含有美字的img标签
img[ alt~=“手机拍摄”]	选择有alt属性中有空格隔开的手机拍摄字样的img标签
img[alt\|=“参赛作品”]	选择有alt属性以“参赛作用-”开头的img标签

注：

[alt] 有这个属性
[alt = “北京故宫”] 精确匹配
[alt ^= “abc”] 开头匹配
[alt $= “abc”] 结尾匹配
[alt *= “abc”] 任意位置匹配
[alt |= “abc”] abc-开头
[alt ~= “abc”] abc为空格分开的独立部分，左右都需要分开

注：简写：书写width、height、border时，只需要打w200键入enter，其他依次类推，就可以了。

10、CSS3新增伪类

伪类	意义
:empty	选择空标签
:focus	选择当前获得焦点的表单元素
:enabled	选择当前有效的表单元素
:disabled	选择当前无效的表单元素
:checked	选择当前已经勾选的单选按钮或者复选框
:root	选择根元素，即标签

11、伪元素

CSS3新增了“伪元素”特性，顾名思义，表示虚拟动态创建的元素。伪元素用双冒号表示，IE8可以兼容单冒号。

伪元素	意义
::before	其将成为匹配选中的元素的第一个子元素，必须设置content属性表示其中的内容
::after	其将成为匹配选中的元素的最后一个子元素，必须设置content属性表示其中的内容
::selection	应用于文档中被用户高亮的部分(使用鼠标圈选的部分)
::first-letter	选中某元素中（必须是块级元素）第一行的第一个字母
::first-line	选中某元素中（必须是块级元素)第一行全部文字

a::before {
      content: '☆';
    }
    a::after {
      content: '❤';
    }
    .box1 {
      width: 400px;
      height: 300px;
      border: 1px solid #000;
    }
    .box1::selection {
      background-color: springgreen;
      color: deeppink;
    }
    .box1::first-letter {
      font-size: 50px;
    }
    .box1::first-line {
      text-decoration: underline;
    }

12、层叠性和选择器权重计算

层叠性:多个选择器可以同时作用于同一个标签，效果叠加。

层叠性的冲突处理：id权重> class权重>标签权重。

复杂选择器权重计算：复杂选择器可以通过( id的个数，,class的个数,标签的个数)的形式，计算权重。

!important提升权重：如果我们需要将某个选择器的某条属性提升权重，可以在属性后面写!important。（慎用）

/* 权重（2,0,1） */
    #box1 #box2 p {
      color: red;
    }

    /* 权重（2,1,2） */
    #box1 div.box2 #box3 p {
      color: green;
    }

    /* 权重（0,3,1） */
    .box1 .box2 .box3 p {
      color: blue;
    }

    /* 权重（0,1,1） */
    .list li {
      color: red;
    }

    /* 权重（0,1,0） */
    .spec {
      color: blue;
    }

<div id="box1" class="box1">
    <div id="box2" class="box2">
      <div id="box3" class="box3">
        <p>我是段落</p>
      </div>
    </div> 
  </div>

  <ul class="list">
    <li>列表项</li>
    <li class="spec">列表项</li>
    <li class="spec">列表项</li>
    <li>列表项</li>
  </ul>

13、重点内容

1、CSS选择器有哪些？请按CSS2.1和CSS3分别回答
2、类名的使用很灵活，它有哪些用法?
3、什么是伪类?什么是伪元素?

14.难点内容

选择器权重计算（面试常考）

三、文本与字体属性

1、常用文本样式属性

color属性：color属性可设置文本内容的前景色。

color属性主要可以用英语单词、十六进制、rgb()、 rgba()等表示法.

color属性–十六进制表示法:十六进制表示法是所有设计软件中都通用的颜色表示法，设计师给我们的设计图上面标注的颜色，通常为十六进制表示：color:#ff0000。
比如十六进制ff就是十进制的255，每种颜色分量都是0~255的数字。
如果颜色值是#aabbcc的形式，可以简写为#abc。

黑色是#000，白色是#fff，常见的灰色有#ccc、 #333、#2f2f2f等。

color属性- rgb()表示法：颜色也可以用rgb()表示法。
例：color: rgb(255，o， 0);

color属性- rgba()表示法：颜色也可以用rgba()表示法，最后一个参数表示透明度，介于e到1之间，0表示纯透明，1表示纯实心。
例：color: rgba(255，0，0，.65)。

font-size属性：font-size属性用来设置字号，单位通常为px。今后课程上老师还会介绍em、rem单位。例：font-size: 30px。
网页文字正文字号通常是16px，浏览器最小支持10px字号。

font-weight属性：font-weight属性设置字体的粗细程度，通常就用normal和bold两个值。

示例	意义
`font-weight: normal;`	正常粗细，与400等值
`font-weight: bold;`	加粗，与700等值
`font-weight: lighter;`	更细，大多数中文字体不支持
`font-weight: bolder;`	更粗，大多数中文字体不支持

font-style属性:font-style属性设置字体的倾斜。

示例	意义
`font-weight: normal;`	取消倾斜，比如可以把天生倾斜的i、em等标签设置为不倾斜
`font-weight: italic;`	设置为倾斜字体（常用)

text-decoration属性:text-decoration属性用于设置文本的修饰线外观的（下划线、删除线)

示例	意义
text-decoration: none;	没有修饰线
text-decoration: underline;	下划线
text-decoration: line-through;	删除线

2、字体属性详解

font-family属性：用于设置字体。例：font-family:“微软雅黑”。
字体可以是列表形式，一般英语字体放到前面,后面的字体是前面的字体的“后备”字体。
font-family: serif，“Times New Roman”，“微软雅黑”。
注：字体名称中有空格，必须用引号包裹。

中文字体也可以称呼它们的英语名字：

中文字体名	等价的英语字体名
font-family:“微软雅黑"	font-family: “Microsoft Yahei”
font-family:“宋体”	font-family: “SimSun”

字体通常必须是用户计算机中已经安装好的字体，所以一般来说设置为微软雅黑和宋体较多，设置成其他字体较少。

3、段落和行相关属性

text-indent属性：定义首行文本内容之前的缩进量，缩进两个字符。应该写作：text-indent: 2em;
em表示字符宽度。

line-height属性用于定义行高。

line-heigh属性的单位可以是以px为单位的数值：line-height: 30px;
line-heigh属性也可以是没有单位的数值，表示字号的倍数，这是最推荐的写法：line-height: 1.5;
line-heigh属性也可以是百分数，表示字号的倍数：line-height: 150%;

单行文本垂直居中：设置行高=盒子高度，即可实现单行文本垂直居中。
设置text-align: center，即可实现文本水平居中

font合写属性：font属性可以用来作为font-style, font-weight,font-size，line-height和font-family属性的合写.
font: 20px/1.5 Arial，“微软雅黑”;
20px/1.5表示字号/行高，Arial，"微软雅黑"表示字体。

4、继承性

文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有标签中生效。

color
font-开头的
list-开头的
text-开头的
line-开头的

因为文字相关属性有继承性，所以通常会设置body标签的字号、颜色、行高等，这样就能当做整个网页的默认样式了。

就近原则：在继承的情况下，选择器权重计算失效，而是“就近原则”。

/* 就近原则，谁描述的近，听谁的 */

  #box1 #box2 {

   color: red;

  }

  .box1 .box3 {

   color: blue;

  }/*为蓝色*/

/* (3,0,0) 注意继承的选择器，权重可以看做是0，权重没有选中的大 */

  /* #box1 #box2 #box3 {

   color: red;

  }

  p {

   color: green;

  } */
/*为绿色，p被选中了*/

5、课程重点

1、背诵属性:文字颜色、字体、倾斜、加粗和下划线

2、什么是行高?如何制作单行文本垂直居中?

3、如何使用font属性快速设置加粗、字号、行高、字体?

6、课程难点

什么是继承性?哪些属性有继承性?什么是就近原则?

四、盒模型

1、盒模型

所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型”。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qfAsaUqp-1620462091889)(C:/Users/dell/AppData/Roaming/Typora/typora-user-images/image-20210506223056462.png)]

width、height不是盒子总宽高。

盒子的总宽度= width +左右padding +左右border。

盒子的总高度= height + 上下padding +上下border。

2、width和height属性

width属性：width属性表示盒子内容的宽度。
width属性的单位通常是px，移动端开发也会涉及百分数、rem等单位。
当块级元素(div、h系列、li等)没有设置width属性时，它将自动撑满，但这并不意味着width可以继承。

height属性：height属性表示盒子内容的高度。
height属性的单位通常是px，移动端开发也会涉及百分数、rem等单位。
盒子的height属性如果不设置，它将自动被其内容撑开，如果没有内容，则height默认是0。

3、padding属性详解

padding是盒子的内边距，即盒子边框内壁到文字的距离。

padding是四个方向的，四个方向的padding，可以分别用小属性进行设置。

小属性	意义
padding-top	上padding
padding-right	右padding
padding-bottom	下padding
padding-left	左padding

padding的四数值写法：
padding属性如果用四个数值以空格隔开进行设置,分别表示上、右、下、左的padding。

padding:	10px	20px	30px	40px
	上	右	下	左

padding的三数值写法：
padding属性如果用三个数值以空格隔开进行设置,分别表示上、左右、下的padding。

padding:	10px	20px	30px
	上	左右	下

padding的二数值写法：
padding属性如果用二个数值以空格隔开进行设置,分别表示上下、左右的padding。

padding:	10px	20px
	上下	左右

4、margin属性详解

margin是盒子的外边距，即盒子和其他盒子之间的距离。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FGis0pmF-1620462091891)(C:/Users/dell/AppData/Roaming/Typora/typora-user-images/image-20210507000150157.png)]

margin也有四个方向：

小属性	意义
margin-top	上margin，“向上踹”
margin-right	右margin，“向右踹”
margin-bottom	下margin，“向下踹”
margin-left	左margin，“向左踹”

margin的塌陷：竖直方向的margin有塌陷现象:小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准。

一些元素（比如body、ul、p等）都有默认的margin，在开始制作网页的时候，要将他们清除。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v60gIMwa-1620462091892)(C:/Users/dell/AppData/Roaming/Typora/typora-user-images/image-20210507000507916.png)]

盒子的水平居中：将盒子左右两边的margin都设置为auto，盒子将水平居中

文本居中是text-align: center;和盒子水平居中是两个概念
盒子的垂直居中，需要使用绝对定位技术实现

.box {
	margin: 0 auto; /*上下是o，左右自动*/
}

文本居中是text-align: center;和盒子水平居中是两个概念
盒子的垂直居中，需要使用绝对定位技术实现。

注：/* 行高等于盒子高，让文字垂直居中 */

5、盒模型计算

* {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 400px;
      height: 300px;
      border: 6px solid blue;
      margin: 40px auto;
    }
    .box .c1 {
      /* 老大实际占有的宽度是400px，实际占有的高度时200px，并且向下踹20px */
      /* 它只给老二留下了80px */
      width: 388px;
      height: 188px;
      border: 6px solid green;
      margin-bottom: 20px;
    }
    .box .c2 {
      /* 老二还剩下400px宽度，80px高度的总空间 */
      width: 388px;
      height: 48px;
      padding: 10px 0;
      border: 6px solid orange;
    }

<div class="box">
    <div class="c1">1</div>
    <div class="c2">2</div>
  </div>

6、box-sizing属性

将盒子添加了box-sizing: border-box;之后，盒子的width，height数字就表示盒子实际占有的宽高(不含margin)了，即padding、border变为“内缩”的，不再“外扩”。

.box {
      box-sizing: border-box;
      width: 200px;
      height: 200px;
      border: 10px solid #000;
      padding: 10px;
    }

注：box-sizing属性大量应用于移动网页制作中，因为它结合百分比布局、弹性布局等非常好用，在PC页面开发中使用较少。

7、display属性

行内元素和块级元素

display属性类型	是否能并排显示	是否能设置宽高	当不设置width属性时	举例
块级元素	否	是	width自动撑满	div,section,header,h系列,li,ul等
行内元素	是	否	width自动收缩	a,span,em,b,u,i等

行内块
img和表单元素是特殊的行内块，它们既能够设置宽度高度，也能够并排显示。

行内元素和块级元素的相互转换

使用display: block;即可将元素转为块级元素。
使用display : inline;即可将元素转为行内元素，将元素转为行内元素的应用不多见。
使用display : inline-block;即可将元素转为行内块。

元素的隐藏

使用display: none;可以将元素隐藏,元素将彻底放弃位置,如同没有写它的标签一样。
使用visibility: hidden;可以也可以将元素隐藏，但是元素不放弃自己的位置。

8、课程重点

什么是width和height ?它们是元素的实际大小么?

元素实际大小和元素空间尺寸分别指什么?

box-sizing属性的作用是什么?

margin的塌陷

用四个数值、三个数值、两个数值描述padding和margin

实现盒子居中

9、课程难点

盒模型的计算，尤其是父子盒模型的计算

行内元素和块级元素的相互转换

dongdongyayaya

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2-CSS3基础、选择器、文本与字体属性、盒模型

一、CSS3基础1、CSSCSS( cascading style sheet，层叠式样式表）是用来给HTML标签添加样式的语言。2、前端三层语言功能结构层HTML搭建结构、放置部件、描述语义样式层CSS美化页面、实现布局行为层JavaScript实现交互效果、数据收发、表单验证等3、CSS本质CSS就是样式的“清单”，要书写合适的选择器，然后把指定元素的样式“一条一条罗列”出来。4、书写位置内嵌式：在学习CSS时，最常使用内嵌式，顾名思义，
复制链接

扫一扫

专栏目录