前端开发——CSS基础篇

前端开发—— CSS基础篇

---

一、css的引入

行内样式（优先级最大）

/*
格式：
	<标签 style="属性：属性值；"></标签>
*/
<div style="width=200px;">123</div>

内部样式

/*
格式：
<style>
	选择器 {属性：属性值；属性：属性值}
</style>
*/
div {
    color: pink;
}

外部样式（推荐）

/*
说明：通过link引入外部css文件
格式：
	<link rel="stylesheet" href="外部css文件">
*/
<link rel="stylesheet" href="css/baidu.css">

​ 注意：

​ ① 三种方式修改一个标签（内容），优先级最大的是行内，内部样式与外部样式优先级是相同的，谁在下面结 果就是谁

​ ② 外部样式在开发中使用居多。因为它实现了结构与样式的分离；实现模块化；实现公用；减少不必要的代码

​ ③ 外部样式中，href 是引用，src 则是下载资源到当前页面

二、选择器

基础选择器

​ 1、标签选择器

/*
格式：
	标签 {属性：属性值；}
*/
p {
    color: pink;
}

​ 2、（class）类选择器

/*
格式：
	.名字{属性：属性值}
*/
<div class="nbse">123<div>
.nbse {
    color:pink;
}

​ 3、多类名选择器

​ 作用：

​ ① 减少代码量

​ ② 方便代码的后期维护

/*
格式：
	.名字{属性：属性值}
*/
/*注意：这里是两个名字，以空格隔开*/
<div class="nbse one">123<div>
.nbse {
    color:pink;
}
.one {
    width:20px;
}
/*
	注意：多类名与css的选后顺序有关系，但与html结构里面的class类名顺序没有关系
*/

​ 4、ID选择器

/*
格式：
	#名字{属性：属性值}
*/
<div id="nbse">123<div>
#nbse {
    color:pink;
}
/*
	注意：id选择器的名字是唯一的（体现在js中），而class名字可以是任意数量的
*/

​ 5、*通配符选择器

/*
注意：
	*{属性：属性值}
*/
<div>123<div>
* {
    color:pink;
}
/*
	注意：选所有的元素，一般在测试中使用
*/

复合选择器

1. 后代选择器

   ​ 后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格隔开。当标签发生嵌套时，内层标签就成为外层标签的后代。

2. 子代选择器

   ​ 子代选择器又称亲儿子选择器，该选择器只能选择作为某元素的子元素的元素，也就是最近一级元素，或者说亲儿子，而不包含孙子和重孙。其写法就是把父级标签写在前面，自级标签写在后面，中间跟一个大于号(>)，注意符号左右两侧各保留一个空格。
   

3. 并集选择器

   ​ 并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器，都可以作为并集选择器的一部分，若果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器来为他们定义相同的样式。其实并集选择器就是"和"的意思，只要是用逗号隔开的所有选择器都会执行后面声明的样式。

4. 链接伪类选择器

   ​ 其与类选择器相区别，类选择器是一个点，比如 .demo { } ，而伪类用两个点，其实就是冒号,比如 a:link { }。

   ​ 作用：用于向某些选择器添加特殊效果，比如给链接添加效果

   ​

选择器	描述
E:link	设置超链接a在未被访问前的样式
E:visited	设置超链接a在其链接地址已被访问过时的样式
E:active	设置元素被用户激活（在鼠标点击与释放之间发生的事件）时的样式
E:hover	设置元素在其鼠标悬停时的样式
E:focus	设置元素在成为输入焦点（该元素的一个焦点事件发生）时的样式

元素的显示模式

​ 在css中，根据元素显示模式的不同，可将元素分为两大类：行内元素（inline-level）和 块级元素（block-level）

1、行内元素

概念

​ 行内元素就是不会独占一行的元素，比如<span>、<b>、<u>、<ins>、<a>、<strong>、<em>、<i>、<del>等……其中<span>标签最为典型

特点

​ ① 自己独占一行

​ ② 可以自定义宽、高、外边距以及内边距

​ ③ 宽度占容器宽度的100%

​ ④ 块级元素中可放行内元素

​ 注意： 文字类的块级元素内不能使用块级元素

2、块级元素

概念

​ 块级元素就是会独占一行的元素，比如<div>、<h1>~<h6>、<p>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>等……其中<div>标签最为典型。

特点

​ ① 相邻的行内元素会在一行显示，也就是说一行可以显示多个行内元素

​ ② 宽、高直接设置无效

​ ③ 它的宽度和高度会随着文本的改变而改变

​ ④ 行内元素只能容纳文本或者其他的行内元素

​ **注意：**链接内不能再去放链接，特殊情况下可将<a>转换为块级元素

3、行内块元素

概念

​ 由于我们有时候不仅要设置元素的宽度、高度，同样也希望元素不会独占一行，那么这个时候就出现了行内块元素（inline-block），比如<img>、<input>、<td>等……

特点

​ ① 和相邻的行内元素（行内块）在一行上，但是他们之间会存在一点空隙，一行可以显示多个

​ ② 宽度和高度会随着文本的改变而改变

​ ③ 宽、高、外边距、内边距都是可以控制的

4、元素显示模式的转换

描述	代码
转换为块级元素	display:block;
转换为行内元素	display:inline;
转换为行内块元素	display:inline-block;

三、字体设置

1、字体大小

font-size：数值px；
/*
注意：
	1、字体大小默认是16px，10px以下不起作用（谷歌默认10-12px，-webkit-text-size-adjust：none；可以解决设置10px以下的字体，先版本浏览器已经支持10px以下）
*/

2、字体类型

font-family：字体类型；

3、字体粗细

font-weight：数值/名词；
/*
注意：
	数值：100-900之间，100-400属于正常字体
	名词：400-700属于加粗（bold），700-900属于特粗（bolder）
*/

4、字体倾斜

font-style：italic（倾斜）/normal（正常）

5、字体阴影

text-shadow：水平距离 垂直距离 模糊程度 阴影颜色；（可以有多个）
text-shadow：1px 1px 5px red，1px 1px 5px blue；

6、字体属性连写

font：font-style font-weight font-size/line-height font-family；
font：字体样式（是否倾斜）字体粗细 字体大小/行高 字体类型
/*
注意：font-size（大小） 和 font-family（类型） 是必须属性
*/

7、字体颜色

color：颜色值；

8、水平对齐方式

text-align：left（左）/center（中）/right（右）；
/*
注意：
	div、h标题会居中，但span、em、i等……不会居中
*/

9、行高

line-height：数值；
/*
注意：
	1、行高是行与行之间的距离
	2、当采用字体连写，不写行高默认为0，会把上面的行高覆盖
*/

10、首行缩进

text-indent：数值em；
/*
注意：
	1em = 16px
*/

11、下划线

text-decoration：none（无下划线）/undefined（添加下划线）

四、文本垂直居中

​ css中没有提供文字出垂直居中的代码，那么我们该如何解决这个问题呢？

​ 当我们让文字的行高等于盒子的高度，此时就可以完成文字在当前容器内垂直居中

<!-- html代码-->
<div id="div-a">

/* css代码 */
#div-a {
height:60px;
line-height:60px;
}

五、背景设置

1、背景颜色

background-color: 颜色值；
/* 透明的：transparent */

2、背景图像

background-image：url(路径或地址)

3、背景图像的平铺方式

说明	代码
平铺（默认）	background-repeat:：repet;
不平铺	background-repeat：no-repeat；
横向平铺	background-repeat：repeat-x；
纵向平铺	background-repeat：repeat-y；

4、背景图像的位置

background-position：x y；

​ 参数：

​ 1、方位名词

​ ① 如果指定的两个值都是方位名词，则两个值前后顺序无关

​ ② 如果只指定了一个方位名词，另一个省略，则第二个默认居中对齐

​ 2、精确单位

​ ① 如果参数精确的坐标值，那么第一个时 x 坐标，第二个时 y 坐标

​ ② 如果只指定了一个数值，那么一定时 x 坐标的值，y 坐标垂直居中

​ 3、混合单位

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

5、背景图像附着

​ background-attachment 属性设置背景图像是否固定 或者 随着页面的其余部分滚动，后期可用于制作视觉滚动效果。

描述	代码
背景图像随着对象内容滚动	background-attachment：scroll；
背景图像固定	background-attachment：fixed；

6、背景设置的简写

background：color url repeat attachment position；
/* background：颜色 路径 是否平铺 是否附着 位置 */
/* 在实际开发中，我们提倡这样的写法 */

7、背景颜色半透明

1、概念

​ 背景颜色半透明是指：盒子（容器）背景的半透明，而盒子中内容不会受其影响。

2、操作

background：rgba(0,0,0,0.3);
/*
background:rgba(red,green,blue,alpha);
注意：alpha取值为0-1之间，但是在实际开发中我们习惯将0.3的0省略掉
*/

六、盒子模型

border边框线

1、盒子边框线

border-top:数值px；/*上边框线粗细*/
border-bottom:数值px；/doot*下边框线粗细*/
border-left：数值px；/*左边框线粗细*/
border-right：数值px；/*右边框线粗细*/

2、边框样式

border-style：soild；/*实线*/
border-style：dashed；/*虚线*/
border-style：dotted；/*虚线*/

3、边框颜色

border-color：颜色值；

4、连写

border：边框粗细 边框样式 边框颜色；
/*注意：键值与顺序无关，可以前后颠倒，但一般都会写成这样的顺序*/

5、注意

​ 在测量边框的时候，可能测量的时候就会多测量边框的像素，所以，为了解决这样的问题，所以我们在测量盒子边框（宽和高）的时候要减去相应的边框数值，或者我们测量盒子大小的时候，尽量不去量边框

实际盒子宽 = 测量的宽 - 左边框的数值 - 右边框的数值
实际盒子高 = 测量的高 - 上边框的数值 - 下边框的数值

6、绘制表格的细线边框

dorder-collapse：collapse；

内边距（padding）

1、顶部内边距

padding-top：数值px；

2、右侧内边距

padding-right：数值px；

3、底部内边距

padding-bottom：数值px；

4、左侧内边距

padding-left：数值px；

5、连写

/*1、一个数值：上=右=下=左*/
padding：数值px；
/*2、两个数值：上=下 右=左*/
padding：数值px 数值px；
/*3、三个数值：上 右=左 下*/
padding：数值px 数值px 数值px；
/*4、四个数值：上 右 下 左*/
padding：数值px 数值px 数值px 数值px；

6、注意

​ ① 在盒子都具备宽高的时候，再给一个或一对内边距，则会撑开盒子，所以此时盒子的实际大小应为：

盒子的实际宽度 = 盒子的宽 - 左/右内边距（一个或一对，这里指的是相同的大小）
盒子的实际高度 = 盒子的高 - 顶/底内边距（一个或一对，这里指的是相同的大小）

​ ② 在盒子没有宽高的时候（有高度），此时设置内边距是不起作用的，但是块级盒子会直接平铺一行，所以我们就可以通过这一来制作导航栏。

​ ③ 盒子内不能放文本类的标签，比如p、h等……所以在设置内边距的时候也会占满整个盒子

外边距（margin）

​ 外边距书写格式与内边距书写格式基本类似，内边距是设置盒子与内容之间的距离，而外边距则是设置盒子与盒子之间的边距，所以写法这块是没有太大的问题。

1、块级盒子水平居中

​ 条件：

​ ① 盒子必须指定宽度width

​ ② 盒子左右的外边距都设置为 auto（自适应）

​ 写法：

margin：0 auto；

2、外边距合并

相邻块元素垂直合并

​ 在一个大盒子中，有两个盒子div1和div2，他们在盒子的左侧垂直摆放，其就是标准流的布局，当div1有了一个 下外边距margin-bottom，而底div2有了一个上外边距margin-top，此时他们之间的距离不是两者之和，而是两者中数 值最大的。

​ 解决：尽量只给一个一个盒子添加外边距margin

嵌套块元素垂直外边塌陷

​ 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，此时我们给子元素添加外边距。则此时父元素 的外边距将会与子元素的外边距发生合并，合并后的两个盒子的外边距均为子元素的外边距。

​ **原因：**在设置子元素的外边距时，子元素未能找到父盒子的高度/边框线/高度，所以只能以显示器为参照物，那么此时大盒子的外边距就与子盒子的相同，且合并在一起。

​ 解决：

​ ① 给父盒子定义边框

​ ② 给父盒子定义内边距

​ ③ 给父元素添加：overflow：hidden；

清除网页内外边距

​ 由于不同浏览器自带有默认的内外边距值，在我们制作网页的时候，往往会将这些默认的内外边距清除后才会去写自己的代码。**注意：**行内元素为了兼容性问题，不要设置上下内外边距，只设置左右内外边距；或者我们也可以转换为块级或行内块元素。

/*
清除浏览器自带的默认内外边距
* {
   margin：0；
   padding：0；
}
*/

绘制圆角边框

border-radius : 数值px；						 /*表示：4个角都使用这个值*/
border-radius : 数值px  数值px；          		 /*表示： 左上角和右下角使用第一个值，右上角和左下角使用第二个值*/
border-radius : 数值px  数值px  数值px；           /*表示：左上角使用第一个字，右上和左下使用第二个值，右下使用第三个值 */
border-radius : 数值px  数值px 数值px  数值px；    /*表示：左上角使用第一个值，右上使用第二个值，右下使用第三个值，左下使用第四个值*/
/*注意：取值可以使数值，也可以使百分比的形式*/

画圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角边框</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: orange;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

阴影

1、盒子阴影

格式：
	选择器 box-shadow：（x-offset  y-offset   blur-radius   spread-radius   color ）
			     投影方式：1、x轴偏移量 / 水平偏移量
				 		 2、y轴偏移量 / 垂直偏移量
			              3、阴影模糊半径
                           4、阴影扩展半径
                           5、阴影颜色

2、文字阴影

格式：
	选择器 text-shadow：（x-offset  y-offset  blur-radius color）
			     投影方式：1、x轴偏移量 / 水平偏移量
				 		 2、y轴偏移量 / 垂直偏移量
			              3、阴影模糊半径
                           4、阴影颜色

0px;
background-color: orange;
border-radius: 50%;
}

```

阴影

1、盒子阴影

格式：
	选择器 box-shadow：（x-offset  y-offset   blur-radius   spread-radius   color ）
			     投影方式：1、x轴偏移量 / 水平偏移量
				 		 2、y轴偏移量 / 垂直偏移量
			              3、阴影模糊半径
                           4、阴影扩展半径
                           5、阴影颜色

2、文字阴影

格式：
	选择器 text-shadow：（x-offset  y-offset  blur-radius color）
			     投影方式：1、x轴偏移量 / 水平偏移量
				 		 2、y轴偏移量 / 垂直偏移量
			              3、阴影模糊半径
                           4、阴影颜色