前言
前面带领大家了解了一个web网页中都有什么,html中的标签是干什么的,今天带领大家入门一下他的好兄弟css
一、(〃‘▽’〃)css简介、英文全称：Cascading Style Sheets
1.概念
css又称层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或
XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
用一句通俗的话讲就是html搭建了人的骨架,css给人穿上了华丽的衣服。
2.用样例体会css的作用
①.未加入css代码之前
可以从以下案例看出字体又小又瘦,平平无奇。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Hello World
</p>
</body>
</html>
②.加入css代码之后
可以看出经过修饰字体变大也变了颜色,并且跑到了中间位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
margin:0 auto;
width: 1000px;
height: 100px;
font-size: 90px;
color: chartreuse;
background-color: aqua;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World
</p>
</body>
</html>
③原因分析
在以上两段代码中,文件2比文件1新增了一个style标签,而标签内的东西才是关键所在
因为hello world是在p标签内所以将p标签选了出来经过一系列的修改得到了如图的效果。
具体是如何做的目前不必深究,需要知道的是css可以这么做,日后还会进行更多的样式介绍
希望大家给个关注阅读其他文章。
二、css中选择器的介绍
1.标签选择器
上述介绍的案例就是使用的标签选择器,标签选择器就是
直接使用标签将相应的所有标签做出改变
①案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 标签选择器 -->
<!-- 选择之后会将标签内的所有数据都改掉 -->
<style>
p {
color: red;
font-weight: 20;
font-size: 100px;
}
div {
color: rgb(0, 124, 128);
font-weight: 200px;
}
</style>
</head>
<body>
<p>Hello world</p>
<div>Hello word</div>
</body>
</html>
②结果
2.类选择器
在此引入一个概念,给标签赋予类
例如：<p class="test"></p>
这样可以选出这一类标签
<!-- 类选择器可以将不同模块的属性在分模块填写达到分离效果 -->
<!-- 定义选择器时在选择器前加上. 调用时直接拿类名进行调用 -->
<!-- 可以给多个标签使用,可以一个类使用多个选择器 -->
①.案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.stylE {
background-color: greenyellow;
width: 10;
height: 10;
font-size: 20;
}
.green {
color: green;
}
.red {
color: red;
}
</style>
</head>
<body>
<p class="stylE red">hello World</p>
<div class="stylE green">Hello World</div>
</body>
</html>
②.结果
3.id选择器
使用方法与类选择器类似,可以对标签赋予id
一般来说：
<!-- id选择器与class选择器不同点是id选择器只能由一个标签使用，
用过之后不能在给其他的标签使用 -->因为id具有唯一性。
经博主测试：
同一个html页面多个标签可以同时使用同一个id
①.案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#greeny {
background-color: greenyellow;
width: 100px;
height: 100px;
color: red;
}
</style>
</head>
<body>
<p id="greeny">Hello World</p>
</body>
</html>
②.结果
4.通配符选择器
通配符选择器一般用于项目的初始化,可以直接选出所有标签,或具有某一特征的标签
①.案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 通配符选择器 -->
<!-- 将所有的字体颜色都变成一种颜色,特殊情况下使用 -->
<style>
* {
color: red;
}
</style>
</head>
<body>
<p>hello world</p>
<div>helloworld</div>
<ul>
<li>hahha</li>
</ul>
</body>
</html>
②.结果
5.属性选择器
根据属性，选择出符合条件的标签。
基本语法：
选择出有类属性的标签
span[class=“re”] {
color: blue;
}
/* 该标签属性是1+10=11 */
选择出开头是demo的标签
div[class^="demo"] {
color: chartreuse;
}
选择出结尾是data的id
select[id$="data"] {
color: cyan;
}
选择出类名包含demo0的标签
div[class*="demo0"] {
color: darkorchid;
}
①.案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
属性选择器,伪类选择器,伪元素选择器权重均是10
属性选择器有几种分类
1.直接填写属性名称
2.填写属性名称等于什么
3.使用倒着的箭头,指定属性的前缀
4.使用$指定属性的后缀
5.使用*指定属性中有什么
-->
<style>
span[class] {
color: blue;
}
/* 该标签属性是1+10=11 */
div[class^="demo"] {
color: chartreuse;
}
select[id$="data"] {
color: cyan;
}
div[class*="demo0"] {
color: darkorchid;
}
</style>
</head>
<body>
<span class="re">Hello World</span>
<span>Hello World</span>
<br>
<div class="1demo1">Hello World</div>
<div class="demo1">Hello World</div>
<div class="demo2">Hello World</div>
<div class="demo3">Hello World</div>
<select name="one" id="one_data">Hello World</select>
<select name="two" id="two_data">Hello World</select>
<select name="" id="three_">Hello World</select>
<div class="demo0_1">Hello World</div>
<div class="1_demo0">Hello World</div>
<div class="1_demo0_1">Hello World</div>
</body>
</html>
②.结果
6.伪类选择器
伪类选择器有两种
一种是孩子伪类选择器：以孩子为主体
一种是类型选择器：以类型为主体
/*
ul 标签下的div标签的第一个与最后一个孩子
*/
ul div:last-child {
color: aquamarine;
}
ul div:first-child {
color: blueviolet;
}
/*
odd是奇数
even是偶数
括号内支持数学公式
*/
div div:nth-child(odd) {
background-color: grey;
}
div div:nth-of-type(even) {
background-color: #ccc;
}
/*
以下两个标签是这两种标签最本质的区别
child以孩子个数为主,先检查孩子所属的位置,然后对比标签类型只有都符合才会触发效果
type以标签类型为主,在指定的标签类型中找到标签的次序,然后触发效果
*/
ul div:nth-child(1) {
background-color: hotpink;
}
ol div:nth-of-type(1) {
background-color: brown;
}
①.案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
第一个与最后一个
*/
ul div:last-child {
color: aquamarine;
}
ul div:first-child {
color: blueviolet;
}
div div:nth-child(odd) {
background-color: grey;
}
div div:nth-of-type(even) {
background-color: #ccc;
}
ul div:nth-child(1) {
background-color: hotpink;
}
ol div:nth-of-type(1) {
background-color: brown;
}
</style>
</head>
<body>
<ul>
<p>Hello</p>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
</ul>
<ol>
<p>Hello</p>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
</ol>
<div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
<div>Hello</div>
</div>
</body>
</html>
②.结果
7.伪元素选择器
伪元素选择器之所以叫伪元素选择器,就是因为标签不是真实存在的
而是依赖原有的盒子存在的,而原有的盒子身份是他的父盒子
伪元素有before after两种
div {
position: relative;
width: 300px;
height: 300px;
background-color: blueviolet;
}
/* 伪元素选择器必须要有content这一属性,如果啥也不存就用双引号引起来空格 */
div:hover::after {
content: 'Hello';
position: absolute;
width: 300px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
line-height: 300px;
font-size: 30px;
font-weight: 700;
}
①.案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
<style>
div {
position: relative;
width: 300px;
height: 300px;
background-color: blueviolet;
}
div:hover::after {
content: 'Hello';
position: absolute;
width: 300px;
height: 300px;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
line-height: 300px;
font-size: 30px;
font-weight: 700;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
②.结果
8.关系选择器
①后代选择器
顾名思义,就是选出某标签包含的所有标签,进行样式的统一
这个特性得益于标签的继承,如果没有对某一标签进行样式
指定,那么他的样式与父标签相同
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
后代选择器就是将该标签下的子孙后代都选取出来,统一的进行样式修改
-->
<style>
ul {
color: skyblue;
}
</style>
</head>
<body>
<ul>
<!-- ul的孩子 -->
<li>Hello World</li>
<li>Hello Sky</li>
<li>Hello Boy
<!-- 孙子辈 -->
<li>Hello man</li>
<p>Hello Tim</p>
</li>
</ul>
</body>
</html>
结果：
②子代选择器
与后代选择器不同的是,并没有将所有的子标签全选上,而是选择的某特定的标签
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
子代选择器就是将后代中的直系子代选择出来,孙子辈及以下不能被选择出来
-->
<style>
.nav>a {
color: rgb(158, 157, 167);
font-style: italic;
}
</style>
</head>
<body>
<p class="nav">
<a href="#">Hello World</a>
<p>
<a href="#">Hello World</a>
</p>
</p>
</body>
</html>
结果：
③并集选择器
将标签进行并联选择,也就是某几种标签有相同的样式
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
并集选择器直接将处于选择器指定的每一个级选择出来,使用','隔开
-->
<style>
.nav>a,
div,
ul li {
color: springgreen;
font-family: '幼圆';
font-style: italic;
text-decoration: line-through;
}
</style>
</head>
<body>
<div>
<!-- 格式改变 -->
Hello World
</div>
<p class="nav">
<!-- 格式改变 -->
<a href="#">Hello World</a>
<p>
<!-- 格式不变 -->
<a href="#">Hello World</a>
</p>
</p>
<ul>
<li>Hello W</li>
<li>Hello O</li>
<li>Hello RLD</li>
</ul>
</body>
</html>
结果：
④链接伪类选择器（放上去有动态效果）
就是在鼠标触发某事件后,进行相应的选择
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
连接伪类选择器就是对连接进行装饰,可以有一种动态的感觉
其中有四种而且书写时必须按照LVHA顺序进行书写
-->
<style>
//标签颜色
a:link {
color: skyblue;
font-size: 70px;
}
//点击过的标签颜色
a:visited {
color: violet;
}
//代表如果鼠标放在了链接标签上就进行相应的样式变化
a:hover {
color: yellowgreen;
}
a:active {
color: blueviolet;
}
</style>
</head>
<body>
<a hred="http://www.baidu.com">网址之家</a>
<a href="#">HELLO</a>
<a href="http://www.baidu.com">WORLD</a>
<a href="http://www.baidu.com">!</a>
<a href="http://www.bilibili.com">YES</a>
</body>
</html>
结果：
⑤表单伪类选择器
进行表单操作时，样式的变化
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
表单伪类选择器是针对表单的一种动态的选择
选择器可以对表单中的样式进行修改
-->
<style>
//当鼠标聚焦在输入框时,输入框的样式变化
input:focus {
color: greenyellow;
outline: 0;
border: 1px solid blue;
box-shadow: 0px 0px 10px 0px blue;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
结果：
总结
没有css的html代码没有华丽的外表,没有js的html代码没有灵魂。