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的其他内容,如果对于本篇博客你有不懂的地方,欢迎评论区下方留言或者私信我,感谢观看!