Web前端HTML5&CSS3初学者零基础入门——第四天
开始进入CSS的学习
目录
1. css简介
2. css基本语法
3. 常用选择器
4. 复合选择器
5. 关系选择器
6. 属性选择器
7. 伪类选择器
8. 伪元素选择器
9. 餐厅练习
知识一：css简介
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<link rel="stylesheet" href="./style.css">
head>
<body>
<p style="color:red; font-size: 60px;">少小离家老大回，乡音无改鬓毛衰p>
<p style="color: red; font-size: 60px;">今天天气真不错！p>
<p>落霞与孤鹜齐飞，秋水共长天一色p>
<p>少小离家老大回，乡音无改鬓毛衰p>
body>
html>
- style.css文件内容：
p{
color: tomato;
font-size: 50px;
}
- 扩展阅读：JSP程序设计实训（四）——CSS基本知识
知识二：css基本语法
- style标签里面写的内容都需要遵循CSS规范，和HTML没有关系
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
/*
CSS中的注释，注释中的内容会自动被浏览器所忽略
CSS的基本语法:
选择器 声明块
选择器，通过选择器可以选中页面中的指定元素
比如 p 的作用就是选中页面中所有的p元素
声明块，通过声明块来指定要为元素设置的样式
声明块由一个一个的声明组成
声明是一个名值对结构
一个样式名对应一个样式值，名和值之间以:连接，以;结尾
*/
p{
color: red;
font-size: 40px;
}
h1{
color: green;
}
style>
head>
<body>
<h1>我是H1h1>
<p>今天天气真不错！p>
<p>今天天气真不错！p>
<p>今天天气真不错！p>
<p>今天天气真不错！p>
body>
html>
知识三：常用选择器
- 元素选择器、id选择器、类选择器、通配选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
/*
将所有的段落设置为红色（字体）
元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{} div{}
*/
/* p{
color: red;
}
h1{
color: green;
} */
/*
将儿童相见不相识设置红色
id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
例子：#box{} #red{}
*/
/* #red{
color: red;
} */
/*
将 秋水... 和 落霞... 设置为蓝色
类选择器
作用：根据元素的class属性值选中一组元素
语法：.class属性值
用的频率较多
*/
/* .blue{
color: blue;
}
.abc{
font-size: 20px;
}
*/
/*
通配选择器
作用：选中页面中的所有元素
语法: *
*/
*{
color: red;
}
style>
head>
<body>
<h1 class="blue abc">我是标题h1>
<p>少小离家老大回p>
<p>乡音无改鬓毛衰p>
<p id="red">儿童相见不相识p>
<p>笑问客从何处来p>
<p class="blue">秋水共长天一色p>
<p class="blue">落霞与孤鹜齐飞p>
body>
html>
知识四：复合选择器
- 交集选择器、选择器分组（并集选择器）
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
/* 将class为red的元素设置为红色（字体） */
.red{
color: red;
}
/* 将class为red的div字体大小设置为30px */
/*
交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意点：
交集选择器中如果有元素选择器，必须使用元素选择器开头
*/
div.red{
font-size: 30px;
}
.a.b.c{
color: blue
}
/* div#box1{} */
/*
选择器分组（并集选择器）
作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器3,选择器n{}
#b1,.p1,h1,span,div.red{}
*/
h1, span{
color: green
}
style>
head>
<body>
<div class="red">我是divdiv>
<p class="red">我是p元素p>
<div class="red2 a b c">我是div2div>
<h1>标题h1>
<span>哈哈span>
body>
html>
知识五：关系选择器
- 子元素选择器、后代元素选择器、兄弟元素选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
/*
为div的子元素span设置一个字体颜色红色
（为div直接包含的span设置一个字体颜色）
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
*/
/* div.box > span{
color: orange;
} */
/*
后代元素选择器：
作用：选中指定元素内的指定后代元素
语法：祖先 后代
*/
/* div span{
color: skyblue
} */
/* div > p > span{
color: red;
} */
/*
选择下一个兄弟
语法：前一个 + 下一个
选择下边所有的兄弟
语法：兄 ~ 弟
*/
p + span{
color: red;
}
p ~ span{
color: red;
}
style>
head>
<body>
<div class="box">
我是一个div
<p>
我是div中的p元素
<span>我是p元素中的spanspan>
p>
<span>我是div中的span元素span>
<span>我是div中的span元素span>
<span>我是div中的span元素span>
<span>我是div中的span元素span>
div>
<span>
我是div外的span
span>
body>
html>
知识六：属性选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
/*
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素
*/
/* p[title]{ */
/* p[title=abc]{ */
/* p[title^=abc]{ */
/* p[title$=abc]{ */
p[title*=e]{
color: orange;
}
style>
head>
<body>
<p title="abc">少小离家老大回p>
<p title="abcdef">乡音无改鬓毛衰p>
<p title="helloabc">儿童相见不相识p>
<p>笑问客从何处来p>
<p>秋水共长天一色p>
<p>落霞与孤鹜齐飞p>
body>
html>
知识七：伪类选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
/*
将ul里的第一个li设置为红色
*/
/*
伪类（不存在的类，特殊的类）
- 伪类用来描述一个元素的特殊状态
比如：第一个子元素、被点击的元素、鼠标移入的元素...
- 伪类一般情况下都是使用:开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
特殊值：
n 第n个 n的范围0到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
- 以上这些伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
- 这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序
- :not() 否定伪类
- 将符合条件的元素从选择器中去除
*/
/* ul > span:first-child{
color: red;
} */
/* ul > li:last-child{
color: red;
} */
/* ul > li:nth-child(2n+1){
color: red;
} */
/* ul > li:nth-child(even){
color: red;
} */
/* ul > li:first-of-type{
color: red;
} */
ul > li:not(:nth-of-type(3)){
color: yellowgreen;
}
style>
head>
<body>
<ul>
<span>我是一个spanspan>
<li>第〇个li>
<li>第一个li>
<li>第二个li>
<li>第三个li>
<li>第四个li>
<li>第五个li>
ul>
body>
html>
- 超链接的伪类
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
/*
:link 用来表示没访问过的链接（正常的链接），超链接独有
*/
a:link{
color: red;
}
/*
:visited 用来表示访问过的链接，超链接独有
由于隐私的原因，所以visited这个伪类只能修改链接的颜色
*/
a:visited{
color: orange;
/* font-size: 50px; */
}
/*
:hover 用来表示鼠标移入的状态,不止用于超链接
*/
a:hover{
color: aqua;
font-size: 50px;
}
/*
:active 用来表示鼠标点击,不止用于超链接
*/
a:active{
color: yellowgreen;
}
style>
head>
<body>
<a href="https://www.baidu.com">访问过的链接a>
<br><br>
<a href="https://www.baidu123.com">没访问过的链接a>
body>
html>
知识八：伪元素选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
p{
font-size: 20px;
}
/*
伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
伪元素使用 :: 开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
- before 和 after 必须结合content属性来使用
content属性表示添加的内容
*/
p::first-letter{
font-size: 50px;
}
p::first-line{
background-color: yellow;
}
p::selection{
background-color: greenyellow;
}
/* div::before{
content: 'abc';
color: red;
}
div::after{
content: 'haha';
color: blue;
} */
div::before{
content: '『';
}
div::after{
content: '』';
}
style>
head>
<body>
<div>Hello Hello How are youdiv>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit modi veniam nisi veritatis tempore laborum nemo ipsa itaque optio. Id odit consequatur mollitia excepturi, minus saepe nostrum vel porro.
p>
body>
html>
餐厅练习
- 一个在git上获取的练习: 餐厅练习
点击回到顶部