CSS
概述
-
Cascading Style Sheet: 层叠样式表 , 作用: 美化页面
-
如何在html页面中添加样式代码(引入方式) , 总共有三种方式:
- 内联样式: 在标签的style属性中添加样式代码,不能复用
- 内部样式: 在head标签里面添加style标签,在标签体内写样式代码,仅可以在当前页面复用,不可以多页面复用
- 外部样式: 在单独的css样式文件中写样式代码, 在html页面通过link标签引入,可以实现多页面复用,并且可以将html代码和css样式代码分离开
- 三种引入方式的优先级: 内联优先级最高,内部和外部优先级一样,后执行的覆盖先执行的
选择器
- 用来选取页面中的元素
- 标签名选择器
- 格式: 标签名{样式代码}
- 选取页面中所有同名的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*通过标签名选择器给元素添加样式 */
h2{
color:blue;
}
</style>
<!-- 引入css样式文件 -->
<link rel="stylesheet" href="first.css">
</head>
<body>
<h3 style="color:red">内联样式测试</h3>
<h2>内部样式测试1</h2>
<h2>内部样式测试2</h2>
<h1>外部样式测试</h1>
</body>
</html>
-
id选择器
- 格式: #id{样式代码}
- 选取页面中对应id的元素
- 页面当中的元素要保证id是唯一的
- 当需要选择页面中的某一个元素时使用
-
类选择器
- 格式: .class{样式代码}
- 选取页面中某一类元素
- 给需要选取的元素添加相同的class属性
-
分组选择器
- 将多个选择器合并成一个选择器
- 格式: #id,.class,div{样式代码}
-
任意元素选择器
- 格式: *{样式代码}
- 选取页面中所有的元素
以上选择器的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
<!--id选择器 -->
#d2{
color:red;
}
<!--类选择器 -->
.c1{
color:yellow;
}
/*分组选择器 */
#d2,.c1{
background-color:green;
}
/*任意元素选择器 */
*{
/*边框:1px粗细solid实线样式red颜色 */
border:1px solid red;
}
</style>
</head>
<body>
<div>div1</div>
<div id="d2">div2</div>
<div class="c1">div3</div>
<span>s1</span>
<span>s2</span>
<span class="c1">s3</span>
<h3 class="c1">h3</h3>
</body>
</html>
-
属性选择器
- 格式: 标签名[属性名=‘值’]{样式代码}
- 通过元素的属性去选择元素
-
子孙后代选择器
- 格式: body div span{样式代码}
- 匹配body里面的div里面的所有span(包括后代)
-
子元素选择器
- 格式: body>div>span{样式代码}
- 匹配body里面的div里面的span子元素
-
伪类选择器
- 该选择器选中的是元素的状态(未访问/访问过/悬停/点击)
- 格式: a:visited/link/hover/active{样式代码}
以上四种选择器代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*属性选择器*/
input[type='text']{
background-color:green;
}
/*子孙后代选择器 */
/*body div div div span{
color:red;'
}*/
/*子元素选择器*/
body>div>span{
color:red;
}
body>span{
background-color:green;
}
/*访问过 */
a:visited{
color:red;
}
/*未访问过*/
a:link{
color:green;
}
/* 悬停 */
a:hover{
color:purple;
}
/* 点击 */
a:active{
color:yellow;
}
</style>
</head>
<body>
<a href="../imges/a.jpg">超链接1</a>
<a href="../imges/b.jpg">超链接2</a>
<a href="../imges/c.jpg">超链接3</a>
<a href="../imges/d.jpg">超链接4</a><br>
<span>s1</span>
<div>
<span>s2</span>
<div>
<span>s3</span>
</div>
<div>
<span>s4</span>
<div>
<span>s5</span>
</div>
</div>
</div>
<input type="text">
<input type="password">
</body>
</html>
颜色赋值
- 三原色: 红 绿 蓝 red green blue rgb 每个颜色的取值范围0-255
- 颜色单词 red
- 6位16进制 #ff0000 每两位表示一个颜色 ff=255
- 3位16进制 #f00 每一位表示一个颜色 f00=ff0000
- 3位10进制 rgb(255,0,0)
- 4位10进制 rgba(255,0,0,0-1) a=alpha 透明度 值越小越透明
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
h2{
/* color:red; */
/* color:#00ff00; */
/* color:#00f; */
/* color:rgb(0,255,0); */
color:rgba(255,0,0,0.1);
}
</style>
</head>
<body>
<h2>颜色测试</h2>
</body>
</html>
背景图片
- 设置背景图片 background-image:url(路径)
- 设置背景图片尺寸 background-size: 200px 300px;
- 禁止重复 background-repeat: no-repeat;
- 设置背景图片位置 background-position: 50% 100%;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#d1{
width:200px;
height:200px;
background-color:green;
/*设置背景图片*/
background-image:url("../imges/e.jpg");
background-size:100px 100px;/*宽高 */
/*禁止重复*/
background-repeat:no-repeat;
/*位置：横向百分比，纵向百分比*/
background-position:0% 0%;
}
#d2{
width:611px;
height:376px;
background-color:#E8E8E8;
background-image:url("https://fz.fp.ps.netease.com/file/5ee9e33b8b7427b5575abfb9LLowN8DZ02");
background-size:318px 319px;
background-repeat:no-repeat;
background-position:90% 70%;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
文本和字体相关样式
-
文本修饰
text-decoration: overline上划线/underline下划线/line-through删除线/none去掉下划线 -
对齐方式
text-align:left/right/center -
文本颜色
color:red; -
行高 可以实现垂直居中
line-height:20px; -
文本阴影
text-shadow: 颜色 x偏移值 y偏移值 浓度(值越大越模糊) -
字体大小 默认大小16px
font-size:20px; -
字体设置
font-family: xxxx,xxx,xxx,xxx;
font: 20px xxx,xxx,xxx; -
斜体
font-style:italic;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
widrh:150px;
height:50px;
border:1px solid red;
<!--文本修饰overline上划线，underline下划线，line-through删除线 -->
text-decoration:overline;
/*水平对齐方式 left,center,right*/
text-align:center;
line-height:50px;/*可以实现垂直居中 */
/*文本阴影 x偏移值 y偏移值 浓度 */
text-shadow:green -10px 10px 1px;
/*字体大小，默认为16*/
font-size:30px;
/*字体加粗*/
font-weight:bold;
color:red;
}
a{
text-decoration:none;/*none去掉下划线*/
}
h1{
font-weight:normal;/*去掉加粗 */
/*字体设置*/
/* font-family: cursive; */
/*字体大小和字体设置 */
font:10px cursive;
/*斜体 */
font-style:italic;
}
</style>
</head>
<body>
<h1>这是h1</h1>
<a href="#">超链接</a>
<div>文本测试</div>
</body>
</html>
元素显示方式display
- block: 块级元素, 独占一行,可以修改元素宽高 , 包括:h1-h6,p , div等
- inline: 行内元素, 共占一行,不能修改元素宽高, 包括:span,b,i,small,超链接等
- inline-block:行内块元素, 共占一行并且可以修改元素宽高, 包括:input, img等
- 元素默认的显示方式可以修改,常见的修改就是将行内元素的显示方式改成块级或行内块,因为行内元素不能改宽高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
img{
width:500px;
}
span{
border:1px solid red;
/*行内元素不能改宽高*/
width:100px;
height:100px;
display:inline-block;
}
div{
border:1px solid red;
width:100px;
height:100px;
}
a{
width:132px;
height:40px;
display:block;
color:white;
background-color:#0aa1ed;
text-decoration: none;
text-align:center;
line-height:40px;
font-size:20px;
border-radius: 3px;
}
</style>
</head>
<body>
<a href="#">查看详情</a>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<hr>
<span>span1</span>
<span>span2</span>
<span>span3</span>
<hr>
<img src="../imges/a.jpg">
<img src="../imges/b.jpg">
<img src="../imges/c.jpg">
</body>
</html>
盒子模型
- 盒子模型=宽高+外边距+内边距+边框 , 作用:控制元素的显示效果
- 宽高: 控制元素的显示大小
- 外边距: 控制元素的显示位置
- 内边距: 控制元素内容的位置
- 边框: 控制元素边框效果
-
盒子模型之宽高width/height
- 赋值方式:1. 像素 2. 上级元素百分比
- 行内元素不能修改宽高.
-
盒子模型之外边距margin
- 什么是外边距: 元素距上级元素或相邻兄弟元素的距离称为外边距.
- 赋值方式:
/* 单独某个方向添加外边距 */
/* margin-left: 50px;
margin-bottom: 50px;
margin-top: 50px;
margin-right: 20px; */
/* 给四个方向添加外边距 */
/* margin: 20px; */
/* 上下和左右赋值 */
/* margin: 20px 40px; */
/* 元素居中 */
/* margin: 0 auto; */
/* 上右下左赋值 顺时针*/
margin: 10px 20px 30px 40px;
```
## 查看页面元素样式
1. 在元素上面右键检查
2. 在页面中按f12出现和右键检查一样的工具, 点击拾取箭头 然后将鼠标放在元素上面点击
4887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
