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范畴，只能加载CSS2、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  0000F 	   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-900normal：正常，默认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>

运行效果：