CSS学习笔记

「已注销」

已于 2022-03-17 08:30:20 修改

阅读量113

点赞数 1

文章标签： css 学习 css3

于 2022-02-20 21:03:17 首次发布

本文链接：https://blog.csdn.net/m0_51889436/article/details/123035923

版权

CSS简介

CSS（Cascading Style Sheets）层叠样式表
用来定义页面元素的样式
- 设置字体颜色
- 设置位置和大小
- 添加动画效果

<!--整体叫做规则, CSS由一条条样式规则组成-->
h1 {                 <!-- h1 叫做选择器(Selector)-->
	color: white;    <!-- color 叫做属性(Property), white 是属性值(Value)-->
	font-size: 14px; <!-- 属性 + 属性值 整体叫做声明(Declaration)-->
}
<!-- PS: 这是注释格式-->

CSS使用

<!-- 外链（推荐）-->
<link rel="stylesheet" href="/assets/style.css">

<!-- 嵌入 -->
<style>
    li{
        margin: 0;
        list-style: none;
    }
</style>

<!-- 内链（不推荐）-->
<p style="margin: lem 0">Example Content</p>

CSS选择器

选择器分为基础选择器和复合选择器

基础选择器

基础选择器由单个选择器组成
基础选择器包括：标签选择器、类选择器、id选择器、通配符选择器

标签选择器

指的是用HTML标签名作为选择器

只能选择当前全部标签

类选择器

可以给一个标签指定多个类名

.类名 {
	属性：属性值;
}
<div class="head"></div>
<div class="fir sec"></div> <!--多类名，用空格分开-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .sec {
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <!-- 盒子案例 -->
    <div></div>
    <div class="sec"></div>
    <div></div>
</body>
</html>

id选择器

id有且只能有一个

#id {
	color: red;
}
<p id="col"></p>

通配符选择器

选中所有标签

* {
	属性: 值;
}
<div></div>

复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器

后代选择器

后代选择器又称为包含选择器，可以选择里面的子元素，第二个元素可以是儿子，也可以是孙子等。

元素1 元素2 {
	样式声明
}

子选择器

子元素选择器只能选择作为某元素的最近一级子元素。

元素1 > 元素2 {
	样式声明
}

并集选择器

可以选择多组标签，并设置相同样式

div,
span {
	样式声明
}

链接伪类选择器

用：号表示

Link (没有访问过的): 这是链接的默认状态，当它没有处在其他状态的时候，它可以使用***:link***伪类来应用样式。
Visited: 这个链接已经被访问过了(存在于浏览器的历史纪录), 它可以使用 ***:visited***伪类来应用样式。
Hover: 当用户的鼠标光标刚好停留在这个链接，它可以使用 ***:hover***伪类来应用样式。
Focus: 一个链接当它被选中的时候 (比如通过键盘的 Tab 移动到这个链接的时候，或者使用编程的方法来选中这个链接，它可以使用 ***:focus***伪类来应用样式。
Active: 一个链接当它被激活的时候 (比如被点击的时候)，它可以使用 ***:active***伪类来应用样式。

**书写顺序：**LVFHA

字体属性

font-family

CSS 属性 font-family 允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。

/* 一个字体族名和一个通用字体族名 */
font-family: "Gill Sans Extrabold", sans-serif;

应当至少在使用的 font-family 列表中添加一个通用的字体族名，因为无法保证用户的计算机内已经安装了指定的字体，也不能保证使用 @font-face 提供的字体移动能够正确地下载。提供通用的字体族使得浏览器可以在无法得到最佳字体的情况下使用一个相对接近的备选字体。

font-family 属性指定的是一个优先级从高到低的可选字体列表。字体的选定不是在发现用户计算机上安装的列表中的第一个字体时停止。相反，对字体的选择是逐字进行的。也就是说即使某个字符周围都在某个字体中可以显示，但该字符在当前的字体文件中没有适合的图形，那么会继续尝试列表中靠后的字体。（不过这在 Internet Explorer 6 以及之前的版本的 IE 浏览器中不适用。）当一个字体只在某些特定的 font-style (en-US)、 font-variant (en-US)、或 font-size (en-US)属性值下有效时，这些属性的值也可能对字体族 font family 的选择造成影响。

font-size

font-size 属性指定字体的大小。因为该属性的值会被用于计算em和ex长度单位，定义该值可能改变其他元素的大小。

px(像素)是最常用的单位
谷歌浏览器默认的文字大小为 16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值，不要默认大小
可以给body指定整个页面文字的大小

font-weight

font-weight属性指定了字体的粗细程度。一些字体只提供 normal 和 bold 两种值。

normal：正常粗细。与400等值。
bold：加粗。与700等值
<number> : 一个介于 1 和 1000 (包含) 之间的 `` 类型值。更大的数值代表字体重量粗于更小的数值 (或一样粗)。

font-weight: 700;

font-style

font-style CSS 属性允许你选择 font-family字体下的 italic 或 oblique 样式。

normal：选择 font-family的常规字体
italic：选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体（oblique ）替代。
oblique：选择倾斜体，如果当前字体没有可用的倾斜体版本，会选用斜体（italic ）替代（可附加一个可选的角度）

font-style: oblique 40deg;

font复合

必须包含以下值
- font-size
- font-family
可选值
- font-style
- font-weight
- font-variant
- line-height
font-style, font-variant 和 font-weight 必须在 font-size 之前
在 CSS 2.1 中 font-variant 只可以是 normal 和 small-caps
line-height 必须跟在 font-size 后面，由 “/” 分隔，例如 “16px/3”
font-family 必须最后指定

font: font-style font-weight font-size/line-height font-family;

Em 单位

用em值设定字体大小。em 值的大小是动态的。当定义或继承font-size属性时，1em等于该元素的字体大小。如果你在网页中任何地方都没有设置文字大小的话，那它将等于浏览器默认文字大小，通常是16px。所以通常1em = 16px。2em = 32px。如果你设置了body元素的字体大小为20px，那1em = 20px、2em = 40px。那个2就是当前em大小的倍数。

可用这个公式计算像素大小的等价em大小：

em = 希望得到的像素大小 / 父元素字体像素大小

例如，假设body的文字大小设为1em，且浏览器默认1em = 16px。如果你想得到12px，那你就可设定0.75em (because 12/16 = 0.75)。同样的，如果你想设定文字大小为10px，那就定义0.625em (10/16 = 0.625)；若想要22px就定义1.375em (22/16=1.375).

一个流行的技巧是设置body元素的字体大小为62.5% (即默认大小16px的62.5%)，等于10px。现在你可以通过计算基准大小10px的倍数，在任何元素上方便的使用em单位。这样有6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em

文本属性

color

单词
十六进制：以 # 开头
rgb：rgb(255, 0, 0)

text-align

text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内(不能设置上下)内容的对齐。

values：

left：行内内容向左侧边对齐
right：行内内容向右侧边对齐。
center：行内内容居中。

PS: 居中一个块元素且不居中它的行内内容的标准兼容的方法是将它的左、右margin设为auto, 例如：margin:auto; 或margin:0 auto; 或margin-left:auto; margin-right:auto;

text-decoration

text-decoration 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线或闪烁）。它是 text-decoration-line, text-decoration-color, text-decoration-style, 和新出现的 text-decoration-thickness属性的缩写。

text-decoration-line 用于设置元素中的文本的修饰类型。当要设置多个线修饰属性时，用 text-decoration 简写属性会比分别写多个属性更方便。

values：

text-decoration-line 属性可以设置为 none, 或者一个及多个用空格分隔的下列值。

none：表示没有文本修饰效果
underline：在文本的下方有一条修饰线
overline：在文本的上方有一条修饰线
line-through：有一条贯穿文本中间的修饰线

text-indent

text-indent 属性能定义一个块元素首行文本内容之前的缩进量。

text-indent: 40px;

line-height

line-height 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

values：

<数字>：该属性的应用值是这个无单位数字<数字>乘以该元素的字体大小。计算值与指定值相同。大多数情况下，这是设置line-height的推荐方法，不会在继承时产生不确定的结果。

Emmet 语法

快速生成HTML结构语法

多个相同标签：*
父子级标签：>
兄弟级标签：+
带有类名或者id：.demo 或者 #two
生成的类名是有顺序的：$ 自增符号
在生成标签内写上内容：{ }

元素显示模式

块元素

常见块元素有 <h1> ~ <h6>、<p> 、<div> 、<ul> 、<ol> 、<li>等

独占一行
高度、宽度、内外边距都可以控制
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内元素或者块元素
文字类的元素内不能再使用块级元素，例如 <p>、<h1>等

行内元素

常见行内元素有：<a>、<span>等

相邻的行内元素在一行上显示
高、宽直接设置无效
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素
特殊情况 a标签里面可以放块级元素

行内块元素

例如：<img> 、<input>、<td>

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

元素显示模式转换

转换为块级元素
display: block;

转换为行内元素
display: inline;

转换为行内块元素
display: inline-block;

背景

background-color
background-image
background-repeat
background-position
background-attachment
background：rgba

复合写法：background：颜色图片地址平铺图片滚动图片位置（不强制顺序）

层叠性

样式冲突时，就近原则
不冲突时不会层叠

继承性

子元素可以继承父元素的样式（text- 、 font- 、 line- 、这些元素开头的可以继承，以及 color 属性）

行高的继承

font ：15px/1.5 （指的是当前文字大小的1.5倍）

优先级

选择器	选择器权重
继承或者 *	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!important	无穷大

盒子模型

边框

border-width: 10px;
border-style: solid;
border-color: aqua;

复合写法：
border： 1px solid red;（没有强制顺序）

边框也可以分开写：
border-top
border-bottom


表格合并：
border-collapse

边框会额外增加盒子宽度

内边距

pedding-left
pedding-top
....

复合写法：
padding: 1px     ························上下左右
padding:1px 2px  ························上下 1px，左右 2px
padding:1px 2px 3px    ··················上 1px，左右 2px，下3px
padding:1px 2px 3px 4px   ···············上右下左依次

padding会额外增加盒子大小

解决方法：width / height减去多出来的内边距大小

「已注销」

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记

CSS简介CSS（Cascading Style Sheets）层叠样式表用来定义页面元素的样式设置字体颜色设置位置和大小添加动画效果h1 {  color: white;  font-size: 14px;
复制链接

扫一扫