CSS快速上手 | 青训营

用户3090335408158
90 阅读13分钟

Cascading Style Sheets，层叠样式表。

【入门推荐】CSS入门 - 绿叶学习网 (lvyestudy.com)

【个人感觉一般】CSS - 学习 Web 开发 | MDN (mozilla.org)

【进阶推荐，界面简洁美观】CSS 教程 (w3school.com.cn)

关于课程内容，其他人总结得很好，我就不总结了。以内内容为个人自学笔记，供个人查阅使用。

一、基础部分

  • CSS注释只有 /**/ 一种方式。

1.1 引入CSS样式表

1.1.1 内部样式表

语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。

<head>  
<style>  
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}  
</style>  
</head>

1.1.2 外部样式表

将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

<head>  
  <link href="CSS文件的路径"  rel="stylesheet" />  
</head>
  • href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
  • rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

1.1.3 行内式（不推荐）

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 
	内容 
</标签名>

1.2 选择器

1.2.1 通配符选择器

*{...}

1.2.2 标签选择器（元素选择器）

/*标签名{属性:属性值;...}*/
div{...}

1.2.3 类选择器

  1. 类命名 类名命名时推荐用 - 中横线分割单词（任何需要命名的标签均可如此） <标签 class="class-name"></标签>

  2. 给标签指定多个类名，从而达到更多的选择目的 <标签 class="font20 pink"></标签>

/*.类名{属性:属性值;...}*/
.class-name{...}

1.2.4 id选择器

/*
#id{属性:属性值;...}
<div id="return-home">return home</div>
*/
#return-home{...}

1.2.5 后代选择器、子代选择器

/*祖先选择器 后代选择器{属性:属性值;...}*/
.classs-name p{...}/*匹配class-name类的后代中的p标签*/

/*祖先选择器 子代{属性:属性值;...}*/
.classs-name > p{...}/*匹配class-name类的儿子中的p标签*/

区别：后代匹配选择器匹配后代，子代选择器仅匹配直接自带，前者的范围比后者的大。

1.2.6 群组选择器

/*选择器1,选择器2,...{属性:属性值;...}*/
.class-name,#id1,p{...}

1.2.7 伪类选择器

【案例】彻底搞懂 CSS 伪类和伪元素 - 掘金 (juejin.cn)

【原理】CSS中伪类与伪元素，你弄懂了吗？ - 知乎 (zhihu.com)

==伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。==比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

a:hover{color:blue;}
div::before{content:'hello';color:red;}

1.3 层叠与继承

多条规则应用于同一个元素时，可能会发生冲突，层叠与继承理论则用于解决冲突。

1.3.1 层叠

  1. 资源顺序：优先级相同的规则，后面的规则覆盖前面的规则。

  2. 优先级：通配符选择器<元素选择器<类选择器<id选择器<群组选择器<后代/子代选择器<伪类选择器<内联样式<!important

/*!important覆盖所有规则。*/
.class-name{color:red !important;}

1.3.2 继承

  1. 一些设置在父元素上的 CSS 属性是可以被子元素继承的

  2. 控制继承：CSS 为控制继承提供了五个特殊的通用属性值，每个 CSS 属性都接收这些值。

    • inherit 设置该属性会使子元素属性和父元素相同。
    • initial 将应用于选定元素的属性值设置为该属性的初始值。
    • revert 将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。
    • revert-layer 将应用于选定元素的属性值重置为在上一个层叠层中建立的值。
    • unset 将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial 一样

  3. 重设所有值 all

这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。

.class-name{all:initial;}

二、布局

2.1 盒子模型

盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构（往往是padding）；二是理解多个盒子之间的相互关系（往往是margin）。

转存失败，建议直接上传图片文件

属性说明
content内容，可以是文本或图片
padding内边距，用于定义内容与边框之间的距离
margin外边距，用于定义当前元素与其他元素之间的距离
border边框，用于定义元素的边框
div{
	width:100px;
	height:100px;
	overflow:scroll;
	display:inline;
	
	padding-top:20px; 
	padding-right:20px; 
	padding-bottom:20px; 
	padding-left:20px;
	padding: 20px; 
	padding: 20px 20px; /*上下 左右*/
	padding: 20px 20px 20px 20px;/*上 右 下 左（顺时针）*/
	
	margin-top:20px; 
	margin-right:20px; 
	margin-bottom:20px; 
	margin-left:20px;
	margin: 20px; 
	margin: 20px 20px; /*上下 左右*/
	margin: 20px 20px 20px 20px;/*上 右 下 左（顺时针）*/
	
	border:1px solid black;
}

  • content

    • 只有块元素才可以设置width和height，行内元素是无法设置width和height的。
    • display 是否/如何显示元素。 none 隐藏元素，页面将显示为好像该元素不在其中，如 script 。 block 块级元素，如 div inline 行内元素，如 span
    • overflow 当内容过多超出width和height时，可以使用overflow属性来指定溢出处理方式。 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

  • margin 外边距指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。

2.2 浮动

【】文档流简介 - CSS | 绿叶学习网 (lvyestudy.com) 【原理】CSS 浮动 (w3school.com.cn)

元素在使用浮动后，就脱离正常的文档流了。于是块元素浮动时可能会出现遮挡效果。

div{float:left;}
.clear{clear:both;}

  • float left 元素向左浮动 right 元素向右浮动

  • clear left 清除左浮动 right 清除右浮动 both 同时清除左浮动和右浮动（常用）

  • 我们一般都是在浮动元素后面再增加一个空元素，然后为这个空元素定义clear:both来清除浮动。说白了，前面小弟干了太多坏事，后面得大哥出面才能解决。在实际开发中，凡是用了浮动之后发现有什么不对劲的地方，首先应该检查的是有没有清除浮动。 事实上，清除浮动不仅仅只有clear:both，还有overflow:hidden，以及更为常用的伪元素。当然，这些都是后话了。作为初学者，我们只需要掌握clear:both就可以了。

2.3 定位

属性值说明
fixed固定定位
relative相对定位
absolute绝对定位
static静态定位（默认值）
.class-name{
	position:fixed/relative/absolute;
	top:30px;
	left:160px;
	right:;
	bottom:;
}

  • 固定定位，指的是被固定的元素不会随着滚动条的拖动而改变位置，固定定位最常用于实现“回顶部特效”。

  • 相对定位，指的是该元素的位置是相对于它的原始位置计算而来的。

  • 绝对定位在几种定位方式中使用最为广泛，因为它能够很精确地把元素定位到任意你想要的位置。一个元素变成了绝对定位元素，这个元素就完全脱离文档流了，绝对定位元素的前面或后面的元素会认为这个元素并不存在，此时这个元素浮于其他元素上面，已经完全独立出来了。

  • 默认情况下，固定定位和绝对定位的位置是相对于浏览器而言，而相对定位的位置是相对原始位置而言。

三、样式

3.1 字体样式 font

属性说明
font-family字体类型
font-size字体大小
font-weight字体粗细
font-style字体风格
color字体颜色
.class-name{
	font-family:Arial,"宋体","微软雅黑";
	font-size:14px;
	font-weight:400;
	font-size:initial;
	font-style:initial;
	color:red;
}

  • font-family

    • 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
    • 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
    • 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
    • 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
    • 宋体英文SimSun；微软雅黑英文Microsoft YaHei。

  • font-size 现在网页中普遍使用14px+，尽量使用偶数的数字字号

  • font-weight

    • 其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。
    • 其中100相当于lighter，400相当于normal，700相当于bold，而900相当于bolder，不推荐直接使用数值。
    • 对于实际开发来说，一般我们只会用到bold这一个属性值，其他的几乎用不上，这一点大家要记住。

  • font-style normal 正常（默认值）；italic 斜体；oblique 斜体 实际开发中，font-style属性很少用得到

  • font:综合设置字体样式 选择器{font: font-style  font-weight  font-size/line-height  font-family;}

3.2 文本样式

字体样式针对的是“文字本身”的型体效果，而文本样式针对的是“整个段落”的排版效果。字体样式注重个体，文本样式注重整体。因此在CSS中，特意使用了“font”和“text”两个前缀来区分这两类样式。

属性说明
text-indent首行缩进
text-align水平对齐
text-decoration文本修饰（下划线、中划线、顶划线）
text-transform大小写转换
line-height行高
letter-spacing字母间距
word-spacing词间距
.class-name{
	font-size:14px;
	text-indent:28px;/*设置为font-size的两倍*/
	text-align:left;
	text-decoration:underline;
	text-transform:none;
	line-height:22px;
	letter-spacing:0px;
	word-spacing:0px;
}

  • text-align: left/center/right 在实际开发中，我们只会用到居中对齐（center）这一个，其他两个几乎用不上。此外，text-align属性不仅对文本有效，对图片（img元素）也有效。

  • text-decoration: none 去除所有的划线效果（默认值） underline 下划线 line-through 中划线 overline 顶划线

    • text-decoration:none; 常用于去除a标签的下划线。

  • text-transform none 无转换（默认值） uppercase 转换为大写 lowercase 转换为小写 capitalize 只将每个英文单词首字母转换为大写

    • text-transform属性是针对英文而言，因为中文不存在大小写之分。

  • line-height 一般情况下，行距比字号大7/8像素左右就可以了。

  • letter-spacing 每一个中文汉字都被当做一个“字”，而每一个英文字母也当做一个“字”。

  • word-spacing 一般来说，word-spacing只针对英文单词而言。

  • 在实际开发中，对于中文网页来说，我们很少去定义字间距以及词间距这些东西。letter-spacing和word-spacing只会用于英文网页，这两个平常我们几乎用不上，因此只需简单了解即可。

3.3 边框样式 border

属性说明
border-width边框的宽度
border-style边框的外观
border-color边框的颜色
border: 1px solid red;/*简写形式*/

/*上边框*/
border-top-width: 1px; 
border-top-style: solid; 
border-top-color: red;
border-top: 1px solid red;

/*下边框*/
border-bottom-width: 1px; 
border-bottom-style: solid; 
border-bottom-color: red;
border-bottom: 1px solid red;

/*左边框*/
border-left-width: 1px;
border-left-style: solid;
border-left-color: red;
border-left: 1px solid red;

/*右边框*/
border-right-width: 1px;
border-right-style: solid;
border-right-color: red;
border-right: 1px solid red;

border: 1px solid red; /*边框整体样式*/ 
border-bottom: 0px; /*去除下边框*/

  • border-style: none 无样式 dashed 虚线 solid 实线

    • 除了上面列出这几个，还有hidden、dotted、double等取值。不过其他取值几乎用不上，可以直接忽略。

  • border-bottom:0px; border-bottom:0; border-bottom:none; 是等价的。

3.4 列表样式

属性说明
list-style-type列表项符号
list-style-image列表项图片
list-style-type: 取值;
list-style-type:none;

list-style-image: url(图片路径);/*自定义列表项符号*/

  • list-style-type属性是针对ol或者ul元素的，而不是li元素。其中，list-style-type属性取值如下所示：

    • 通用 none 去除列表项符号
    • ol decimal 阿拉伯数字：1、2、3…（默认值） lower-roman 小写罗马数字：i、ii、iii… upper-roman 大写罗马数字：I、II、III… lower-alpha 小写英文字母：a、b、c… upper-alpha 大写英文字母：A、B、C…
    • ul disc 实心圆●（默认值） circle 空心圆○ square 正方形■

  • 我们只需要记住list-style-type:none;这一个就可以了，其他的不需要记住。因为在实际开发中，对于使用list-style-type属性来定义列表项符号，几乎用不上。所以那些属性值也不需要去记忆。

  • 一般情况下我们都不会用list-style-image属性来实现，而是使用更为高级的iconfont图标技术来实现

3.5 表格样式

属性说明
caption-side表格标题位置
border-collapse表格边框合并
border-spacing表格边框间距
table{
	caption-side:bottom;
	border-collapse:separate;
	border-spacing:1px;
}

  • caption-side属性取值只有2个 top 标题在顶部（默认值） bottom 标题在底部

  • border-collapse属性取值只有2个，可以直接用border-spacing实现此属性功能。 separate 边框分开，有空隙（默认值） collapse 边框合并，无空隙

3.6 图片样式

属性说明
width元素宽度
height元素高度
border元素边框
float文字环绕

  • 图像对齐

    • 水平对齐 text-align : left/center/right 在图像父亲元素中设置
    • 竖直对齐 vertical-align : top/middle/baseline/bottom 在图像本身设置

  • float:left/right

.container{
	text-align:center;/*控制子元素中的图像对齐*/
}

image{
	width:50px;
	border:1px solid grey;
	float:left;
	vertical-align:middle;
}

3.7 背景样式

背景样式包括两个方面：背景颜色和背景图片。定义“背景颜色”使用的是 background-color 属性，而定义“背景图片”则比较复杂，往往涉及以下属性：

属性说明
background-image定义背景图片地址
background-repeat定义背景图片重复，例如横向重复、纵向重复
background-position定义背景图片位置
background-attachment定义背景图片固定
div{
	color: red;
	background-color: #81B29A;
	background-image: url("assets/batch.png");
	background-repeat: no-repeat;
	background-position: 100px 100px;
	background-position: center bottom;
	background-attachment: fixed;
}

  • background-repeat属性取值有4个 repeat 在水平方向和垂直方向上同时平铺（默认值） repeat-x 只在水平方向（x轴）上平铺 repeat-y 只在垂直方向（y轴）上平铺 no-repeat 不平铺

  • background-position

    • background-position属性设置的两个值是相对该元素的左上角来说的
    • 当background-position属性取值为“关键字”时，也要同时设置水平方向和垂直方向的值，只不过这两个值使用关键字来代替而已。 top left 左上 top center 靠上居中 top right 右上 center left 居中靠左 center center 正中 center right 居中靠右 bottom left 左下 bottom center 靠下居中 bottom right 右下

  • 使用background-attachment属性来定义背景图片是随元素一起滚动还是固定不动。在实际开发中，background-attachment这个属性几乎用不上

3.8 超链接样式

伪类说明
a:link定义a元素未访问时的样式
a:visited定义a元素访问后的样式
a:hover定义鼠标经过a元素时的样式
a:active定义鼠标点击激活时的样式
a{text-decoration:none;} 
a:link{color:red;} 
a:visited{color:purple;} 
a:hover{color:yellow;} 
a:active{color:blue;}

3.9 鼠标样式

转存失败，建议直接上传图片文件

div{cursor:default;}
div:hover{cursor:pointer;}

body{cursor:url(),default;}

  • 在实际开发中我们一般只会用到3个：default、pointer和text。

  • 自定义鼠标样式 cursor: url(图片地址), 属性值; 属性值一般为3种：default、pointer和text。

avatar
文章
阅读
粉丝