前端开发—— CSS基础篇
一、css的引入
行内样式（优先级最大）
内部样式
外部样式（推荐）
二、选择器
基础选择器
复合选择器
元素的显示模式
1、行内元素
概念
特点
2、块级元素
概念
特点
3、行内块元素
概念
特点
4、元素显示模式的转换
三、字体设置
1、字体大小
2、字体类型
3、字体粗细
4、字体倾斜
5、字体阴影
6、字体属性连写
7、字体颜色
8、水平对齐方式
9、行高
10、首行缩进
11、下划线
四、文本垂直居中
五、背景设置
1、背景颜色
2、背景图像
3、背景图像的平铺方式
4、背景图像的位置
5、背景图像附着
6、背景设置的简写
7、背景颜色半透明
1、概念
2、操作
六、盒子模型
border边框线
1、盒子边框线
2、边框样式
3、边框颜色
4、连写
5、注意
6、绘制表格的细线边框
内边距（padding）
1、顶部内边距
2、右侧内边距
3、底部内边距
4、左侧内边距
5、连写
6、注意
外边距（margin）
1、块级盒子水平居中
2、外边距合并
相邻块元素垂直合并
嵌套块元素垂直外边塌陷
清除网页内外边距
绘制圆角边框
画圆
阴影
1、盒子阴影
2、文字阴影
阴影
1、盒子阴影
2、文字阴影
一、css的引入
行内样式（优先级最大）
/*
格式：
<标签 style=“属性：属性值；”></标签>
*/
① 三种方式修改一个标签（内容），优先级最大的是行内，内部样式与外部样式优先级是相同的，谁在下面结 果就是谁
② 外部样式在开发中使用居多。因为它实现了结构与样式的分离；实现模块化；实现公用；减少不必要的代码
③ 外部样式中，href 是引用，src 则是下载资源到当前页面
二、选择器
基础选择器
1、标签选择器
/*
格式：
标签 {属性：属性值；}
*/
p {
color: pink;
}
1
2
3
4
5
6
7
2、（class）类选择器
/*
格式：
.名字{属性：属性值}
*/
作用：
① 减少代码量
② 方便代码的后期维护
/*
格式：
.名字{属性：属性值}
*/
/注意：这里是两个名字，以空格隔开/
/*
格式：
#名字{属性：属性值}
*/
/*
注意：
*{属性：属性值}
*/
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格隔开。当标签发生嵌套时，内层标签就成为外层标签的后代。
在这里插入图片描述
子代选择器
子代选择器又称亲儿子选择器，该选择器只能选择作为某元素的子元素的元素，也就是最近一级元素，或者说亲儿子，而不包含孙子和重孙。其写法就是把父级标签写在前面，自级标签写在后面，中间跟一个大于号(>)，注意符号左右两侧各保留一个空格。
在这里插入图片描述
并集选择器
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器，都可以作为并集选择器的一部分，若果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器来为他们定义相同的样式。其实并集选择器就是"和"的意思，只要是用逗号隔开的所有选择器都会执行后面声明的样式。
在这里插入图片描述
链接伪类选择器
其与类选择器相区别，类选择器是一个点，比如 .demo { } ，而伪类用两个点，其实就是冒号,比如 a:link { }。
作用：用于向某些选择器添加特殊效果，比如给链接添加效果
选择器 描述
E:link 设置超链接a在未被访问前的样式
E:visited 设置超链接a在其链接地址已被访问过时的样式
E:active 设置元素被用户激活（在鼠标点击与释放之间发生的事件）时的样式
E:hover 设置元素在其鼠标悬停时的样式
E:focus 设置元素在成为输入焦点（该元素的一个焦点事件发生）时的样式
元素的显示模式
在css中，根据元素显示模式的不同，可将元素分为两大类：行内元素（inline-level）和 块级元素（block-level）
1、行内元素
概念
行内元素就是不会独占一行的元素，比如、、、、、、、、等……其中标签最为典型
特点
① 自己独占一行
② 可以自定义宽、高、外边距以及内边距
③ 宽度占容器宽度的100%
④ 块级元素中可放行内元素
注意： 文字类的块级元素内不能使用块级元素
2、块级元素
概念
块级元素就是会独占一行的元素，比如
~
、
、
-
、
- 、
- 、
-
、
、
-
等……其中
标签最为典型。
-
等……其中
特点
① 相邻的行内元素会在一行显示，也就是说一行可以显示多个行内元素
② 宽、高直接设置无效
③ 它的宽度和高度会随着文本的改变而改变
④ 行内元素只能容纳文本或者其他的行内元素
**注意：**链接内不能再去放链接，特殊情况下可将转换为块级元素
3、行内块元素
概念
由于我们有时候不仅要设置元素的宽度、高度，同样也希望元素不会独占一行，那么这个时候就出现了行内块元素（inline-block），比如、、等……
特点
① 和相邻的行内元素（行内块）在一行上，但是他们之间会存在一点空隙，一行可以显示多个
② 宽度和高度会随着文本的改变而改变
③ 宽、高、外边距、内边距都是可以控制的
4、元素显示模式的转换
描述 代码
转换为块级元素 display:block;
转换为行内元素 display:inline;
转换为行内块元素 display:inline-block;
三、字体设置
1、字体大小
font-size：数值px；
/*
注意：
1、字体大小默认是16px，10px以下不起作用（谷歌默认10-12px，-webkit-text-size-adjust：none；可以解决设置10px以下的字体，先版本浏览器已经支持10px以下）
/
1
2
3
4
5
2、字体类型
font-family：字体类型；
1
3、字体粗细
font-weight：数值/名词；
/
注意：
数值：100-900之间，100-400属于正常字体
名词：400-700属于加粗（bold），700-900属于特粗（bolder）
/
1
2
3
4
5
6
4、字体倾斜
font-style：italic（倾斜）/normal（正常）
1
5、字体阴影
text-shadow：水平距离 垂直距离 模糊程度 阴影颜色；（可以有多个）
text-shadow：1px 1px 5px red，1px 1px 5px blue；
1
2
6、字体属性连写
font：font-style font-weight font-size/line-height font-family；
font：字体样式（是否倾斜）字体粗细 字体大小/行高 字体类型
/
注意：font-size（大小） 和 font-family（类型） 是必须属性
/
1
2
3
4
5
7、字体颜色
color：颜色值；
1
8、水平对齐方式
text-align：left（左）/center（中）/right（右）；
/
注意：
div、h标题会居中，但span、em、i等……不会居中
/
1
2
3
4
5
9、行高
line-height：数值；
/
注意：
1、行高是行与行之间的距离
2、当采用字体连写，不写行高默认为0，会把上面的行高覆盖
/
1
2
3
4
5
6
10、首行缩进
text-indent：数值em；
/
注意：
1em = 16px
*/
1
2
3
4
5
11、下划线
text-decoration：none（无下划线）/undefined（添加下划线）
1
四、文本垂直居中
css中没有提供文字出垂直居中的代码，那么我们该如何解决这个问题呢？
当我们让文字的行高等于盒子的高度，此时就可以完成文字在当前容器内垂直居中
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：颜色 路径 是否平铺 是否附着 位置 /
/ 在实际开发中，我们提倡这样的写法 */
1
2
3
7、背景颜色半透明
1、概念
背景颜色半透明是指：盒子（容器）背景的半透明，而盒子中内容不会受其影响。
2、操作
background：rgba(0,0,0,0.3);
/*
background:rgba(red,green,blue,alpha);
注意：alpha取值为0-1之间，但是在实际开发中我们习惯将0.3的0省略掉
*/
1
2
3
4
5
6
六、盒子模型
border边框线
1、盒子边框线
border-top:数值px；/上边框线粗细/
border-bottom:数值px；/doot下边框线粗细/
border-left：数值px；/左边框线粗细/
border-right：数值px；/右边框线粗细/
1
2
3
4
2、边框样式
border-style：soild；/实线/
border-style：dashed；/虚线/
border-style：dotted；/虚线/
1
2
3
3、边框颜色
border-color：颜色值；
1
4、连写
border：边框粗细 边框样式 边框颜色；
/注意：键值与顺序无关，可以前后颠倒，但一般都会写成这样的顺序/
1
2
5、注意
在测量边框的时候，可能测量的时候就会多测量边框的像素，所以，为了解决这样的问题，所以我们在测量盒子边框（宽和高）的时候要减去相应的边框数值，或者我们测量盒子大小的时候，尽量不去量边框
实际盒子宽 = 测量的宽 - 左边框的数值 - 右边框的数值
实际盒子高 = 测量的高 - 上边框的数值 - 下边框的数值
1
2
6、绘制表格的细线边框
dorder-collapse：collapse；
1
内边距（padding）
1、顶部内边距
padding-top：数值px；
1
2、右侧内边距
padding-right：数值px；
1
3、底部内边距
padding-bottom：数值px；
1
4、左侧内边距
padding-left：数值px；
1
5、连写
/1、一个数值：上=右=下=左/
padding：数值px；
/2、两个数值：上=下 右=左/
padding：数值px 数值px；
/3、三个数值：上 右=左 下/
padding：数值px 数值px 数值px；
/4、四个数值：上 右 下 左/
padding：数值px 数值px 数值px 数值px；
1
2
3
4
5
6
7
8
6、注意
① 在盒子都具备宽高的时候，再给一个或一对内边距，则会撑开盒子，所以此时盒子的实际大小应为：
盒子的实际宽度 = 盒子的宽 - 左/右内边距（一个或一对，这里指的是相同的大小）
盒子的实际高度 = 盒子的高 - 顶/底内边距（一个或一对，这里指的是相同的大小）
1
2
② 在盒子没有宽高的时候（有高度），此时设置内边距是不起作用的，但是块级盒子会直接平铺一行，所以我们就可以通过这一来制作导航栏。
③ 盒子内不能放文本类的标签，比如p、h等……所以在设置内边距的时候也会占满整个盒子
外边距（margin）
外边距书写格式与内边距书写格式基本类似，内边距是设置盒子与内容之间的距离，而外边距则是设置盒子与盒子之间的边距，所以写法这块是没有太大的问题。
1、块级盒子水平居中
条件：
① 盒子必须指定宽度width
② 盒子左右的外边距都设置为 auto（自适应）
写法：
margin：0 auto；
1
2、外边距合并
相邻块元素垂直合并
在一个大盒子中，有两个盒子div1和div2，他们在盒子的左侧垂直摆放，其就是标准流的布局，当div1有了一个 下外边距margin-bottom，而底div2有了一个上外边距margin-top，此时他们之间的距离不是两者之和，而是两者中数 值最大的。
解决：尽量只给一个一个盒子添加外边距margin
嵌套块元素垂直外边塌陷
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，此时我们给子元素添加外边距。则此时父元素 的外边距将会与子元素的外边距发生合并，合并后的两个盒子的外边距均为子元素的外边距。
**原因：**在设置子元素的外边距时，子元素未能找到父盒子的高度/边框线/高度，所以只能以显示器为参照物，那么此时大盒子的外边距就与子盒子的相同，且合并在一起。
解决：
① 给父盒子定义边框
② 给父盒子定义内边距
③ 给父元素添加：overflow：hidden；
清除网页内外边距
由于不同浏览器自带有默认的内外边距值，在我们制作网页的时候，往往会将这些默认的内外边距清除后才会去写自己的代码。**注意：**行内元素为了兼容性问题，不要设置上下内外边距，只设置左右内外边距；或者我们也可以转换为块级或行内块元素。
/*
清除浏览器自带的默认内外边距
- {
margin：0；
padding：0；
}
*/
1
2
3
4
5
6
7
绘制圆角边框
border-radius : 数值px； /表示：4个角都使用这个值/
border-radius : 数值px 数值px； /表示： 左上角和右下角使用第一个值，右上角和左下角使用第二个值/
border-radius : 数值px 数值px 数值px； /*表示：左上角使用第一个字，右上和左下使用第二个值，右下使用第三个值 */
border-radius : 数值px 数值px 数值px 数值px； /表示：左上角使用第一个值，右上使用第二个值，右下使用第三个值，左下使用第四个值/
/注意：取值可以使数值，也可以使百分比的形式/
1
2
3
4
5
画圆
626
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
