CSS入门学习
一、CSS简介
1、什么是css
css:层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
2、CSS的作用
CSS具有对网页的布局、颜色、背景、宽度、高度、字体进行控制，让网页按UI设计布局的更加美观漂亮。举个例子简单来说就是：我们利用HTML对房子进行了创建，而我们可以利用css对房子进行装饰。
二、基本用法
1、引入调用CSS的方式
调用css的方式基本上分为：行内式、内嵌式、外链式、导入式（导入式不常用，了解即可）
下面我通过一段代码向大家展示演示一下以上几种方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 2、内嵌式：便于本页面标签对样式进行重用 -->
<style type="text/css">
h1{
color: pink;
}
</style>
<!-- 3、外链式：便于多个html文件对css进行重用 -->
<link rel="stylesheet" type="text/css" href="test1.css"/>
<!-- 4、导入式：既可以写在内嵌中，也可以放在外链中 -->
<style type="text/css">
@import url("test.css");
</style>
<!--
外链式与导入式区别
1、link是XHTML标签：@import属于CSS范畴，只能加载CSS
2、link引用CSS时，在页面载入时间同时加载；@import需要页面网页完全载入以后加载
3、link是XHML标签，无法兼容：@import在CSS2.1提出的，低版本的浏览器是不支持（IE5以上支持）
4、link支持使用Javascript控制DOM去改变样式；而@import不支持
-->
</head>
<body>
<!-- 1、行内式 -->
<p style="background-color: #0000FF">你是一名软件开发人员</p>
<h1>大家一起来学习</h1>
<div>今天天气很不错</div>
</body>
</html>运行效果：
三、基本选择器
1、标签选择器
标签选择器使用HTML标签作为选择器的名称
2、类选择器
使用自定义的名称，以 .号作为前缀，然后再通过HTML标签的class属性调用类选择器
3、id选择器
使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配
id选择器是唯一的
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
标签选择器：选出所有同名标签
*/
p{
background-color: wheat;
}
/*
类选择器
*/
.tive{
color: red;
}
.pp{
font-size: 30px;
}
/*
id选择器
*/
#first{
font-weight: 900;
}
</style>
</head>
<body>
<p class="tive pp" id="first">段落1</p>
<p class="tive pp">段落2</p>
<p class="tive">段落3</p>
<div>
<p>段落4</p>
</div>
</body>
</html>运行效果：
四、高级选择器
1、通配符选择器
通配符*选择器它可以选择所有元素
2、并集选择器
由多个选择器通过逗号连接在一起的，这些选择器分别是：标签选择器、类选择器或id选择器等
3、后代选择器
后代选择器E F：选出父元素E的所有后代子孙元素F
代码示范：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 通配符选择器：选出所有标签 */
*{
color: pink;
}
/* 并集选择器 */
div,ul{
background-color: green;
}
active,ul{
font-weight: 900;
}
/* 后代选择器E F：选出父元素E的所有后代子孙元素F */
p a{
color: #0000FF;
}
ul a{
color:orange;
}
li a{
color: red;
}
</style>
</head>
<body>
<div class="active">段落1</div>
<div>段落2</div>
<p a href="#">百度<a></p>
<ul>
<a href="#">淘宝</a>
<li>列表</li>
<li><a href="#">新浪</a></li>
</ul>
</body>
</html>
运行效果：
五、CSS的常用属性
1、单位与颜色
单位：所有浏览器默认字体大小16px， 不设置大小em：em=16px
颜色：颜色设置有三种方式
颜色单词：yellow黄 blue蓝 black黑 red红色 white白 pink粉
rgb（0-255,0-255,0-255）
十六进制表示法：#FF0000
代码示范：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
所有浏览器默认字体大小16px
不设置大小em：em=16px
设置大小：1em=30px
*/
/* 颜色表示方式3种
颜色单词：yellow黄 blue蓝 black黑 red红色 white白 pink粉
rgb（0-255,0-255,0-255）
红 绿 蓝
rgb（255,255,255）白色
rgb（255,0,0）红色 1111 1111 0000 0000 0000 0000
F F 0 0 0 0
十六进制表示法：#FF0000
*/
#first{
width:500px;
background-color:#FD3568;
font-size: 20px;
/* 首行缩进 */
text-indent: 40px;
}
#second{
width: 500px;
background-color: pink;
font-size: 20px;
/* 首行缩进 */
text-indent: 2em;
}
</style>
</head>
<body>
<div id="first">段落1</div>
<div id="second">段落2</div>
</body>
</html>运行效果：
2、字体样式
字体的相关属性
| 属性 | 含义 | 设置说明 |
| font-size | 字体大小 | px、%、em |
| font-weight | 字体粗细 | 100-900、normal:正常、lighter：细、bold/bolder：粗/更粗 |
| font-style | 字体风格 | normal：正常、oblique：倾斜 |
| font-family | 字体类型 | times new roman、宋体、仿宋等等 |
代码示范：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
/* 字体大小 */
font-size: 40px;
/* 字体粗细：
100-900
normal：正常，默认
lighter：细
bold/bolder：粗/更粗
*/
font-weight: oblique;
/* 字体风格：
normal：正常，默认
italic是使用文字本身的斜体属性
oblique是让没有倾斜属性的文字倾斜
*/
font-style: normal;
/*
字体类型：
如果浏览器不支持第一个，会往下自动使用第二个
中文必须放在英文之后
*/
font-family: "times new roman","arial narrow","仿宋";
/*
font：如果四个属性都设置，简化写法
顺序:风格 粗细 大小 类型
*/
/* font: italic lighter 20px "times new roman","arial narrow","仿宋"; */
}
</style>
</head>
<body>
<p>welcome花果山</p>
</body>
</html>
运行效果：
3、文本样式
文本的相关属性
| 属性 | 含义 | 设置说明 |
| text-align | 水平设置 | left、center、right、 |
| line-height | 增加段落间距 | 行高和高度一致时可以使字体居中 |
| text-indent | 文本缩进 | em、px、% |
| text-decoration | 文本装饰 | underline:下划线、overline：上划线、line-through:删除线、none:去掉下划线 |
| text-transform | 大小写设置 | lowercase：小写、uppercase：大写、capitalize：首字母大写 |
| letter-spacing | 改变文字或者字母之间的间距 | |
| word-spacing | 改变英文单词之间的间距 |
代码示范：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
width: 500px;
height: 50px;
background-color: pink;
/* 字体颜色 */
color: red;
/* 水平设置：left center right */
text-align: left;
/*
设置字体居中：行高和高度一致
增加段落间距
*/
line-height: 50px;
/* 文本缩进 */
text-indent: 2em;
/* 文本装饰
underline:下划线
overline：上划线
line-through:删除线
none:去掉下划线*/
text-decoration: line-through;
/* 大小写设置
lowercase：小写
uppercase：大写
capitalize：首字母大写
*/
text-transform: capitalize;
/* 改变文字或者字母之间的间距 */
letter-spacing: 10px;
/* 改变英文单词之间的间距 */
word-spacing: 10px;
}
</style>
</head>
<body>
<p>holle孙悟空在花果山</p>
<p>holle猪八戒在高老庄</p>
</body>
</html>
运行效果：
4、vertical-align
vertical-align：常用于img、td等行内块元素，在css中常用于图片与文本的对齐
vertical-baseline：该元素的基线与父元素基线对齐
vertical-middle：该元素的中线与父元素基线对齐
vertical-top：该元素的顶线与父元素基线对齐
代码示范：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
background-color: pink;
}
/* 图片与文本对齐方式 */
img{
/*
vertical-align：常用于img、td等行内块元素
baseline：该元素的基线与父元素基线对齐
middle：该元素的中线与父元素基线对齐
top：该元素的顶线与父元素基线对齐
*/
vertical-align: middle;
}
/* 文本垂直居中 */
p{
height: 100px;
background-color: #00FFFF;
/* 无效：适用于行内块 */
/* vertical-align：middle */
line-height: 100px;
}
</style>
</head>
<body>
<div>
<img src="../imgs/核桃.png" >
<span>段落</span>
<p>段落</p>
</div>
</body>
</html>
运行效果：
5、内容溢出处理
平时我们布局时候，有的文字内容多了会超过溢出我们限制的高度，有的图片会撑破DIV，让网页错位变乱。这样我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉，又不撑破DIV布局。
overflow 属性规定当内容溢出元素框时发生的事情
overflow-x:水平方向设置
overflow-y:垂直方向设置
overflow-visible：默认
overflow- hidden：隐藏.
overflow-scroll：滚动，内容是否溢出都会显示滚动条
overflow- auto：自动识别
white-space文本不换行处理
white-space:normal：默认
white-space:nowrap：文本不换行，会自动去掉所有空格
white-space:pre：不换行，会自动保留空格
text-overflow文本溢出的显示方式
text-overflow:clip：默认
text-overflow:ellipsis：...
代码示范：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
/* 盒子太小，内容溢出
overflow-x:水平方向设置
overflow-y:垂直方向设置
visible：默认
hidden：隐藏.
scroll：滚动，内容是否溢出都会显示滚动条
auto：自动识别
*/
overflow: auto;
/* 文本不换行处理
normal：默认
nowrap：文本不换行，会自动去掉所有空格
pre：不换行，会自动保留空格
*/
white-space: nowrap;
/* 文本溢出的显示方式
clip：默认
ellipsis：...
*/
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
一闪一闪亮晶晶，一闪一闪亮晶晶，一闪一闪亮晶晶，一闪一闪亮晶晶，
一闪一闪亮晶晶，一闪一闪亮晶晶，一闪一闪亮晶晶，一闪一闪亮晶晶，
</div>
</body>
</html>
运行效果：
今天就把CSS分享到这里啦，以后还会继续分享CSS的其他内容，如果对于本篇博客你有不懂的地方，欢迎评论区下方留言或者私信我，感谢观看！