web前端css内容
一、css基础
1. 什么是CSS(样式表)
CSS(Cascading Style Sheets) - 层叠样式表
CSS是web标准中的表现标准,主要用来设置网页内容的样式和布局(给标签化妆)
2.CSS代码写在哪儿
位置 | 方法 |
---|---|
内联样式表 | 将样式表(css代码)写在标签的style属性中(样式只能作用于一个标签) |
内部样式表 | 将样式表写在style标签中(样式只能作用于当前html文件中的所有标签) |
外部样式表 | 将样式表写在外部的css文件中,然后在html文件中用link导入(样式可作用域所有的html中所有的标签) |
优先级: 内联样式表 > 内部样式表、外部样式表(谁后写谁的优先级高)
3.CSS怎么写
语法:
选择器{属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;…}
说明:
1)选择器 - 选择器是用来选中当前需要设置样式的标签。(写内联样式表 ‘选择器{}’ 需要省略)
2)属性 - 以属性名:属性值 的形式存在,多个属性之间必须用 ; 隔开
a.常用属性: color(文字颜色);background-color(背景颜色); font-size(文字大小); width(宽度);height(设置高度)
b.常用的值: A.数字(数字如果是用来表示,那么值后面必须加单位:px) 100px 100%
B.颜色:颜色的英文单词,例如:red, green, yellow、pink
rgb值(通过调节红色、绿色和蓝色的值来调出不同的颜色,值的范围是0~255)
gb(red, green, blue) rgb(255, 0, 0) rgb(0, 255, 0)
rgb(255,255,255) rgb(0,0,0) rgb(200,100, 45)
rgba(red, green, blue, 透明度), 透明度的取值范围是0~1 rgba(255,0,0,1)
16进制颜色值:#6位的16进制数 #ff0000
#00ff00 #ffffff
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.内联样式表 -->
<h1 style="background-color: #ffff00;">内联样式表</h1>
<p style="color: green;">内联样式表</p>
<!-- 3.外部样式表 -->
<div id="div1">
</div>
<link rel="stylesheet" type="text/css" href="css/06-css基础.css"/>
<!-- 2.内部样式表 -->
<a id="a1" href="">刷新</a>
<style type="text/css">
/* 这儿写的css代码 */
#a1 {
color: darkmagenta;
font-size: 30px;
}
h1{
width: 200px;
color: green;
}
</style>
</body>
</html>
二、选择器
选择器是用来选中指定标签来添加样式
常用的选择器:
1.id选择器:
在标签的id属性值前加#作为一个选择器,选中id属性是指定值的标签。(注意:同一个id值在当前页面中只有一个标签)
#p1{} - 选中id是p1的标签
2.类选择器:
在标签的class属性值前加.作为一个选择器,选中class属性是指定值的标签。
.c1{} - 选中class是c1的所有的标签
注意:同一个class可以作用于不同的标签,同一个标签可以同时拥有多个class值(有多个的时候中间用空格隔开)
3.元素选择器:
直接将标签名作为选择器,选中当前页面中所有指定的标签
p{} - 选中所有的p标签
div{} - 选中所有的div标签
4.通配符:
将 * 作为选择器, 选中当前页面中的所有的标签
5.群组选择器:
将多个其他的选择器用逗号隔开作为一个选择器,选中每个独立的选择器选中所有的标签
p,.c1,#p1{} - 选中所有的p标签和class是c1标签,以及id是p1的标签
a,img{} - 选中所有的图片和超链接
6.后代选择器:
将多个选择器用空格隔开作为一个选择器
div p{} - 获取所有是div后代的p标签
div .p1 - 选中div中所有class是p1的标签(div 和 .p1的标签是后代关系)
7.子代选择器:
将多个选择器用>隔开作为一个选择器
div>p{} - 选中所有div标签子标签中的p标签
div>.p1{} - 选中所有div标签子标签中class是p1的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- ============1.id选择器 ============-->
<!-- <h1 id="title1">id选择器</h1>
<p id="p1">我是段落1</p>
<p>我是段落2</p>
<style type="text/css">
#p1{
color: #FF69B4;
font-size: 25px;
}
#title1{
color: #8B008B;
width: 200px;
background-color: yellow;
}
</style> -->
<!-- ============2.class和元素选择器 ============-->
<!-- <h1 class="c1">class选择器</h1>
<p class="c1">我是段落1</p>
<p class="c2">我是段落2</p>
<p class="c1">我是段落3</p>
<a class="c1 c2" href="">我是超链接1</a>
<a class="c2" href="">我是超链接2</a>
<style type="text/css">
/* 元素选择器 */
p{
color: red;
}
/* class选择器 */
.c1{
background-color: seagreen;
}
.c2{
font-size: 25px;
}
/* 通配符 */
*{
border: 1px solid firebrick;
}
</style> -->
<!-- ============3.群组选择器 ============-->
<!-- <h1 class="c1">class选择器</h1>
<p class="c1">我是段落1</p>
<p class="c2">我是段落2</p>
<p class="c1">我是段落3</p>
<a class="c1 c2" href="">我是超链接1</a>
<a class="c2" href="">我是超链接2</a>
<style type="text/css">
p,a{
color: red;
}
h1,.c2{
background-color: yellow;
}
</style> -->
<!-- ============4.后代选择器 ============-->
<p>我是段落1</p>
<div id="">
<p>我是段落2</p>
<span>
<p>我是段落3</p>
</span>
<a href="">我是超链接1</a>
</div>
<div id="">
<p>我是段落4</p>
<div id="">
<p>我是段落5</p>
</div>
</div>
<style type="text/css">
/* 后代选择器 */
div p{
color: red;
}
/* 子代选择器 */
div>p{
background-color: skyblue;
}
</style>
</body>
</html>
三、伪类选择器
1. 什么是伪类选择器
普通选择器选中的是标签(选中一个标签的所有状态)
伪类选择器选中的是标签的状态
语法:
选择标签的选择器:伪类选择器{}
常用的伪类选择器:
伪类选择器名称 | 伪类选择器功能 |
---|---|
link | 链接未被成功访问对应的状态(只针对超链接有效) |
visited | 链接已经被成功访问对应的状态(只针对超链接有效) |
hover | 鼠标悬停在标签上对应的状态(针对所有可见标签有效) |
active | 鼠标按住标签不放对应的状态(针对所有可见标签有效) |
focus | 鼠标点击选择后,出现一种设置的颜色,但是点击其他区域,颜色会消失 |
代码举例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="https://www.baidu.com">我是超链接1</a>
<br>
<style type="text/css">
a:link{
color: red;
}
a:visited{
color: green;
}
a:hover{
color: #0000FF;
font-size: 30px;
}
a:active{
color: #FF69B4;
}
</style>
<div id="div1" style="width: 100px; height: 100px;"></div>
<style type="text/css">
#div1{
background-color: #008000;
}
#div1:hover{
background-color: aqua;
}
#div1:active{
background-color: #8B008B;
}
</style>
</body>
</html>
鼠标没有放在超链接上的显示效果为:
鼠标放在超链接上的显示效果为: