理解CSS|青训营笔记

星倦756
167 阅读7分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

走进前端技术栈-css

什么是CSS？

  • CSS 指层叠样式表 (Cascading Style Sheets)

  • 样式定义如何显示 HTML 元素

  • 样式通常存储在样式表中

  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

  • 外部样式表可以极大提高工作效率

  • 外部样式表通常存储在 CSS 文件中

  • 多个样式定义可层叠为一

    基础形式如下：

image-20230116135637353.png

CSS选择器

找出页面中的元素，以便给他们设置样式。

1、通配符选择器

如果希望所有的元素都符合某一种样式，可以使用通配符选择器． 基本语法： * {margin:0; padding:0} 可以让所有的html元素的外边距和内边距都默认为0。

2、标签选择器

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。如：

<style type="text/css">
p{
    font-size:14px;
}</style>
<body>
<p>css</p>
</body>

3、id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 选择器以 "#" 来定义。

#red {color:red;}
#green {color:green;}

4、类选择器

针对你想要的所有标签使用。优点：灵活。

css中用.来表示类。举例如下

<style type="text/css">
.oneclass/*定义类选择器*/{
    width:800px;
}
</style>
</head>
<body>
<h2 class="oneclass">你好</h2>
</body>

5、属性选择器

对带有指定属性的 HTML 元素设置样式。

注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

CSS的样式

1、字体

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。

font-family 属性定义文本的字体系列。

除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：

  • Serif 衬线字体

  • Sans-serif 无衬线字体

  • Monospace 等宽字体

  • Cursive 手写字体

  • Fantasy 字体

    font-size 属性设置文本的大小。

    有能力管理文本的大小在 web 设计领域很重要。但是，您不应当通过调整文本大小使段落看上去像标题，或者使标题看上去像段落。

    font-style 属性最常用于规定斜体文本。

    该属性有三个值：

    • normal - 文本正常显示
    • italic - 文本斜体显示
    • oblique - 文本倾斜显示

    font-weight 属性设置文本的粗细。

    使用 bold 关键字可以将文本设置为粗体。

2、CSS文本

image-20230116143935144.png

深入了解-CSS

CSS的继承

1、CSS的继承

某些属性会自动继承其父元素的计算值，除非显示指定一个值。

显示继承

*{
box-sizing:inhepit;
}
html{
box-sizing:border-box;
}
.some-widget{
box-sizing:content-box;
}

2、初始值

CSS 中，每个属性都有一个初始值

  • background-color 的初始值为 transparent
  • margin-left 的初始值为 0

可以使用 initial 关键字显式重置为初始值

  • background-color: initial

CSS框模型

布局：确定内容的大小和位置的算法，依据元素容器兄弟节点和内容等信息来计算。

盒模型：

image-20230116150509416.png

Width

  • 指定 content box 宽度
  • 取值为长度、百分数、auto
  • auto 由浏览器根据其它属性确定
  • 百分数相对于容器的 content box 宽度

Height

  • 指定 content box 高度
  • 取值为长度、百分数、auto
  • auto 取值由内容计算得来
  • 百分数相对于容器的 content box 高度
  • 容器有指定的高度时，百分数才生效

Padding

  • 指定元素四个方向的内边距
  • 百分数相对于容器的宽度

也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Border

  • 指定边框的样式、粗细和颜色
  • 元素的边框就是围绕元素内容和内边据的一条或多条线

三种属性

  • border-width
  • border-style
  • border-color。

四个方向

  • border-top
  • boder-right
  • border-bottom
  • border-left

Margin:auto

  • margin 简写属性。在一个声明中设置所有外边距属性。
  • margin-top 设置元素的上外边距
  • margin-right 设置元素的右外边距
  • margin-bottom 设置元素的下外边距
  • margin-left 设置元素的左外边距

行级和块级元素

块级元素，顾名思义，该元素呈现“块”状，所以它有自己的宽度和高度，也就是可以自定义width和height，除此之外，块级元素比较霸道，它独自占据一行高度（float浮动除外），一般可以作为其他容器使用，可容纳块级元素和行内元素。块级元素有以下特点：

  • 每个块级元素都是独自占一行。
  • 元素的高度、宽度、行高和边距都是可以设置的。　　
  • 元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%）。
<div>     //定义文档中的分区或节 
 <dl>    //定义列表 
 <dt>     //定义列表中的项目
 <form> //创建 HTML 表单 
 <h1>    //定义最大的标题
 <hr>     //创建一条水平线
 <li>     //标签定义列表项目

行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。行内元素有以下特点：

  • 每一个行内元素可以和别的行内元素共享一行，相邻的行内元素会排列在同一行里，直到一行排不下了，才会换行。
  • 行内元素的高度、宽度、行高及顶部和底部边距不可设置。
  • 元素的宽度就是它包含的文字或图片的宽度，不可改变。
<i>     //斜体文本效果
<img>     //向网页中嵌入一幅图像
<input>     //输入框

行内块级元素 inline-block 行内块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素。具体特点如下：

  • 和其他行内或行内块级元素元素放置在同一行上；
  • 元素的高度、宽度、行高以及顶和底边距都可设置。
元素类型转换display

display：block ，定义元素为块级元素

display : inline ，定义元素为行内元素

display：inline-block，定义元素为行内块级元素

总结
  • 块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。
  • 块级元素和内联块元素可以设置 width、height 属性，而内联元素设置无效。
  • 块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。

CSS Float（浮动）

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

position 属性 static 默认值，非定位元素 relative 相对自身原本位置偏移，不脱离文档流 absolute 绝对定位，相对非 static 祖先元素定位 fixed 相对于视口绝对定位

position: relative

  • 在常规流里面布局

  • 相对于自己本应该在的位置进行偏移

  • 使用 top、left、bottom、right 设置偏移长度

  • 流内其它元素当它没有偏移一样布局

image-20230116153806262.png

position: absolute

  • 脱离常规流
  • 相对于最近的非 static 祖先定位
  • 不会对流内元素布局造成影响

image-20230116153826336.png

学习总结

CSS主要是用来对页面的样式进行设计。我们可以通过运用CSS技术来设计出我们想要的页面效果，并且CSS是与HTML内容是分开的，这极大地方便了我们阅读、修改程序，也使得CSS具有一定的重复使用的特性，只需要在html文件中引入CSS文件即可，这对设计者来说十分方便的。

avatar
文章
阅读
粉丝